www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] continuously change left margin on mouseover

  1. #1
    Join Date
    Nov 2009
    Posts
    28

    resolved [RESOLVED] continuously change left margin on mouseover

    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
    Last edited by gecko91; 11-06-2009 at 02:17 PM.

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    Its probly because you need to declare margin-left inline.
    HTML Code:
    <!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>

  3. #3
    Join Date
    Nov 2009
    Posts
    28
    Thanks, worked perfectly! I was missing the clearTimeout() part.

    gecko

  4. #4
    Join Date
    Nov 2009
    Posts
    28

    giving back :)

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

  5. #5
    Join Date
    Oct 2006
    Posts
    939
    one function with argument x or not
    one var to clearTimeout

    HTML Code:
    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';
    }

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