Menu
I am using JavaScript to make a pop layer appear when the mouse mows over a button, img, ect. So the only problem I’m having is that the pop up box is to big when one of my buttons is on the right side of the page and if you know what I mean when I say this, the box becomes unable to see cause it’s to wide and goes out side of the browsers screen. So what I need it to do is flip over when this happends, or should I be more specific, the pop up placement should be popping up where to mouse is only minus it’s width.
This is the JS:
[code=php]// ######## TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = (navigator.appName.indexOf(“Netscape”) !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
I’m hoping that this is a simple topic to solve for every bodys sake, like a function or something. But I don’t think this is going to be to hard so.
All I need to do is have, in JavaScript, an if statement saying “if popup box is outside of boundry then a variable = popup box’s width else it equals 0”.
Here’s my full JavaScript code:
[code=php]<HEAD>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<SCRIPT LANGUAGE=”JavaScript”>
// ############## SIMPLE BROWSER SNIFFER
if (document.layers) {navigator.family = “nn4”}
if (document.all) {navigator.family = “ie4”}
if (window.navigator.userAgent.toLowerCase().match(“gecko”)) {navigator.family = “gecko”}
// ######### popup text
descarray = new Array(
“<? echo $array_block; ?>”
);
overdiv=”0″;
// ######### CREATES POP UP BOXES
function popLayer(a){
if(!descarray[a]){descarray[a]=”<font color=red>This popup (#”+a+”) isn’t setup correctly – needs description</font>”;}
if (navigator.family == “gecko”) {pad=”0″; bord=”1 bordercolor=black”;}
else {pad=”1″; bord=”0″;}
desc = “<table cellspacing=0 cellpadding=”+pad+” border=”+bord+” bgcolor=000000><tr><td>n”
+”<table cellspacing=0 cellpadding=0 border=0 width=100%><tr><td bgcolor=ffffff><center><font size=-1>”
+descarray[a]
+”n</td></tr></table>n”
+”</td></tr></table>”;
if(navigator.family ==”nn4″) {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+15;
document.object1.top=y-5;
}
else if(navigator.family ==”ie4″){
object1.innerHTML=desc;
object1.style.pixelLeft=x+15;
object1.style.pixelTop=y-5;
}
else if(navigator.family ==”gecko”){
document.getElementById(“object1”).innerHTML=desc;
document.getElementById(“object1”).style.left=x+15;
document.getElementById(“object1”).style.top=y-5;
}
}
function hideLayer(){
if (overdiv == “0”) {
if(navigator.family ==”nn4″) {eval(document.object1.top=”-500″);}
else if(navigator.family ==”ie4″){object1.innerHTML=””;}
else if(navigator.family ==”gecko”) {document.getElementById(“object1″).style.top=”-500″;}
}
}
// ######## TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = (navigator.appName.indexOf(“Netscape”) !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
// End –>
</script>
</HEAD>
I’ll just minus the x with the variable that if the popup is out side of the veiw of the internet browser it equals the popup width. I’ll give an example of what I’m talking about:
PHP:
if (document.popup is outside of boundry) {
var popupWidth = ‘document.popup.width’;
} else {
var popupWidth = ‘0’;
}
I don’t think that this would be to hard as you can see I need a variable to have the value of the popup width so that I can just put
– popupWidth
at the end of
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
So this is one of my idea’s but if theres another, better way then I’m open to suggestions.
Thanks for reading and all help is appreciated.