Changing CSS by function

**deepthings** · 12-17-2011, 10:25 AM

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!

**bionoid** · 12-17-2011, 10:39 AM

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>

**007Julien** · 12-17-2011, 07:58 PM

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>