[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) ... ?