Web Analytics Made Easy -
StatCounter JS onmouseover form popup - CodingForum

Announcement

Collapse
No announcement yet.

JS onmouseover form popup

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • JS onmouseover form popup

    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:

    PHP Code:
            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:
    PHP Code:
    <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:
    PHP Code:
    <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.

  • #2
    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:

    Code:
    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.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

    Comment


    • #3
      Originally posted by Eldarrion View Post
      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:

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

      Comment


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

        Code:
        	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.
        The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

        How to ask smart questions?

        Comment

        Working...
        X