Hej!
Jag håller på att utveckla en webbutik.
Till butiken hör en meny på vänster sida med huvudkategorier och underkategorier. När man klickar på en huvudkategori så ska underkategorierna "slides" ner lite snyggt.
Jag har därför pulat ihop ett litet javascript som ändrar höjden på den div som innehåller underkategorierna. Detta med hjälp av funktionen setInterval/clearInterval i JS.
Problemet
Nu när jag testar menyn i olika webbläsare och på olika datorer så rullas menyn fram i olika tempo. Vad beror det på? Kan jag få menyn att ha samma "speed" oavsett dator eller webbläsare (ex ie och firefox)? Det skiljer nästan en sekund ibland.
Klipper jag ut själva menyn ur sidan och har den på en separat sida (med bara meny och inget annat) så verkar den "slida" lika fort oavsett dator.
Kod:
var c=0;
var test=true;
var obj,obj1,obj2,hgt,exp,shr;
function showHideMenu(layerid,items) {
hgt=(items*20)+10;
var test = document.getElementById('menuLayer' + layerid).style.height;
test = parseInt(test.replace("px", ""));
c=test;
if(c=='') { c=0; }
if(test > 0) {
document.getElementById('menuImg' + layerid).src="/_images/buttons/plus.gif";
shr=setInterval('shrinkDiv('+layerid+','+items+')',10);
}else{
document.getElementById('menuImg' + layerid).src="/_images/buttons/minus.gif";
exp=setInterval('expandDiv('+layerid+','+items+')',10);
}
}
function expandDiv(layerid, items) {
document.getElementById('menuLayer' + layerid).style.height=c+'px';
c+=10;
if(c>=hgt) {
c=hgt;
clearInterval(exp);
return;
}
}
function shrinkDiv(layerid, items) {
document.getElementById('menuLayer' + layerid).style.height=c+'px';
c-=10;
if(c<0) {
c=0;
clearInterval(shr);
document.getElementById('menuLayer' + layerid).style.height=0;
return;
}
}
/Joel