webForumDet fria alternativet

Slidedown meny

JavaScript

2 svar · 380 visningar · startad av programmer3

Medlem sedan juli 20093 inlägg
Frågan#1

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

Medlem sedan sep. 2004828 inlägg
#2

Allra enklast är ju att kika på jQuerys slideUp och slideDown för att göra detta. Där är problemet med olika webbläsare redan löst.

Medlem sedan juli 20093 inlägg
#3

Nu kör vi med jQuery's slideup/slidedown och det fungerar mycket bättre! :)

/Joel

258 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
121 ms — ändringar (db)