Avatar billede syggo Nybegynder
16. juli 2002 - 00:41 Der er 3 kommentarer og
1 løsning

Slide down menu

Følgende er en .js script-fil for en slide-down menu som på http://javascript.internet.com/navigation/slide-down-menu.html

Menuen glider ufatteligt langsomt frem når man trykker på et menupunkt! Nogen der kan gennemskue hvordan hastigheden på slide-effekten kan øges?

--------------------------------------------------------

//free JavaScripts on http://www.ScriptBreaker.com

  var height = 20; // height of the menu headers
  var iheight = 15; // height of the menu_items
 
  var bgc = "lightyellow" // background color of the item
  var tc = "black" // text color of the item
 
  var over_bgc = "silver";
  var over_tc = "black";
 
  var speed = 0;
  var timerID = "";
  var N = (document.all) ? 0 : 1;
  var width = 152
 


  var self_menu = new Array();
function write_menu()
{
  smc = 0; // count the position of the self_menu
  document.write("<div style='position:absolute'>");
  mn = 0;
  mni = 1;
  start = -1;
 
  for(i=0;i<Link.length;i++)
  {
  la = Link[i].split("|");

  if (la[0] == "0")
  {
    if(start == 0)
    {
      document.write("</div>");
      h =  csmc * iheight;
      tmn = mn; //-h
      self_menu[smc] = new Array(tmn,h,0,-2);
      smc++;
      mn--;
    }
    csmc = 0;
    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'>&nbsp;"+ la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
  }
  else
  {
    if(start == 1)
    {
      if(N)mn+=2;
      document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
      start = 0;
    }
   
    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>&nbsp;&nbsp;"+ la[1] + "</div></a>");
    csmc++;
  }
  }
  if (start == 0)
  {
    document.write("</div>");
    h =  csmc * iheight;
    tmn = mn + 5; //-h
    self_menu[smc] = new Array(tmn,h,0);
    name = "down" + (self_menu.length-1);
    obj = document.getElementById(name);
    obj.style.borderBottomColor = "darkblue";
    obj.style.borderBottomWidth = 1;
    obj.style.borderBottomStyle = "solid";
  }
  document.write("</div>");
}
 

function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
  self_menu[nr+1][2] = 1;
  if(nr == self_menu.length-2) {to++;}
  epull_down(begin,to,0);
}
else
{
  to = 0;
  self_menu[nr+1][2] = 0;
  name = "down"+(nr+2);
  open_item = 0;
  for(i=0;i<nr;i++)
  {
  if(self_menu[i][2] == 1)
    {open_item += self_menu[i][1];
    }
  }
  if (N == false) {open_item-= (c*1)};
  if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
  else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
  epull_up(begin,to,val);
}
}
}

function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i<self_menu.length;i++)
{
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
  if(self_menu[i][3] == nr) pull_down(i,nr)
  i==self_menu.length;
}
}


--------------------------------------------------------

På forhånd tak :)
Avatar billede kimblim Nybegynder
17. juli 2002 - 12:16 #1
ja, det gør du i variablen speed ;)
Avatar billede syggo Nybegynder
17. juli 2002 - 14:05 #2
Ja, ja, rolig nu - jeg er jo ikke mongol ;)

Sagen er den at menuen slider ufatteligt langsomt med værdien 0 i variablen speed. Og jo højere værdi - jo lavere hastighed... Og negativ værdi fungerer som værdien 0.

Og det er deri hvor som at det er at problemet ligger ;) Nogen forslag til andre ting der spiller ind på hastigheden?
Avatar billede atn Nybegynder
18. juli 2002 - 00:37 #3
Heysa !

Skift disse her 2 funktioner ud med de andre der er i oven stående script:
De hedder det samme...men med et par små ændringer...

function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+100)+",0)";
for (i=nr;i<self_menu.length;i++)
{
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)+speedMove;
}
nowv += speedMove;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)-speedMove;
}
nowv -= speedMove;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

og så lige efter "speed" variablen tilføjer du:

var speedMove = 3;

Altså:

  var speed = 1;
  var speedMove = 3;

speedMove bestemmer nu hvor mange pixels lagene skal rykke sig ad gangen...

Håber du kan finde ud af det....ellers må du lige skrive igen..

Venligst

<ATN/>
Avatar billede syggo Nybegynder
18. juli 2002 - 19:51 #4
Nice! Takker :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester