Problema spinoasa – jQuery + IE7

Zilele trecute lucram la un meniu de tip drop-down, intrucat fiecare din elemente avea submeniuri cu diverse optiuni. Am ales sa implementez o soutie jQuery pentru ca libraria imi este familiara si mi se pare foarte ergonomica si usor de folosit. In plus, exista o multitudine de plugin-uri, cu ajutorul carora poti sa rezolvi cam orice problema ai avea. Eu pana acum n-am avut ceva de facut in javascript pe care jQuery + plugin-ul potrivit sa nu poata sa-l faca.

N-am sa intru in detalii cu privire la felul in care am construit meniul. Asta pentru ca am folosit codul pe care l-am gasit aici. Am intalnit in schimb o problema. Se manifesta bineinteles pe IE7, iar solutia a venit dupa ceva "sapaturi" pe internet.

Problema se manifesta in felul urmator: Atunci cand meniul se deschidea in dreptul unul <div> float-tat, refuza sa se deschida pe deasupra acestuia. De fiecare data, se ascundea in spatele div-urilor, de parca aceastea ar fi avut o proprietate z-index foarte mare pe care nimic nu putea sa o depasasca.

Evident, prima solutie incercata, a fost sa setez chiar eu proprietati z-index cu care sa controlez felul in care apar elementele. N-a functionat. Ulterior mi-am dat seama si de ce. Daca ati avut curiozitatea sa cititi prin codul catre care v-am indrumat, ati constatat ca IE nu stie sa randeze meniul doar din CSS, folosind pseudo-clasa :hover. In schimb pentru a compensa, s-a folosit solutia javascript/jQuery.

Din pacate, asta prezinta o problema. Pentru ca stilurile sunt aplicate la :hover, iar IE nu stie sa interpreteze acest lucru, proprietatea z-index era ignorata. Am gasit intr-un final o solutie. Am sa prezint mai intai codul, apoi explicatia.

Pentru cei care nu au trecut prin codul spre care v-am indrumat, partea de javascript arata asa:

<script type="text/javascript">
	$(document).ready(function(){
	$('#cssdropdown li.headlink').hover(
		function() { $('ul', this).css('display', 'block'); },
		function() { $('ul', this).css('display', 'none'); });
	});
</script>

Dupa cum puteti vedea declansatorul pentru afisarea elementelor ascunse este implementat in javascript. Asta inseamna ca si setarea proprietatii z-index trebuia setata in acelas fel. Solutia este urmatoarea:

<script type="text/javascript">
	$(document).ready(function(){
	$('#cssdropdown li.headlink').hover(
		function() { $('ul', this).css('display', 'block'); },
		function() { $('ul', this).css('display', 'none'); });

                var zIndexNumber = 1000;
                $('li').each(function() {
                        $(this).css('zIndex', zIndexNumber);
                        zIndexNumber -= 10;
                });
	});
</script>

Acum, explicatia codului: Pentru inceput se initiaza o variabila numita in mod sugestiv zIndexNumber. Aceasta va fi valoarea initiala a proprietatii z-index. Dupa aceea se cicleaza prin toate elementele de tip <li> din pagina folosind functia each() din jQuery. Acesta este un mod simplificat de a selecta toate elementele de un anumit tip dintr-o pagina si a cicla prin ele printr-un loop de tip for().

Pentru fiecare element de tip <li> prin care ciclam setam proprietatea z-index folosind variabila zIndexNumber. In final, la fiecare pas avem grija sa decrementam valoarea lui zIndexNumber cu 10 (puteti sa alegeti orice valoare in functie de nevoi), pentru a nu avea mai multe elemente cu acelasi z-index.

Desi mai putin eleganta, asta e singura solutie gasita de mine pe care sa o interpreteze si pacatosul de IE7. Daca stiti una mai buna, va rog lasati un comentariu.