Slide hyperlink

Status
Niet open voor verdere reacties.
L

Lapixx

Gebruiker
Lid geworden
2 mei 2008
Berichten
132
Hoi,

Ik heb een stukje javascript geschreven die alle links met classname 'slide' zo aanpast, dat ze naar rechts schuiven bij een mouseover, en terugschuiven bij mouseout. (position: relative is toegepast).

PHP: 
<script type="text/javascript">
function slidein(el,sta){
if(sta==1){el.dir=1;} //verander de richting
	if(el.slide<10 && el.dir==1){  //check of het element verder moet schuiven
		el.slide=el.slide+2;	
		el.style.left=el.slide;
		window.setTimeout("slidein("+el+")",10);
	}
}
function slideout(el,sta){
if(sta==1){el.dir=2;}
	if(el.slide>0 && el.dir==2){
		el.slide= el.slide-2;	
		el.style.left=el.slide;
		window.setTimeout("slideout("+el+")",10);
	}
}

function makeslide(){ //zoekt naar links en gebruikt functie slideint() op de elementen
	a=document.getElementsByTagName("a");
	for(i=0; i<a.length; i++){
		if(a[i].className=="slide"){
			slideinit(a[i]);			
		}	
	}
}
function slideinit(obj){ //voeg events en vars toe
	obj.slide=0;
	obj.dir=0;
	obj.onmouseover=function(){
		slidein(obj,1); //2e argument geeft aan dat de animatie word gestart zodat variable DIR aangeeft welke richting het element uit moet gaan
	}
	obj.onmouseout=function(){
		slideout(obj,1); //idem, maar nu bij de slideout
	}
}
window.onload=makeslide;
</script>

Probleem is echter dat in het argument in de timeouts niet goed word doorgegeven. Het element verschuift 1px en doet daarna niets meer. Wat is er mis met window.setTimeout("slideout("+el+")",10); ?

Alvast bedankt
 
Laatst bewerkt:
Je zou

PHP: 
var interval = window.setInterval("slideout("+el+")",10);

kunnen proberen.

Als je element dan ver genoeg is verschoven, doe je:

PHP: 
clearInterval(interval);
 
Volgens mij is dat geen verschil, maar ik zal eens proberen. Nadeel dat dit met zich meebrengt is dat de interval in een array moet staan, omdat er meerdere links zijn.

Alvast bedankt
 
setTimeout voert de actie maar één keer uit, setInterval voert de actie elke * ms uit. Is dus wel degelijk een groot verschil.
 
Uiteraard, anders bestond de functie niet. Wat ik natuurlijk bedoelde is dat het qua probleem geen verschil maakt.

EDIT: geprobeerd maar de variable word niet meegestuurd.
 
Laatst bewerkt:
Dat komt omdat je nu probeert een element als string door te geven. Je kunt beter setTimeout op de andere manier te gebruiken.

setTimeout(functie, interval, arg1, arg2, arg3 ...);

Dus zoiets:
Code: 
function showMsg(msg)
{
  alert(msg);
}
window.setTimeout(msg, 10, "Hallo wereld!");

Verder was je de +"px" vergeten bij el.style.left = el.slide [+"px"];


Hoe dan ook, dit lijkt te werken:
HTML: 
<html>

<head>
<title>Slide test</title>

<script type="text/javascript">

function slidein(el,start)
{
  if(start == 1)
  {
    el.direction	 = 1;
  }

  if(el.slide < 10 && el.direction == 1)
  {
    el.slide		+= 2;    
    el.style.left	 = el.slide + "px";
    window.setTimeout(slidein,10, el, 0);
  }
}

function slideout(el,start)
{
  if(start == 1)
  {
    el.direction	 = 2;
  }
  if(el.slide > 0 && el.direction == 2)
  {
    el.slide		-= 2;    
    el.style.left	 = el.slide + "px";
    window.setTimeout(slideout,10, el, 0);
  }
}

function makeslide()
{
  var a			 = document.getElementsByTagName("a");
  for(var i = 0; i < a.length; i++)
  {
    if(a[i].className == "slide")
    {
      slideinit(a[i]);            
    }    
  }
}

function slideinit(obj)
{
  obj.slide		 = 0;
  obj.direction		 = 0;
  obj.style.position	 = "relative";
  obj.onmouseover = function()
  {
    slidein(obj,1);
  }
  obj.onmouseout = function()
  {
    slideout(obj,1);
  }
}

</script>  

</head>

<body>



<a href="aap" class="slide">Jow!</a>

<script type="text/javascript">
makeslide();
</script>

</body>
</html>
 
Hmm, ik begrijp het. In ieder geval werkt dit inderdaad perfect, en ik had ook even de 'px' erbij gezet, ook al snappen de meeste browsers wel dat je px bedoeld.

Bedankt! :)
 
Ja dat is waar, de meeste browser snappen het. Maarja, officieel mag het niet meer, behalve in quirks mode. Het zou problemen kunnen geven in de toekomst dus ik dacht, ik zeg het maar :rolleyes:

Blij dat ik kon helpen iig :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan