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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mouse Position within DIV using Firefox

    Hi

    I have a control on the left side of the page which sits inside a div. The control reacts to where the mouse is positioned within the div.

    This works fine in IE but I cant get it working in Firefox. Heres what I have:

    Code:
    <div id="divcon" class="boxContentLeft" OnMouseMove="SetValues(event);">
    
    function SetValues(event)
    {
    	var ev=(!event)?window.event:event;  //Moz:IE
    	
    	if (ev.pageX) { //Mozilla or compatible
    
    		/* The absolute position of the control */
    		var MarqPos = GetAbsPosition(divcon);
    		alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);
    
    		/* Relative to this div */
    		MousePointerDivX = ev.pageX-MarqPos.x;
    		MousePointerDivY = ev.pageY-MarqPos.y;   
    		alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);
    		
    		/* Relative to the top left of the viewable area */
    		MousePointerClientX = ev.pageX;
    		MousePointerClientY = ev.pageY;
    		alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);
    
    	}
    	else if(ev.clientX) { //IE or compatible
    
    		/* Relative to this div */
    		MousePointerDivX = window.event.x;
    		MousePointerDivY = window.event.y;   
    		alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);
    
    		/* Relative to the top left of the viewable area */
    		//MousePointerClientX = window.event.clientX;
    		//MousePointerClientY = window.event.clientY;
    		//alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);
    
    		/* The absolute position of the control */
    		var MarqPos = GetAbsPosition(divcon);
    		alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);
    
    		/* The mouse position relative to top left of page */
    		//MousePointerX = mouseX(window.event);
    		//MousePointerY = mouseY(window.event);
    		//alert('MousePointerX = '+MousePointerX+'\nMousePointerY = '+MousePointerY);
    
    		/* The control relative to the top left of the parent control */
    		//var OffsetLeft = marquees.offsetLeft;
    		//var OffsetTop = marquees.offsetTop;
    		//alert('OffsetLeft = '+OffsetLeft+'\nOffsetTop = '+OffsetTop);
    
    	}
    	else { //old browsers
    		return false;
    	}
    	   
        setInterval("",20);
    }
    
    // Calculates the object's absolute position, and width and height
    function GetAbsPosition(object) {
    
    	var position = new Object;
    	position.x = 0;
    	position.y = 0;
    
    	if( object ) {
    		position.x = object.offsetLeft;
    		position.y = object.offsetTop;
    
    		if( object.offsetParent ) {
    			var parentpos = GetAbsPosition(object.offsetParent);
    			position.x += parentpos.x;
    			position.y += parentpos.y;
    		}
    	}
    
    	position.cx = object.offsetWidth;
    	position.cy = object.offsetHeight;
    
    	return position;
    }
    Using IE only I didnt need to find out the position of the DIV within the page as I could just use 'window.event.x' which would return the x coordinate within the DIV.

    I dont think you can do that with Firefox so you have to get the coordinate of the mouse and then subtract the coordinates of the DIV.

    But when Im calling GetAbsPosition(divcon) I get
    Error: divcon is not defined.

    Can somebody please tell me why I can call GetAbsPosition from IE and it works but I get an error calling the same thing in Firefox.

    Thanks

  • #2
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    In the Mozilla or compatable code, you call divicon as if it were a variable.

    Try either passing divicon as a string:

    Code:
    		var MarqPos = GetAbsPosition('divcon');
    and in GetAbsPosition(object)...

    Code:
    function GetAbsPosition(object) {
    
    	object = document.getElementById(object);
    	var position = new Object;

    or you could just pass the reference direct to getAbsPosition, thus:

    Code:
    var MarqPos = GetAbsPosition(document.getElementById('divcon'));

    let us know if this helps...
    Last edited by Mikebert4; 08-08-2008 at 12:05 PM.

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Mikebert4

    Excellent stuff, works a treat.

    Thanks

    Darren

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to put javascript in external file

    Hi

    I want to remove the javascript from the php code and put it in an .js file.

    The code is like this:

    Code:
    <div id="marquees" onmousemove="SetValues(event);">
    
    <script language="JavaScript" type="text/javascript">
    
      /*
      Vertical Pausing Slideshow - freely adapted from:
      Cross browser Marquee II- (Copyright) Dynamic Drive 
      (www.dynamicdrive.com)
      */
      etc etc
      function SetValues(event)
      {
    	var ev=(!event)?window.event:event;  //Moz:IE
         etc
         etc
      }
    
    </script>
    
    </div>
    How can i put the javascript in its own file so it doesnt show in the source code? If i do it doesnt recognise SetValues function when the mouse is over the marquees div.

    Thanks


  •  

    Posting Permissions

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