[RESOLVED] continuously change left margin on mouseover

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] continuously change left margin on mouseover

gecko91

Hi, I would like to write a script that continuously changes the left margin of a div while the user hovers over another div. onmouseover would start changing the margin and onmouseout would stop it. The margin should change by subtracting 10px to the current margin so that it would continuously decrease. I'm sure it's something simple that I'm missing. The value for the left margin is in document.getElementById('div').style.marginLeft.

Thanks,

gecko

justinbarneskin

Its probly because you need to declare margin-left inline.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>Fr6-10pm17</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
div {width:100px;border:1px solid blue;text-align:center}

</STYLE>
<SCRIPT type="text/javascript">
var marging;
function marg(){ var m=parseInt(document.getElementById('div').style.marginLeft); 
 if(m>0){m-=10; document.getElementById('div').style.marginLeft=m+'px'
  marging=setTimeout("marg()",200)}
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
<div id="div" style="margin-left:100px" >margin</div>
<div id="adiv" onmouseover="marg()" onmouseout="clearTimeout(marging)">mouseover</div>
</BODY></HTML>

gecko91

Thanks, worked perfectly! I was missing the clearTimeout() part.

gecko

gecko91

Thought I would post the final results of this question. I used it to implement a scrolling div of thumbs on my photoblog. You can see it here. Two functions for the left and right buttons:

var margingLeft;
var margingRight;
function margLeft() {
	var m = parseInt(document.getElementById('thumbs').style.marginLeft);
	if (m < 5) { 
		m+=10;		document.getElementById('thumbs').style.marginLeft=m+'px';
		margingLeft = setTimeout("margLeft()",50);
	}
}
function margRight() {
	var m = parseInt(document.getElementById('thumbs').style.marginLeft); 
	if (m > -1200) {
		m-=10;
		document.getElementById('thumbs').style.marginLeft=m+'px';
		margingRight = setTimeout("margRight()",50);
	}
}

There might be a way to further optimize this code, but it's beyond be. Anyway, hope it helps someone.

gecko

justinbarneskin

one function with argument x or not
one var to clearTimeout

var marging;
var step=10;
function marg(x) {
	var m = parseInt(document.getElementById('thumbs').style.marginLeft);

if(x){	if (m < 5) { 		m+=step;	marging = setTimeout("marg('x')",50);	}

else{	if (m > -1200) {	m-=step;	marging = setTimeout("marg()",50);	}

document.getElementById('thumbs').style.marginLeft=m+'px';
}