...

View Full Version : Trying to complete a test site with some JS



SeattleMicah
12-24-2011, 01:47 AM
Hello,

I am trying to complete a test site but adding some javascript.

In short I am trying to make the main content div slide from behind the nav via some JS. http://www.squareflash.com/test/index.html


First I am just trying to get the animate onClick to work. I found this practice site -- Using this I am trying to get some guidance on how to add a automatic stop function to the moveRight variable.
http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=javascript_45

The site is in html5, is there anything special I need to know for that?

ty

vwphillips
12-24-2011, 01:58 PM
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head> <html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--

function moveRight(id,stop){
var obj=document.getElementById(id),lft= parseInt(obj.style.left) + 10;
if (lft<stop){
obj.style.left =lft + 'px';
moveRight.to = setTimeout(function(){ moveRight(id,stop); },20); // call moveRight in 20msec
}
else {
obj.style.left =stop + 'px';
}
}

function stop(id){
clearTimeout(moveRight.to);
document.getElementById(id).style.left = '0px';
}

//-->
</script>

</head>
<body>
<form>
<img id="myImage" src="http://www.tutorialspoint.com/images/html.gif" style="position:relative;left:0px;" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight('myImage',500);" />
<input type="button" value="Stop" onclick="stop('myImage');" />
</form>
</body>
</html>





or



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--

function moveRight(id,stop){
var obj=document.getElementById(id),lft= parseInt(obj.style.left);
lft += 10*(stop>lft?1:-1);
clearTimeout(moveRight.to);
if ((stop>lft&&lft<stop)||(stop<lft&&lft>stop)){
obj.style.left =lft + 'px';
moveRight.to = setTimeout(function(){ moveRight(id,stop); },20); // call moveRight in 20msec
}
else {
obj.style.left =stop + 'px';
}
}

function stop(id){
clearTimeout(moveRight.to);
document.getElementById(id).style.left = '0px';
}

//-->
</script>

</head>
<body>
<form>
<img id="myImage" src="http://www.tutorialspoint.com/images/html.gif" style="position:relative;left:0px;" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight('myImage',500);" />
<input type="button" value="Back" onclick="moveRight('myImage',0);" />
<input type="button" value="Stop" onclick="stop('myImage');" />
</form>
</body>
</html>

SeattleMicah
12-24-2011, 08:34 PM
Thank you sir, i will try and decipher that and get it to work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum