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: ,

Come accedere all'head via codice in asp.net

Giorgio Borelli

Una esigenza sentita per chi programma in asp.net è quella di poter controllare gli elementi dell'head di una pagina aspx in maniera programmatica, ovvero via codice di programmazione. Tramite codice C# o VB è possibile gestire: aggiungere, modificare o rimuovere gli elementi presenti nell'head quali title, meta tag e risorse, il tutto in maniera semplice ed elegante. Manipolare l'head in asp.net è semplice, andiamo a scoprire come fare. Prosegue...

Categorie: ASP.NET

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: , ,

4 Metodi per aggiungere i CSS alle pagine HTML

Giorgio Borelli

Come inserire i fogli di stile nelle pagine webI Fogli di stile sono la tecnologia di riferimento per la realizzazione dei layout e della formattazione delle pagine web, per chi fà web, come i webdesigner o i webmaster, conoscerli è fondamentale, non fosse per altro che rappresentano lo standard imposto dal W3C per realizzare la struttura delle pagine web.

Un layout web realizzato con i CSS anzichè con le classiche tabelle HTML è impronta di professionalità e qualità del sito, oltre ovviamente a tutta una serie di vantaggi come l'indicizzazione, l'accessibilità, la manutenibilità, la pulizia del codice, la velocità del sito stesso. La filosofia che sta dietro i fogli di stile nasce dall'esigenza di avere un "linguaggio" distinto dall'HTML per strutturare e formattare i siti web, mentre l'HTML dovrebbe essere usato esclusivamente come markup per i contenuti, una tabella HTML serve per presentare dei dati in forma tabellare e non per suddividere le sezioni di una pagina web, ecco perchè sempre più il W3C impone l'uso dei CSS come standard, per radicare anche la mentalità che il codice (di formattazione o di programmazione) deve essere tenuto separato dal contenuto della pagina web.

Non voglio però entrare nella storia e nel merito dei CSS, sarebbe un argomento ben troppo lungo che esula dal nostro scopo, voglio fornirvi invece un'articolo che racchiude e spieghi le quattro tecniche  principali per inserire un foglio di stile all'interno delle pagine HTML, mostrando i vantaggi e gli svantaggi di ognuna di esse.

Prosegue...

Categorie: CSS | Web Design

Tags: , ,

CSS: pseudo class hover IE6 bug fix

Giorgio Borelli

Internet Explorer 6 non interpreta correttamente la pseudo class hover come regola nei fogli di stileCome visto anche nell'articolo precedente, la compatibilità Cross Browser ha un'importanza fondamentale nella realizzazione e nel successo di un sito web.

Visto e considerato che non tutti i browser interpretano correttamente ed allo stesso modo i tag HTML, e soprattutto se ne infischiano delle direttive del W3C (almeno nel passato), i Web Designer si ritrovano a dover risolvere problemi di compatibilità grafica tra i vari browser a dir poco ostici. Non solo abbiamo un elevato numero di browser, ma questi si moltiplicano ancora per le loro varie versioni, e riuscire a far vedere bene un sito con tutti, credetemi, è un'impresa faraonica se non impossibile. Comunque noi non ci scoraggiamo ed oggi cerchiamo di rendere la vita più facile agli sviluppatori web parlando di come risolvere (Fix) un bug dell'odiatissimo Internet Explorer 6 (ed anche IE5.5).

Il bug in questione riguarda la non corretta interpretazione della pseudo class hover in Internet Explore 6 e versioni precedenti.

Prosegue...

Categorie: CSS | Web Design

Tags: , , , , , ,