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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I alter a variable on mouseover in multiple browsers?

    Hi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to.

    The objective is this:
    I want to have a div appear below my mouse when mousing over different parts of my website.

    I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes.

    I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div.

    Here is the code I'm working on, maybe I'm just missing something obvious?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    var divvx=22, divvy=22;
    function doMouseMove(e){
    var posx=0;var posy=0;
    var e=(!e)?window.event:e;//IE:Moz
    if (e.pageX){//Moz
    posx=e.pageX+window.pageXOffset;
    posy=e.pageY+window.pageYOffset;
    }
    else if(e.clientX){//IE
    if(document.documentElement){//IE 6+ strict mode
    posx=e.clientX+document.documentElement.scrollLeft;
    posy=e.clientY+document.documentElement.scrollTop;
    }
    else if(document.body){//Other IE
    posx=e.clientX+document.body.scrollLeft;
    posy=e.clientY+document.body.scrollTop;
    }
    }
    else{return false}//old browsers
    var mydiv=document.getElementById('curicon');
    mydiv.style.left=(posx-divvx)+'px';
    mydiv.style.top=(posy-22)+'px';
    }
    document.onmousemove=doMouseMove
    function MM_callJS(jsStr) { //v2.0
      return eval(jsStr)
    }
    </script>
    <style type="text/css">
    <!--
    #curicon {
    	background-image: url(resources/cursors/Inactive_Halo.png);
    	height: 44px;
    	width: 44px;
    	position: absolute;
    	top: -80px;
    	left: -80px;
    }
    #boxtest {
    	position: absolute;
    	height: 100px;
    	width: 400px;
    	background-color: #0F0;
    	left: 149px;
    	top: 213px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div>
    <div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div>
    </body>
    </html>
    Thanks, everyone. This has been driving me nuts for an entire week.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,858
    Thanks
    22
    Thanked 157 Times in 148 Posts
    It's not clear here what you are looking for.

    The objective is this:
    I want to have a div appear below my mouse when mousing over different parts of my website.
    It appears that you have already met your objective: The code that you pasted does this adequately.

    I need it to be positioned in different places under the mouse each time the image changes.
    Can you explain this more? What images? Where are the images? What behaviors are attached to the images, if any?

    Are you mousing over multiple images, and the div that follows the mouse needs to be positioned differently relative to the mouse for different images (onmouseover of these images)?

    I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div.
    How is the "mouse-follow" behavior supposed to change exactly when one mouses over the "boxtest" div?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I forgot to mention that the provided code is just my test code. I'm using it to get the principles down, so I don't accidentally mess up my actual page.

    And I must have included too much information.

    As it stands, I have the div box following the cursor. What I need to happen is for the div box to change position relative to the cursor when a user mouses over the test box.

    That is, right now, the div box is 44px x 44px and is centered to the cursor (22x, 22y). Now, what would I need to do for the div box to move to, say, 35x, 52y relative to the mouse position on mouseover, then back to 22x, 22y on mouse out?

    And how can I get it working cross-browser?

    I hope that cleared it up, thanks for your time!

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,858
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Well, theoretically, the following code should work:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Untitled Document</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<meta http-equiv="Content-Style-Type" content="text/css">
    	<meta http-equiv="Content-Script-Type" content="text/javascript">
    	<script type="text/javascript">
    		function findCursorPos(e)
    		{
    			var posx = null;
    			var posy = null;
    			if (e.pageX)
    			{
    				//Moz
    				posx = e.pageX + window.pageXOffset;
    				posy = e.pageY + window.pageYOffset;
    			}
    			else if (e.clientX)
    			{
    				//IE
    				if (document.documentElement)
    				{
    					//IE 6+ strict mode
    					posx = e.clientX + document.documentElement.scrollLeft;
    					posy = e.clientY + document.documentElement.scrollTop;
    				}
    				else if (document.body)
    				{
    					//Other IE
    					posx = e.clientX + document.body.scrollLeft;
    					posy = e.clientY + document.body.scrollTop;
    				}
    			}
    			return [posx, posy];
    		}
    
    		function getTargetElem(e)
    		{
    			var targElem;
    			if (e.target)
    			{
    				targElem = e.target;
    			}
    			else if (e.srcElement)
    			{
    				targElem = e.srcElement;
    			}
    			targElem = (targElem.nodeType == 3) ? targElem.parentNode : targElem;	// defeat Safari bug
    			return targElem;
    		}
    
    		function doMouseMove(event)
    		{
    			var e = (!event) ? window.event : event;
    			var cursorPos = findCursorPos(e);
    
    			targElemOnMousemove = getTargetElem(e);
    			//alert(targElemOnMouseover.id);
    			var divvx = (targElemOnMousemove.id == 'boxtest') ? 35 : 22;
    			var divvy = (targElemOnMousemove.id == 'boxtest') ? 52 : 22;
    
    			var mydiv = document.getElementById('curicon');
    			if (cursorPos[0] != null)
    			{
    				mydiv.style.left = (cursorPos[0] - divvx) + 'px';
    				mydiv.style.top = (cursorPos[1] - divvy) + 'px';
    			}
    		}
    
    		document.getElementsByTagName('html')[0].onmousemove = doMouseMove;
    	</script>
    	<style type="text/css">
    		#curicon {
    			background-color: red;
    			height: 44px;
    			width: 44px;
    			position: absolute;
    			z-index:200;
    			top: -80px;
    			left: -80px;
    		}
    		#boxtest {
    			position: absolute;
    			z-index:100;
    			height: 100px;
    			width: 400px;
    			background-color: #0F0;
    			left: 149px;
    			top: 213px;
    		}
    	</style>
    </head>
    <body>
    	<div id="curicon" name="curicon"></div>
    	<div id="boxtest"></div>
    </body>
    </html>
    ...and it kind of does....but the curicon div doesn't always adjust when moving over boxtest, or it does so a little later than expected.

    A little Googling tells me that the onmousemove event, while functional, is not one of the best DOM events to manipulate because it can be slow to respond. (I personally don't find myself handling onmousemove much -- or really at all -- in my own projects.)

    Whether or not that is the case here, I'm not completely sure. I don't have any more time to play with this right now, so in the meantime, perhaps one of the javascript experts here can see something that I can't.
    Last edited by chump2877; 12-22-2011 at 07:36 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,858
    Thanks
    22
    Thanked 157 Times in 148 Posts
    I looked at this again and realized what I was doing wrong. this should work for you:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Untitled Document</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<meta http-equiv="Content-Style-Type" content="text/css">
    	<meta http-equiv="Content-Script-Type" content="text/javascript">
    	<script type="text/javascript">
    		function findCursorPos(e)
    		{
    			var posx = null;
    			var posy = null;
    			if (e.pageX)
    			{
    				//Moz
    				posx = e.pageX + window.pageXOffset;
    				posy = e.pageY + window.pageYOffset;
    			}
    			else if (e.clientX)
    			{
    				//IE
    				if (document.documentElement)
    				{
    					//IE 6+ strict mode
    					posx = e.clientX + document.documentElement.scrollLeft;
    					posy = e.clientY + document.documentElement.scrollTop;
    				}
    				else if (document.body)
    				{
    					//Other IE
    					posx = e.clientX + document.body.scrollLeft;
    					posy = e.clientY + document.body.scrollTop;
    				}
    			}
    			return [posx, posy];
    		}
    
    		function doMouseMove(event)
    		{
    			var e = (!event) ? window.event : event;
    			var cursorPos = findCursorPos(e);
    			if (cursorPos[0] != null)
    			{
    				var boxtestDiv = document.getElementById('boxtest');
    				var isHoveringBoxtest = cursorPos[0] >= parseInt(boxtestDiv.style.left) && cursorPos[0] <= parseInt(boxtestDiv.style.left) + parseInt(boxtestDiv.style.width) && cursorPos[1] >= parseInt(boxtestDiv.style.top) && cursorPos[1] <= parseInt(boxtestDiv.style.top) + parseInt(boxtestDiv.style.height);
    				var divvx = (isHoveringBoxtest) ? 35 : 22;
    				var divvy = (isHoveringBoxtest) ? 52 : 22;
    				var mydiv = document.getElementById('curicon');
    				mydiv.style.left = (cursorPos[0] - divvx) + 'px';
    				mydiv.style.top = (cursorPos[1] - divvy) + 'px';
    			}
    		}
    
    		document.getElementsByTagName('html')[0].onmousemove = doMouseMove;
    	</script>
    	<style type="text/css">
    		#curicon {
    			background-color: red;
    			height: 44px;
    			width: 44px;
    			position: absolute;
    			z-index:200;
    			top: -80px;
    			left: -80px;
    		}
    		#boxtest {
    			position: absolute;
    			z-index:100;
    			background-color: #0F0;
    		}
    	</style>
    </head>
    <body>
    	<div id="curicon"></div>
    	<div id="boxtest" style="height:100px;width:400px;left:149px;top:213px"></div>
    </body>
    </html>
    ...So now, by cross-referencing the width, height, and coordinates of boxtest with the current coordinates of the mouse pointer, we can determine when the mouse is hovering over boxtest and shift the curicon div accordingly.
    Last edited by chump2877; 12-23-2011 at 03:53 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, wow! I'm looking over it now, and it looks like it will work perfectly!
    Sorry for the late response, holiday crap...

    But thank you so, so much! You're a lifesaver!!!


  •  

    Posting Permissions

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