PDA

View Full Version : Please help with my Javascript css rollover script



Dannyj6
Nov 27th, 2009, 03:06 PM
Hi, I have a a-z brand menu on my site. I want the user to be able to select a letter and a list of brands appear.

The problem I have is that I want the layer to appear at the position of the mouse (from the top left). I have this working fine but then when you rollover a link (brand) within the layer div it reactivates the call command and re positions the layer to the mouse again.

Please Please help. My code is as follows;

POSITION CODE;

var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+5) + "px";
d.style.top = (cY+5) + "px";
}

TOGGLE HIDE SHOW LAYER;

function toggle_visibility(id) {
var e = document.getElementById(id);
AssignPosition(e);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

EXAMPLE OF A-Z MENU;

<a href="#" onclick="toggle_visibility('uniquename0');">A</a>

EXAMPLE OF LAYER TO DISPLAY WHICH CONTAINS THE OFFENDING LINKS;

<div id="uniquename0" style="border-style: solid; padding: 5px; display: none; position: absolute; background-color: white; left: 482px; top: 428px;" onmouseout="toggle_visibility('uniquename0');">

<a href="Manufacturer-view.asp?ManID=1">All American EFX <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>

<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>

</div>


Thank you
Dan

vwphillips
Nov 27th, 2009, 03:22 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function toggle_visibility(o,id) {
var obj = document.getElementById(id);
obj.style.display=(obj.style.display == 'block')?'none':'block';
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}


/*]]>*/
</script></head>

<body>
<a href="#" onclick="toggle_visibility(this,'uniquename0');">A</a>
<div id="uniquename0" style="border-style: solid; padding: 5px; display: none; position: absolute; background-color: white; left: 482px; top: 428px;" onmouseout="toggle_visibility('uniquename0');">

<a href="Manufacturer-view.asp?ManID=1">All American EFX <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>

<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>

</div></body>

</html>

Dannyj6
Nov 27th, 2009, 04:12 PM
Thank you this works fantastic although I also call the toggle_visibility function on a mouseout command on the div itself which does not work. For example;


<div id="uniquename0" onmouseout="toggle_visibility('uniquename0');">
<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
</div>

vwphillips
Nov 27th, 2009, 07:15 PM
there is something wrong withyour HTML but I cant spot it at the moment


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function toggle_visibility(o,id) {
var obj = document.getElementById(id);
var e=window.event||arguments.callee.caller.arguments[0];
if (zxcCkEventObj(e,obj)||e.type!= 'mouseout'){
obj.style.display=(e.type == 'mouseout')?'none':'block';
}
if (o){
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';
}
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}

function zxcCkEventObj(e,p){
if (!e) var e=window.event;
e.cancelBubble=true;
if (e.stopPropagation) e.stopPropagation();
if (e.target) eobj=e.target;
else if (e.srcElement) eobj=e.srcElement;
if (eobj.nodeType==3) eobj=eobj.parentNode;
var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
if (!eobj||eobj==p) return false;
while (eobj.parentNode){
if (eobj==p) return false;
eobj=eobj.parentNode;
}
return true;
}


/*]]>*/
</script></head>

<body>
<a href="#" onclick="toggle_visibility(this,'uniquename0');">A</a>
<div id="uniquename0" style="border-style: solid; padding: 5px; display: none; position: absolute; background-color: white; left: 482px; top: 428px;" onmouseout="toggle_visibility(null,'uniquename0');">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
<!--
<a href="Manufacturer-view.asp?ManID=1">All American EFX <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
-->

</div>

</body>

</html>