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:


<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

In the Mozilla or compatable code, you call divicon as if it were a variable.

Try either passing divicon as a string:


var MarqPos = GetAbsPosition('divcon');


and in GetAbsPosition(object)...



function GetAbsPosition(object) {

object = document.getElementById(object);
var position = new Object;





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


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



let us know if this helps...

Hi Mikebert4

Excellent stuff, works a treat.

Thanks

Darren

Hi

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

The code is like this:

<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