Cambiare colore testo del placeholder con i CSS

Giorgio Borelli

Con HTML5 si sono introdotte tante novità nello sviluppo delle pagine web, e molte hanno agevolato il lavoro dei web develooper. Tra le più utilizzate vi è sicuramente l'attributo placeholder per i tag input e textarea.

L'attributo placeholder consente di specificare un testo, visualizzato all'interno di un tag input, come suggerimeto per l'utente di quello che il campo deve ricevere, e scompare non appena vi si clicca dentro (focus) per cominciare ad inserire il testo. Con il placeholder abbiamo un tooltip comodissimo, facile ed immediato da implementare per i nostri input, effetto che prima potevamo ottenere solo con "scomodi" script Javscript.

Fin qui tutto chiaro, ma il punto su cui desidero soffermarmi è il colore del testo del placeholder, che di default è grigio, e se volessimo cambiarlo? Per esigenze grafiche o altro, abbiamo necessità di cambiare il colore del testo inserito tramite placeholder. Come fare? Beh con i CSS ovviamente.

Prosegue...

Categorie: Browser | CSS | html

Tags: ,

Creare o rimuovere elementi html dinamicamente con Javascript

Giorgio Borelli

Restiamo ancora nell'ambito del DHTML (Dynamic HTML) e manipolazione del DOM a mezzo codice Javscript. Vediamo come creare o rimuovere un elemento hmtl via Javascript. Le necessità di questa tecnica possono essere diverse ed applicabili in svariati contesti, facciamo dei semplici esempi che possono essere modificati ed adattati alle varie esigenze, con due semplici funzioni Javascript sarà semplicissimo aggiungere o rimuovere elementi html al volo via Javascript.

Prosegue...

Categorie: html | Javascript

Tags: ,

Rendere visibili o invisibili elementi html via Javascript

Giorgio Borelli

Restando in tema di manipolazione del DOM (Document Object Model), vediamo oggi come rendere visibili o invisibili degli elementi html via Javascript. Forse non tutti sanno che lo stile dei tag html è modificabile anche tramite codice Javascript, in particolar modo per rendere invisibile o visibile un tag html andremo a toccare lo style dell'elemento agendo sull'attributo display direttamente tramite codice Javascript, andiamo a vedere come fare.

Prosegue...

Categorie: html | Javascript

Tags: ,

Inserire html con Javascript

Giorgio Borelli

Usare Javascript per inserire del codice html all'interno della propria pagina web, è una pratica che presto o tardi la maggior parte degli sviluppatori web userà. Potremmo dire che questa manipolazione del DOM (Document Object Model) rientra in quell'insieme di tecniche note col nome di DHTML (Dynamic HTML o se preferite l'italiano HTML dinamico). Ma vediamo come fare ad inserire dei tag html all'interno della pagina web via Javascript.

Prosegue...

Categorie: html | Javascript

Tags: ,

Differenze e vantaggi nell'uso di Alt e Title nel tag img

Giorgio Borelli

Il web ha subito diverse trasformazioni e ad oggi le pagine html sono diventate molto più "veloci", dinamiche ed accattivanti graficamente; uso massivo di javscript e librerie client come JQuery, codice server side super ottimizzato e così via. L'usabilità e l'efficacia dell'informazione proposta però non può prescindere dai sempre importanti e basilari tag html e dai loro attributi, se usati correttamente aumentano notevolmente l'esperienza di navigazione e l'informazione fornita, siano essi utenti umani che spider dei motori di ricerca.

Uno dei tag più usati ed importante è sicuramente il tag img, in particolare desidero porrè l'attenzione sugli attributi alt text e title image di questo tag, sono entrambi fondamentali e a differenza di quello che può pensare qualcuno non sono equivalenti e vanno usati entrambi, andiamo a scoprire più da vicino le differenze tra alt e title nel tag img.

Prosegue...

Categorie: html

Tags: ,

Scatenare un PostBack da un evento Javascript con la funzione __doPostBack

Giorgio Borelli

Scatenare un PostBack con la funzione Javascritp __doPostBackJavascript è un linguaggio di scripting lato client che ha permesso di fare un grosso passo in avanti nell'evoluzione delle pagine web, consentendo di passare dai semplici e spartani siti statici in puro html, a siti web dinamici ed interattivi, migliorando così l'esperienza di navigazione dell'utente rendendola anche più user friendly.

Ciò nonostante, essendo per l'appunto un linguaggio lato client, ovvero viene eseguito dal browser (il client) dell'utente, non è in grado d'interagire con il server e con i linguaggi lato server quali ad esempio ASP.NET, a meno di non usare dei trucchi che consentono di "superare" la natura stateless del web, quali ad esempio i cookies. Ci sono casi in cui per uno sviluppatore web risulterebbe davvero comodo, al verificarsi di un evento client side, quale potrebbe essere un comunissimo evento onclick su un link (tag a), poter passare allo scatenarsi di detto evento un valore dal client al server e trattarlo con un linguaggio server side, senza usare i macchinosi e più lenti cookies o altre tecniche simili.

Javascript ci viene in aiuto anche in questo caso, mette infatti a disposizione una funzione in grado di scatenare un PostBack della pagina web al verificarsi dell'evento onclick o di un qualsiasi altro evento client side con Javascript. Questa funzione prende il nome di __doPostBack, andiamo a scoprire nel dettaglio come funziona e quanto può risultare utile se usata correttamente.

Prosegue...

Categorie: ASP.NET | html | Javascript

Tags: , ,

Impostare altezza div con i CSS

Giorgio Borelli

Impostare l'altezza di un elemento div con i Cascading Style Sheets (CSS)Il tag <div> è sicuramente tra i box più usati come raccoglitore di contenuti e per la preparazione di layout per le pagine web, capirne il corretto funzionamento secondo il box-model e formattarlo correttamente usando i fogli di stile (CSS), è basilare per chi realizza pagine html e sviluppa sul web.

Come descritto nel precedente articolo "Impostare altezza div con Javascript", uno degli aspetti fondamentali del div è la gestione della sua altezza, esso di default adatta la sua altezza al testo e immagini che esso contiene; in altri casi questa viene impostata come fissa specificandone il valore height in pixel o in percentuale in una regola di stile.

Ovviamente con un'altezza fissa per un div, nasce l'esigenza di gestirne la visualizzazione quando il suo contenuto varia, risultando di meno o in eccedenza rispetto all'altezza fissata, nell'articolo "Impostare altezza div con Javascript" abbiamo visto come modificare l'altezza di un div tramite una semplice funzione Javascript, questa tecnica sebbene efficace, ha la grossa limitazione di essere inutilizzabile quando i browser hanno Javascript disabilitato. Per ovviare a questo problema, ed ottenere una più estesa compatibilità cross-browser ci vengono in aiuto i Cascading Style Sheets (CSS) o più semplicemente Fogli di Stile, i quali ci consentono di specificare degli attributi per la proprietà height in grado di gestire correttamente l'altezza di un div anche quando il suo contenuto varia dinamicamente.

Prosegue...

Categorie: CSS | html | Web | Web Design

Tags: ,

Impostare altezza div con Javascript

Giorgio Borelli

Impostare l'altezza di un elemento div con JavascriptIl tag <div>, in html rappresenta un blocco per ragruppare e separare i contenuti di una pagina html. Secondo il block model, a differenza del tag <span> esso non è un elemento block inline, ossia qualsiasi altro elemento che vi sta affianco viene automaticamente riportato a capo, poichè esso occupa tutta la linea del documento (a meno di non specificare diversamente). Il tag div, viene usato in maniera massiccia nella realizzazione delle pagine html, sia come raccoglitore di contenuti che come blocco per il layout web, sopratutto in quei layout table less (che non fanno uso di tabelle) così consigliati dai più recenti standard web. L'elemento div può contenere qualsiasi altro elemento e testo, e nei siti dinamici assume un ruolo fondamentale, poichè in larghezza è un elemento block, come detto manda a capo gli altri elementi a seguire fuori dal div, in altezza invece ha la proprietà di adattarsi al contenuto che esso contiene, il chè lo rende utilissimo a questo scopo, ovvero nell'uso dei layout per siti con contenuti dinamici.

Allo stesso modo, possono nascere esigenze che il div abbia un'altezza fissa, impostata magari tramite una regola di stile, proprio per adattarsi bene al layout della pagina web e/o per una migliore resa grafica, come fare allora se il contenuto del div cambia dinamicamente o la sua altezza deve variare a seconda della pagina che navighiamo?

Siamo "costretti" a cambiare "al volo" l'altezza del div. Possiamo impostare l'altezza del div in due modi, o con i fogli di stile (css), o tramite Javascript; in questo articolo andiamo a scoprire come fare usando Javascript.

Prosegue...

Categorie: CSS | html | Javascript | Web Design

Tags: , ,