Javascript Dynamic Pop-up Question

[DisgruntledOrangatang]

Hey guys, I am writing some javascript code for a pop-up.

Basically you hover over the div and a pop-up tooltip appears right next to it, however what I want to do is make so that depending on if the hover-over icon is too far to the top of the page, it will display it underneath the icon instead of over-top or visa versa.

Here is what I got so far:
These functions will show and hide the pop-up:

function ShowPopup(hoveritem)
{

hp = document.getElementById("hoverpopup");
alert(hoveritem)

hp.style.top = hoveritem.offsetTop + 15;
hp.style.left = hoveritem.offsetLeft + 20;

hp.style.display = "block";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.display = "none";
}

These are the elements you hover over and what pops up

Hover over me!

rogidXImageTransform.Microsoft.AlphaImag eLoader(enabled=true, sizingMethod=scale, src='scroll_transparent.png');">

Hello

And here is the code I have to determine the position of the mouse:

function showHover(e)
{
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
}


Now according to what I read online I need to determine the browser size and then make some kind of comparison to see if the element is near the top or the bottom of the page. And depending on which it is show the pop-up but with different offsetTop and offsetLeft values. So does anyone have any experience in doing this? Help would be much appreciated.

Edit: err my html isnt dispalying properly, whats the tag to get html code to dispaly properly?

Another semi-related question and so simple yet I am having trouble finding the answer online. How would I go about setting an area inside quotes as a variable name. I am trying to pass a string into a function and then using the getElementById("parameter") where the string is the parameter. I tried ("'"+parameter+"'") to no avail.

[Vorph]

Originally Posted by DisgruntledOrangatang

Hey guys, I am writing some javascript code for a pop-up.

Basically you hover over the div and a pop-up tooltip appears right next to it, however what I want to do is make so that depending on if the hover-over icon is too far to the top of the page, it will display it underneath the icon instead of over-top or visa versa.

Here is what I got so far:
These functions will show and hide the pop-up:

		function ShowPopup(hoveritem)
		{

		hp = document.getElementById("hoverpopup");
		alert(hoveritem)

		hp.style.top = hoveritem.offsetTop + 15;
		hp.style.left = hoveritem.offsetLeft + 20;

		hp.style.display = "block";
		}

		function HidePopup()
		{
		hp = document.getElementById("hoverpopup");
		hp.style.display = "none";
		}

These are the elements you hover over and what pops up

 <a id=\"hoverover\" style=\"cursor: help; background: url(div_bg.gif) no-repeat; float: left; width: 65px; height: 20px;\" onMouseOver=\"ShowPopup('hoverover');\" onMouseOut=\"HidePopup();\">Hover over me!</a> <div id=\"hoverpopup\" style=\"display:none; position:absolute; background: url(scroll_transparent.png); width: 210px; height: 269px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='scroll_transparent.png');\"> <div style=\"font-weight: bold; color: green; margin: 40px 40px 0px 30px;\">Hello</div> </div>

And here is the code I have to determine the position of the mouse:

function showHover(e) 
{
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	
	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	
	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
}

Now according to what I read online I need to determine the browser size and then make some kind of comparison to see if the element is near the top or the bottom of the page. And depending on which it is show the pop-up but with different offsetTop and offsetLeft values. So does anyone have any experience in doing this? Help would be much appreciated.

Well, you've pretty much got it, you just need to write the code to reduce the offset to zero as you approach the top/left and increase to the full height/width at the bottom/right.

Edit: err my html isnt dispalying properly, whats the tag to get html code to dispaly properly?

Use the [ html ] vBcode tag.

Edit: er, actually I changed it in the text I quoted and it looks like shit. Not sure why it's escaping the quotes and using awful colors. Oh well.

Another semi-related question and so simple yet I am having trouble finding the answer online. How would I go about setting an area inside quotes as a variable name. I am trying to pass a string into a function and then using the getElementById("parameter") where the string is the parameter. I tried ("'"+parameter+"'") to no avail.

Um, maybe I'm misreading what you want but it sounds like you're overcomplicating things and you just need getElementById(parameter) ... ?

[DisgruntledOrangatang]

Hey vorph, appreciate it.

Gotta admit though, I am a total JS newb. The scripts I currently have was from tutorials I got from searching google. So I am not sure how to do what you mentioned. I am also not even sure I fully comprehend what you said -_-. Why do I need to reduce the offset to zero? Couldn't I just do a comparison to see if the mouse position is on the area of the top half or bottom half by grabbing mouse pos in relation to window size? Idk, like I said I am a newb at JS.

[Vorph]

I'd suggest looking at DHTML JavaScript Tooltips either for ideas or just using it directly.

And yeah, ignore what I said about reducing to zero, I misread how you said you wanted to handle it when the tooltip was too close to an edge.