Il problema si presenta, come solito, con l’accoppiata Windows/Internet Explorer e più precisamente:
- in Windows Vista con IE7 e IE8
- in Windows XP con IE7

Stranamente Internet Explorer 6 ne è esente ed anche IE8 sotto windows XP.

In breve, la funzione jQuery position() applicata ad un DIV a cui è associato uno stile inline del tipo style=”left: -200px”, invece di restituire -200 pixel, da -199 pixel. 1 pixel di differenza. Questo pixel, nel mio caso, compromette lo slide delle foto.

Solo dopo vari tentativi ho capito che l’errore era dato dalla funzione e l’ho aggirato utilizzando le funzioni standard di javascript:

// Soluzione con jQuery, ma con bug
var position = $("#Div").position();
vat x = position.left;
// x errato

// Soluzione standard, esente dal bug
var x = document.getElementById('Div').style.left;

jQuery e bug nella funzione position() is a post from: Simone Volpini

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

Come promesso nell’ultimo post (ormai datato), oggi pubblico una versione modificata del menù proposto da Gianluca Troiani nel suo libro: ho praticamente sostituito lo script javascript che controlla l’apertura e chiusura delle tendine con una versione realizzata con jQuery.
Lo script può essere applicato sia alla versione con menù orizzontale, che per quella in verticale che ho modificato nel post precedente.

Il css e l’html della pagina è identico alla versione originale, ho solo aggiunto il seguente codice nel tag :

<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”scripts/jquery.onfocus.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#menuNavigazione’).onfocus();
});
</script>

che si occupa di caricare la libreria jQuery e jquery.onfocus.js che ho sviluppato per gestire l’apertura/chiusura del menù.
Il javascript $(‘#menuNavigazione’).onfocus() si occupa di assegnare alla lista (ul) con id menuNavigazione la funzione onfocus.

La funzione onfocus è la seguente:

(function() {
$.fn.onfocus = function(){

$(this).find(“ul”).removeClass().addClass(“subMenu-off”);

$(this).find(“li”).focus = $(this).find(“li”).mouseover(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-on”);
});
$(this).find(“li”).mouseout(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-off”);
});
};
})(jQuery);

Passo 1:
$(this).find(“ul”).removeClass().addClass(“subMenu-off”);

associa a tutte le sottoliste dell’oggetto this lo stile subMenu-off per nascondere i sottomenù; questa procedura è migliore rispetto a quella proposta da Gianluca, perché jQuery esegue il javascript mentre la pagina si sta caricando, mentre l’altra versione attende che venga completato il caricamento di tutto l’HTML. In questo modo si evita uno sfarfallio iniziale dei sottomenù che ho notato in firefox sotto linux o su PC più datati.

Passo 2:
$(this).find(“li”).focus = $(this).find(“li”).mouseover(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-on”);
});

se si passa con il mouse (o al focus) sopra un tag li della lista rimuove lo stile subMenu-off e aggiunge subMenu-on ai tag ul presenti all’interno di li.

Passo 3:
$(this).find(“li”).mouseout(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-off”);
});

esegue l’operazione opposta del passo 2: quando si verifica l’evento mouseout, riassegna ai tag ul presenti all’interno di li la classe subMenu-off.

In jquery_menu_orizzontale.zip l’esempio completo.

Menù a tendina orizzontale e jQuery is a post from: Simone Volpini