www.webdeveloper.com
Results 1 to 4 of 4

Thread: Changing CSS by function

Hybrid View

  1. #1
    Join Date
    Dec 2011
    Posts
    6

    Changing CSS by function

    I'm trying to change the CSS of a div that looks like a line so that the line appears to move down the screen. I'm getting no response as yet, just the div and button on screen. This script is in the head:

    Code:
    <script type="text/javascript">	
    function moves() {
    	if (tops < 500) {
    	var tops = tops + 1;
    	document.getElementById('line1').style.top = tops;
    	setTimeout(moves,20);
    	}
    }
    
    function move() {
    	var tops = 4;
    	moves();
    	}	
    </script>
    and this is my code in the body:

    Code:
    <input type="button" onclick="move()" value="Line do">
    <div id="line1" class="line horizontal" style="top: 4px; width: 100%; height: 1px;"></div>

    Please help!

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Code:
    <script type="text/javascript">
    
    	var tops;
    	function moves()
    	{
    		if (tops < 500) {
    			tops++;
    			document.getElementById('line1').style.top = tops + 'px';
    			setTimeout(moves, 20);
    		}
    	}
    
    	function move()
    	{
    		tops = 0;
    		moves();
    	}
    
    </script>
    Code:
    <input type="button" onclick="move()" value="Line do" />
    <div id="line1" class="line horizontal" style="top: 4px; width: 100&#37;; height: 1px; border-top: 1px solid black; position: relative;"></div>

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    The line has to be in absolute or relative position (this last case exempt to calculate the initial position but works only in a positioned container) and the top (and left) positions are to indicate with the units px.
    Code:
    <style type="text/css">
    body {}
    #pge {position:relative;display:block;width:600px;}
    .hrzLne {position: relative;margin:0 auto;width:100&#37;;top:4px;left:0px;height:1px;border-top:1px solid black;}
    </style>
    <script type="text/javascript">
    var tops;
    function moves(){
    	if (tops < 500){tops++;
    		document.getElementById('line1').style.top = tops + 'px';
    		setTimeout(moves, 20);}
    }
    function move(){tops = 0;
    	moves();
    }
    </script>
    </head>
    <body>
    	<div id="pge">
    		<input type="button" onclick="move()" value="Line do">
    		<div id="line1" class="hrzLne"></div>
    	</div>
    </body>
    </html>
    Last edited by 007Julien; 12-17-2011 at 08:02 PM.

  4. #4
    Join Date
    Dec 2011
    Posts
    6

    Working

    Thanks for your advice. Very helpful.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles