IE z-index BUG

29
luglio

aro IE, se ti chiedo con una regola z-index di mostrarmi un determinato elemento sopra ad un altro, perchè tu devi fare quello che ti pare?
Insomma l’ennesimo bug di IE, da quanto ho capito indagando, il browser microsoft nelle sue svariate versioni interpreta lo z-index al contrario degli altri browser, impostando priorità di visualizzazione Z seguendo l’ordine HTML di creazione degli elementi e non ci sono regole CSS e forzature che tengano per cambiare questa visualizzazione se non intervenendo sulla disposizione HTML (cosa non sempre possibile).

Be per aggirare il problema esistono diverse soluzioni, reperibili velocemente cercando il “titolo del post” in google, ma tra le molte la più indicata che ho trovato, avendo a disposizione jQuery è questo veloce script che reindicizza tutti gli elementi della pagina assegnando loro uno z-index corretto.

$(document).ready(
function() { if($.browser.msie){
$(‘div’).each( function {
if($(this).css(‘position’)!=’absolute’) {
$(this).css(‘zIndex’, 1000 – (i * 10));
}});}});

Questa modifica permette ai vari Internet Explorer di riconoscere a dovere le regole z-index inserite nei notri CSS.

jQuery 1.3

15
gennaio

A quanto pare jQuery nacque il 14 gennaio 2006 quindi arriva a compiere 3 anni, pubblicando la versione 1.3 del noto framework javascript.
jQuery secondo i vari test è il framework più performante che il web ci offre, con la nuova versione raggiunge un potenziale notevole introducendo anche nuove feautres.
Tra queste vediamo:

Sizzle, un selettore di CSS riscritto che ne migliora la velocità e l’estensibilità, rendendolo Stand Alone.
Live Events, la possibilità di delegare ad un elemento, introdotto in origine dallo stesso framework, nuovi eventi ed effetti.
jQuery Event Overhaul, compatibilità dell’oggetto jQuery.Event riscritta e incrementata rispetto agli standard W3C e il cross-browsing.
HTML Injection, l’inserimento (append) di codice HTML in un documento è stato riscritto alla base del core di jQuery portandone la velocità a 6x in confronto alla vecchia versione.
Offset Rewrite, come nel caso precedente il modulo offset (praticamente le azioni jQuery che vediamo a schermo) è stato riscritto incrementando le prestazioni di 3x.
No More Browser Sniffin, a quanto pare scopro ora che le librerie js contengono degli identificatori per i browser (jQuery.browser), ovvero a seconda del browser che usi lavorano in modo differente, ora jQuery migliora le compatibilità cross-browser e nasconde l’oggetto di identificazione (utilizzabile su richiesta di plugin o in futuro) e introduce l’oggetto jQuery.support che analizza direttamente il bug, simula la compatibilità col browser e reagisce di conseguenza.

Questa è la mia interpretazione leggendo le specifiche riportate dagli sviluppatori.

Qui troviamo il post su jQuery blog con l’annuncio della versione 1.3 e qui la completa descrizione dei cambiamenti introdotti della nuova release.

jQuery background-image changer

2
ottobre

Nuovo sito, nuova feature studiata apposta, con jQuery e le API che intervengono sui CSS sono riuscito a costruire un semplice “background changer”, in modo da cambiare la fotografia di fondo al <body>.
Guardiamo il codice ovviamente includiamo nell’head il jquery.js:

HTML
<div class=”bg 1″>1</div>
<div class=”bg 2″>2</div>

CSS
body {
background: #fff url(skin/bg0.jpg) center top no-repeat fixed;
}
.bg {
position:realtive; float:left;
height: 19px; width: 19px;
text-align:center; line-height: 19px;
margin: 0px 1px 1px 0px;
background: #000; color: #fff;
cursor:pointer;
}

JAVASCRIPT
$(document).ready(function(){
$(“.bg.1″).click(function(){
$(“body”).css(‘background-image’,'url(skin/bg1.jpg)’);
});
$(“.bg.2″).click(function(){
$(“body”).css(‘background-image’,'url(skin/bg2.jpg)’);
});
});

Ora non mi resta che implementare i coockie (o con jquery.coockie.js plugin o direttamente con php) per conservare la scelta del background, se qualcuno ha idee per aggiunte, correzioni e o revisioni ecc, liberissimo di condividerle.

12