Simone Volpini » XHTML/HTML http://www.simonevolpini.info/blog Consulenza, progettazione e realizzazione siti web Tue, 27 Dec 2011 09:03:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Siti web con immagini di background adattabili a qualsiasi risoluzione http://www.simonevolpini.info/blog/2010/12/10/siti-web-con-immagini-di-background-adattabili-a-qualsiasi-risoluzione/ http://www.simonevolpini.info/blog/2010/12/10/siti-web-con-immagini-di-background-adattabili-a-qualsiasi-risoluzione/#comments Fri, 10 Dec 2010 13:58:59 +0000 Simone http://www.simonevolpini.info/blog/?p=306 Siti web con immagini di background adattabili a qualsiasi risoluzione is a post from: Simone Volpini

]]> Una tecnica molto utilizzata nei siti web consiste nell’inserire un’immagine di sfondo di forte impatto visivo, che possa andare a coprire l’intero background del sito indipendentemente dalla risoluzione del monitor o dalla dimensione della finestra del browser.

Si utilizza un’immagine di grandi dimensioni, per esempio 1920×1200 pixel che è una delle risoluzioni maggiori che possiamo trovare nei monitor più recenti di 21 o 24 pollici, che possa coprire l’intero schermo. Mentre il contenuto principale del sito continua a rimanere in una “gabbia” di dimensioni inferiori (generalmente 960 pixel di larghezza), per assicurare la perfetta visibilità anche in quei monitor che supportano la risoluzione minima di 1024 pixel di larghezza (presente anche nei più recenti netbook con monitor a 10 pollici).

Di solito l”immagine viene gestita tramite i CSS e inserita come background del tag <body>:

body { background: url(immaginedisfondo.jpg) no-repeat 0 50% #fff }

immaginedisfondo.jpg sarà posizionata come sfondo della pagina, rimarrà centrata orizzontalmente (0 50%) e quando il contenuto della pagina è superiore alle dimensioni dell’immagine e comporta uno scroll verticale per leggerne i contenuti, lo sfondo assumerà il colore bianco #fff.
Con questo tipo di posizionamento ci assicuriamo che la parte centrale dell’immagine sia sempre visibile a tutte le risoluzioni, con l’inconveniente che a risoluzioni inferiori (1024 pixel) non vedremo una parta ampia  della foto.

Per ovviare a questo problema si può utilizzare un’altra tecnica che rende adattabile la dimensione della foto alla risoluzione della finestra del browser permettendo così di avere sempre una visione completa dell’immagine.
Prendendo spunto dall’articolo e dagli esempi segnalati da Julius Design, si inserisce l’immagine all’interno dell’HTML con lo specifico tag img

<img class=”bg” src=”immaginesfondo.jpg” alt=”" />

e poi si assegna il seguente stile CSS:

img.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 1024px;
z-index: -9999;
}

che posiziona l’immagine sullo sfondo (position: fixed; z-index:-9999) con una larghezza che si adatta alla finestra del browser (width: 100%). L’immagine rimarrà sempre proporzionata perché non abbiamo dato nessun vincolo all’altezza.
Il min-width serve per bloccare il ridimensionamento della foto quando la finestra del browser assume dimensioni inferiore ai 1024 pixel.

P.S: non funziona con Internet Explorer 6 (IE6).

Siti web con immagini di background adattabili a qualsiasi risoluzione is a post from: Simone Volpini

]]> http://www.simonevolpini.info/blog/2010/12/10/siti-web-con-immagini-di-background-adattabili-a-qualsiasi-risoluzione/feed/ 1 jQuery: seleziona tutto (e deseleziona) http://www.simonevolpini.info/blog/2007/10/14/jquery-seleziona-tutto-e-deseleziona/ http://www.simonevolpini.info/blog/2007/10/14/jquery-seleziona-tutto-e-deseleziona/#comments Sun, 14 Oct 2007 10:56:29 +0000 Simone http://www.simonevolpini.info/blog/2007/10/14/jquery-seleziona-tutto-e-deseleziona/ jQuery: seleziona tutto (e deseleziona) is a post from: Simone Volpini

]]> Spesse volte capita di realizzare delle form contenenti una serie di checkbox (per esempio un elenco delle nazioni), dove l’utente può selezionarne più d’una. Se l’elenco è molto lungo e l’utente ha necessità di selezionarle anche tutte, di solito si inseriscono un paio di pulsanti che permettono di fare una seleziona/deselezione di massa.

Con jQuery è molto semplice e basta una riga di codice.

Intanto costruiamo l’html:


<a href="javascript:selectAll()">seleziona tutto</a> | <a href="javascript:deselectAll()">Deseleziona tutto</a>
<div id="cont_nazioni">
<input type="checkbox" name="nazioni[]" value="IT">Italia<br />
<input type="checkbox" name="nazioni[]" value="FR">Francia<br />
....
<input type="checkbox" name="nazioni[]" value="DE">Germania<br />
<input type="checkbox" name="nazioni[]" value="ES">Spagna<br />
</div>

E poi le due funzioni Javascript per eseguire la selezione e la deselezione:


<script type="text/javascript">
function selectAll() {
$("#cont_nazioni :checkbox").attr({ checked: "checked"});
}

function deselectAll() {
$(“#cont_nazioni :checkbox”).removeAttr(“checked”);
}
</script>

Ovviamente per far funzionare il tutto ricordate di includere anche la classe jQuery.

jQuery: seleziona tutto (e deseleziona) is a post from: Simone Volpini

]]> http://www.simonevolpini.info/blog/2007/10/14/jquery-seleziona-tutto-e-deseleziona/feed/ 0 HTML, form, input e button: viva la diversità! http://www.simonevolpini.info/blog/2007/09/30/html-form-input-e-button-viva-la-diversita/ http://www.simonevolpini.info/blog/2007/09/30/html-form-input-e-button-viva-la-diversita/#comments Sun, 30 Sep 2007 16:09:18 +0000 Simone http://www.simonevolpini.info/blog/2007/09/30/html-form-input-e-button-viva-la-diversita/ HTML, form, input e button: viva la diversità! is a post from: Simone Volpini

]]> Per eseguire il submit delle form HTML si può procedere in due modi:

  • utilizzando il tag input
    <input type=”submit” name=”conferma” value=”OK” />
  • o il button
    <button name=”conferma” value=”1″>OK</button>

Recentemente preferisco utilizzare il button perché può contenere altri tag html come img o br, quindi si ha la possibilità di rendere selezionabile un’area più complessa rispetto al tradizionale input.

Per un mio lavoro, avevo la necessità di utilizzare contemporaneamente più bottoni per il submit di una form e, a seconda del bottone premuto, realizzare funzionalità differenti. Così ho inserito 4 button con lo stesso nome ma con value differenti:

<button name=”conferma” value=”1″>FUNZ 1</button>
<button name=”conferma” value=”2″>FUNZ 2</button>
<button name=”conferma” value=”3″>FUNZ 3</button>
<button name=”conferma” value=”4″>FUNZ 4</button>

convinto che, al submit di uno di essi, in php avrei potuto leggere l’array $_POST e conoscere la funzione richiesta in base al valore assunto da $_POST['conferma'].

Magari!!!

Ecco cosa ottengo in $_POST in base al browser utilizzato, se per esempio premo il terzo bottone:

Firefox e Opera
$_POST['conferma'] = 3. Perfetto!

Internet Explorer 7
$_POST['conferma'] = FUNZ 3
Praticamente non viene restituito il contenuto del value, ma il testo presente tra i tag button.

Internet Explorer 6
$_POST['conferma'] = FUNZ 4. Sempre peggio

IE6 restituisce tutti i bottoni presenti nella form e non solo quello premuto. Poiché i 4 bottoni hanno tutti lo stesso nome, restituisce solo l’ultimo in base all’ordine di apparizione nella form (come avviene normalmente quando ci sono 2 tag input con lo stesso nome).

Morale della favola?

Se il comportamento strano era solo quello di IE7, potevo sempre aggirare il problema lavorando un pò in php per risalire all’effettivo value. Ma per come si comporta IE6, nemmeno dare nomi differenti ai bottoni risolverebbe il problema, perché al submit li riceverei tutti indistintamente e non potrei risalire a quello effettivamente selezionato.

Alla fine ho usato Javascript, realizzando una funzione che alla pressione di uno dei bottoni modifica il contenuto di un campo hidden.

HTML, form, input e button: viva la diversità! is a post from: Simone Volpini

]]> http://www.simonevolpini.info/blog/2007/09/30/html-form-input-e-button-viva-la-diversita/feed/ 3