PDA

View Full Version : how to use offsetWidth



kavit
01-03-2010, 07:53 PM
i have doen flag animation but it has fix width.. i want it to be offsetWidth so no mater wht browser is it bounce back from end.. and my stop button is not working.. it works in 1st but as i use start button twice stop button dont work.. plz help me :confused:

<script language="JavaScript" type="text/javascript">
<!--
function flagMove() {
var obj = document.getElementById('float');
if (!obj) return false;
var leftPos = parseInt(obj.style.left);
leftPos += direction;
if (leftPos < 0) {
direction = -direction;
leftPos = 0;
} else if (leftPos > 750) {
direction = -direction;
leftPos = 750;

}
obj.style.left = leftPos + 'px';
}
function Move() {
direction = 1;//can change the speed
delay = 10; // can make it slow
flagMoveInterval = window.setInterval('flagMove();',delay);
}

//-->

</script>
</head>
<body onload="Move();">
<h1>The Flag of <a href="http://en.wikipedia.org/wiki/Honduras">HONDURAS</a> </h1>

<div id="float" style="left:400px;">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>

<div id = "button"><input type="button" value="Start!" onclick="Move()"/>
<input type="button" value="Stop!" onclick="window.clearInterval(flagMoveInterval)"/></div>

vwphillips
01-04-2010, 12:39 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function flagMove() {
var obj = document.getElementById('float');
if (!obj) return false;
var leftPos = parseInt(obj.style.left);
leftPos += direction;
if (leftPos < 0) {
direction = -direction;
leftPos = 0;
}
else if (leftPos > zxcWWHS()[0]) {
direction = -direction;
// leftPos = 750;

}
obj.style.left = leftPos + 'px';
}

function ReSize() {
var obj = document.getElementById('float');
if (!obj) return false;
obj.style.left=Math.min(parseInt(obj.style.left),zxcWWHS()[0])+'px';
}

function Move() {
direction = 1;//can change the speed
delay = 10; // can make it slow
flagMoveInterval = window.setInterval('flagMove();',delay);
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}


//-->

</script>
</head>
<body onload="Move();" onresize="ReSize();">
<h1>The Flag of <a href="http://en.wikipedia.org/wiki/Honduras">HONDURAS</a> </h1>

<div id="float" style="position:absolute;left:400px;">
<div class="c1">22</div>
<div class="c2">33</div>
<div class="c3"></div>
<div class="c4"></div>
</div>

<div id = "button"><input type="button" value="Start!" onclick="Move()"/>
<input type="button" value="Stop!" onclick="window.clearInterval(flagMoveInterval)"/></div>
</body>

</html>

kavit
01-04-2010, 02:50 PM
i try to use ur code but when i add my css its not working i mean it going off width..