Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to use offsetWidth

    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
    Code:
    	<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>

  2. #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,584
    Thanks
    3
    Thanked 516 Times in 503 Posts
    Code:
    <!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.scrollTop];
    }
    
    
    //-->
    
    	</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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i try to use ur code but when i add my css its not working i mean it going off width..


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •