Knas med setTimeOut

Har lånat en del funktioner från jojoxx.net. (Tack!) Det handlat om att flytta ett lager och jag använder 'moveLayerDiff'-funktionen. Man skickar in tre variabler (lager-id, y-flytt, x-flytt).

Själva problemet:
Jag vill att min lagerflytt skall ske lite snyggt så att det "glider" fram. Jag använder mig av 'setTimeout', så här:
setTimeout('moveLayerDiff(layer, 0, -5); ', 500);

Detta vill inte funka, IE säger att layer inte är definierat, men själva flyttfunktionen funkar, alltså såhär:
moveLayerDiff(layer, 0, -5);

Min känsla är att layer inte är en definierad variabel på den nivå som funktionen setTimeout är på! (Rätta mig om jag har fel!)

Jag har alldrig riktigt förstått hur 'setTimeout' funkar men jag måste ju använda den, eller? Finns det redan tio trådar om det här ämnet som jag inte hittar?

Testa om det funkar så här.

setTimeout('moveLayerDiff(document.all.layer, 0, -5); ', 500);

Nej, det vore onödigt eftersom funktionen är cross-browser och det där bara är -IE5-DOM. Första argumentet till funktionen är lagernamnet så är lagrets namn "layer" borde du kunna använda;

setInterval("moveLayerDiff('layer', 0, -5);", 500);

Skillnaden mellan setInterval och setTimeout är att den senare måste du uppdatera hela tiden om du vill att den skall loopa runt. setInterval kommer alltså att upprepas i all oändlighet. Vill du kan du använda clearInterval för att avbryta loopen;

myInterval = setInterval(...osv

och sedan avbryter du med

clearInterval(myInterval)

setTimeout fungerar på samma sätt men du använder du clearTimeout.

Hmmm....
Vet inte riktigt hur 'setInterval' eller 'setTimeout' påverkar olika, men jag har samma problem med "layer" (vilket jag fattar är en pekare!?)

Jag kan bli av med felmeddelandet att "layer" är odefinierat genom att göra som du visade, sätta enkelfnuttar runt det i anropet. Men då uppstår ett annat problem; i funktionen 'moveLayerDiff' får vi följande felmeddelande (i IE):
document.all[...].style är inte ett objekt.
Antagligen blir det inte rätt variabeltyp som skickas in, eller?

Här kan du se min kod (jag har tagit bort det överflödiga!):

function moveLayerAbs(Id,x,y){
  if (document.all){
    document.all[Id].style.left = x; 
    document.all[Id].style.top = y;
  } else if (document.layers){
    document.layers[Id].left = x; 
    document.layers[Id].top = y;
  } else if (document.getElementById){
    document.getElementById(Id).style.left = x+'px'; 
    document.getElementById(Id).style.top = y+'px';
  }
}	
function moveLayerDiff(Id,diffX,diffY){
  if (document.all || document.layers || document.getElementById){
    if (document.all){
      var currx = parseInt(document.all[Id].style.left);
      var curry = parseInt(document.all[Id].style.top);
    } else if (document.layers){
      var currx = parseInt(document.layers[Id].left);
      var curry = parseInt(document.layers[Id].top);
    } else if (document.getElementById){
      var currx = parseInt(document.getElementById(Id).style.left);
      var curry = parseInt(document.getElementById(Id).style.top);
    }
    currx+=diffX;
    curry+=diffY;
    moveLayerAbs(Id,currx,curry);
  }
}

function openclose(layer, height){
  for (i=0; i<height; i+=5)
    setInterval("moveLayerDiff(layer, 0, 5);", 500);
}

...

<div id="meny_1" ... onClick="openclose('meny_1', 100);">

Make sense???

"pekare" i ordets rätta bemärkelse (inom programmering) finns inte i JavaScript. Jag kan inte av din kod läsa ut exakt vad du vill göra, men här är ett exempel;

<div id="mittlager" style="position:absolute;top:100px;left:50px;">Ett lager</div>
<script language="JavaScript" type="text/javascript">
var interval;
function moveLayerAbs(Id,x,y){
  if (document.all){
    document.all[Id].style.left = x; 
    document.all[Id].style.top = y;
  } else if (document.layers){
    document.layers[Id].left = x; 
    document.layers[Id].top = y;
  } else if (document.getElementById){
    document.getElementById(Id).style.left = x+'px'; 
    document.getElementById(Id).style.top = y+'px';
  }
}	
function moveLayerDiff(Id,diffX,diffY){
  if (document.all || document.layers || document.getElementById){
    if (document.all){
      var currx = parseInt(document.all[Id].style.left);
      var curry = parseInt(document.all[Id].style.top);
    } else if (document.layers){
      var currx = parseInt(document.layers[Id].left);
      var curry = parseInt(document.layers[Id].top);
    } else if (document.getElementById){
      var currx = parseInt(document.getElementById(Id).style.left);
      var curry = parseInt(document.getElementById(Id).style.top);
    }
    currx+=diffX;
    curry+=diffY;
    moveLayerAbs(Id,currx,curry);
  }
}
function startScroll(){
	interval=setInterval("moveLayerDiff('mittlager',0,5);",100);
}
function stopScroll(){
	clearInterval(interval);
}
</script>
<a href="#" onClick="startScroll(); return false;">Starta scroll</a>
<a href="#" onClick="stopScroll(); return false;">Stoppa scroll</a>

Så kanske du ser enklare hur sakerna anropas och används.

Tack så jättemycket! Nu fattar jag lite mer hur det funkar!

Men...
Det framgick kanske inte av min kod, men jag ville ju att själva stoppandet skall skötas av koden! D.v.s. Användaren klickar på en länk som startar scrollen. När den har nått ett visst värde skall scrollen stanna.

Då kanske du skulle fundera på att använda scriptet i sitt orginalutförande. Då har du med en funktion för att scrolla :)

layerlib.js

<script language="JavaScript" type="text/javascript" src="layerlib.js"></script>

<div id="mittlager" style="position:absolute;top:100px;left:300px;">Ett lager</div>
<a href="#" onClick="scrollLayerTo('mittlager',300,100,1);">Scrolla till startposition</a><br>
<a href="#" onClick="scrollLayerTo('mittlager',300,getLayerY('mittlager')+100,1);">Scrolla till neråt</a><br>
<a href="#" onClick="scrollLayerTo('mittlager',300,getLayerY('mittlager')-100,1);">Scrolla till uppåt</a><br>