JS pop up...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

JS pop up...

Post by JellyFish »

Hello, I don't know if this question belongs in the clint side or php code topic so I just choosed one.

I am using JavaScript to make a pop box 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. So what I need it to do is flip over when this happends or should I be more specific the pop up placement should should be popping up when the mouse is to far from the right it should pop up where to mouse is only plus it's width.

This is the JS:
// ######## 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 don't know if that should be in quote tags or php but I just did quote.

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.

Thanks for reading and all help is appreciated. :)
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post by darryladie »

Well I am not very familiar with all this but here some pseudo-code I wrote you might wanna consider:

Code: Select all

onmouseOver(element)

   if mouse.left + popup.width > screen.width {

      popup.left = popup.width - screen.width

  else

      popup.left = element.left

}
Hope that helps, someone else might be able to translate that into JS and PHP.

Darryl
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Thanks for your reply man... Or ladie lol :P

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: Select all

<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:

Code: Select all

if (document.popup is outside of boundry) {
        var popupWidth = 'document.popup.width';
} else {
       var popupWidth = '0';
}
I don't know JavaScript, never read a book, never took a class never anything if you get my point. So I'm just guessing on what to do and 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 it but I hope I'll understand it.

Thanks for reading and all help is appreciated.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I tried putting:

Code: Select all

onmouseOver(element) 

   if mouse.left + popup.width > screen.width { 

      popup.left = popup.width - screen.width 

  else 

      popup.left = element.left 

}
In:

Code: Select all

// ######## TRACKS MOUSE POSITION FOR POPUP PLACEMENT 
var isNav = (navigator.appName.indexOf("Netscape") !=-1); 
function handlerMM(e){
onmouseOver(element) 

   if mouse.left + popup.width > screen.width { 

      popup.left = popup.width - screen.width 

  else 

      popup.left = element.left 

}
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;
and it didn't do what I need it to do.
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Post by darryladie »

Firstly, I am male :P and the ladie joke is a bit old now! :lol:

secondly that code I wrote was psuedo code as in that wont work but that will be the logic behind the solution, you need to find someone who know JS and/ or PHP.

Darryl "Male" Adie
Post Reply