JS onmouseover form popup

[DevonL]

So I'm creating a calendar script in PHP and I want people to be able to mouse over the cells and and have a div/popup window come up that lets them enter some information to sign up for something on the date. What I have thus far is this, but it's not really quite right:

        if ($the_day != " "); 
            {
            echo "<a href= '#' id='hoverover' style='cursor:pointer;' onMouseOver='ShowPopup(this);' onMouseOut='HidePopup();'>";
            echo "$the_day"; 
            echo '</a>';
            echo "\n";
        }$the_day++; 

Then for the JavaScript:

<script type='text/javascript'>
    function ShowPopup(hoveritem)
    {
        hp = document.getElementById('hoverpopup');
        
        // Set popup to visible
        hp.style.top = hoveritem.offsetTop + 18;
        hp.style.left = hoveritem.offsetLeft + 20;

        hp.style.visibility = 'Visible';
    }

    function HidePopup()
    {
        hp = document.getElementById('hoverpopup');
        hp.style.visibility = 'Hidden';    
    }
</script> 

And the DIV:

<div id='hoverpopup' style='visibility:hidden; position:absolute; top:0; left:0;'>
<table bgcolor='#0000FF'>
  <tr><td><font color='#FFFFFF'>This is my popup</font></td></tr>
  <tr><td bgcolor='#8888FF'>Hello I am a popup table</td></tr>
</table>
</div> 

So yeah ... that's what I have and I'm unsure how to get it to what I need... Any help is certainly appreciated.

[Eldarrion]

Seems to work fine when tested locally... even though if you're generating links via PHP and don't have some sort of dynamic counter for the id... you'd have a whole lot of links with the same id... in your case 'hoverover'. In addition, the item will appear at top left, unless you assign the style.top and style.left like so:

var y = hoveritem.offsetTop + 18;
var x = hoveritem.offsetLeft + 20;
hp.style.top = y + 'px';
hp.style.left = x + 'px';

Another thing to consider is.... when someone clicks on the div in question (supposedly to start putting information there) they have effectively moused out of the link that showed the div in the first place... thus the div ends up vanishing. Hope this helps.

[DevonL]

Seems to work fine when tested locally... even though if you're generating links via PHP and don't have some sort of dynamic counter for the id... you'd have a whole lot of links with the same id... in your case 'hoverover'. In addition, the item will appear at top left, unless you assign the style.top and style.left like so:

var y = hoveritem.offsetTop + 18;
var x = hoveritem.offsetLeft + 20;
hp.style.top = y + 'px';
hp.style.left = x + 'px';

Another thing to consider is.... when someone clicks on the div in question (supposedly to start putting information there) they have effectively moused out of the link that showed the div in the first place... thus the div ends up vanishing. Hope this helps.

Yeah that was one of the issues that I was having.

Once implementing the form I plan on having a unique ID or just having it grab what month was moused over. I haven't gotten that far with it yet, I want to take care of the initial issues first. I may just end up having to abandon doing it this way though. Thanks for the info and help though.

[Eldarrion]

Well, I guess you can swap the mouseover/mouseout to onclick and use the following function:

	function togglepopup(hoveritem)
	{
		hp = document.getElementById('hoverpopup');
		var y = hoveritem.offsetTop + 18 + 'px';
		var x = hoveritem.offsetLeft + 20 + 'px';
		var yy = hp.style.top;
		var xx = hp.style.left;
		if (x != xx || y != yy) {
			hp.style.top = y;
			hp.style.left = x;
			if (hp.style.visibility == 'hidden') {
				hp.style.visibility = 'visible';
			}
		}
		else {
			hp.style.visibility = 'hidden';
			hp.style.top = 0 + 'px';
			hp.style.left = 0 + 'px';
		}
		return false;
	}

Might not work all that great in all browsers (tested in FF), but it should be easily modifiable to achieve the same result in IE. See how that works for you.