Firefox: Event undefined

[idire]

This code works in ie, but not in FF and I cant work out why...

 

JS

<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(event)
    {
        /* get the mouse left position */
        x = event.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = event.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x;
        /* set the pop-up's top */
        Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide(event)
    {
        /* hide the pop-up */
        Popup.style.display="none";
    }
</script>

 

HTML

<a href="#" onMouseOut="Hide()" onMouseOver="Show()" 
  onMouseMove="Show()">Move the mouse over here</a><br>
  
  <div id="Popup" class="transparent">
    <div style="background-color: #003366">
      <b>Title goes here</b></div>
    <div></b>Description goes here</div>
</div>

 

CSS

  .transparent {
    filter:alpha(opacity=90);
    background-color:green;
    display:none;
    width:170;
    height:100;
    position:absolute;
    color: white;
    border: 1 green solid;
}

 

Firefox error console lists this as the problem line:

x = event.clientX + document.body.scrollLeft;

[idire]

Cant seem to edit so:

 

Its from this page: http://www.codeproject.com/KB/scripting/transparentpopup.aspx

 

I have good php and html knowledge but none of my JS ever seems to work.

 

I think the problem is in parsing the event to the JS? not sure

[rhodesa]

To access the event info, do it this way instead:

<style>
  .transparent {
    filter:alpha(opacity=90);
    background-color:green;
    display:none;
    width:170;
    height:100;
    position:absolute;
    color: white;
    border: 1 green solid;
}
</style>
<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(event)
    {
        /* get the mouse left position */
        x = event.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = event.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x;
        /* set the pop-up's top */
        Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide(event)
    {
        /* hide the pop-up */
        Popup.style.display="none";
    }
    window.onload = function(){
      var ele = document.getElementById('test');
      ele.onmouseout = Hide;
      ele.onmouseover = Show; 
      ele.onmousemove = Show;
    } 
</script>
<a href="#" id="test">Move the mouse over here</a><br>
  
<div id="Popup" class="transparent">
  <div style="background-color: #003366">
    <b>Title goes here</b></div>
  <div>
  <div>Description goes here</div>
</div>

[idire]

You added this?

 

window.onload = function(){
      var ele = document.getElementById('test');
      ele.onmouseout = Hide;
      ele.onmouseover = Show; 
      ele.onmousemove = Show;
    } 

 

Same error, event is undefined

 

also got the error: popup is undefined:

 

       

Popup.style.display="none";

[rhodesa]

oops...forgot to update that part. you can't just reference Popup, you need to use document.getElementById() to get it.

<style>
  .transparent {
    filter:alpha(opacity=90);
    background-color:green;
    display:none;
    width:170;
    height:100;
    position:absolute;
    color: white;
    border: 1 green solid;
}
</style>
<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(event)
    {
      var Popup = document.getElementById('Popup');
        /* get the mouse left position */
        x = event.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = event.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x;
        /* set the pop-up's top */
        Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide(event)
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    window.onload = function(){
      var ele = document.getElementById('test');
      ele.onmouseout = Hide;
      ele.onmouseover = Show; 
      ele.onmousemove = Show;
    } 
</script>
<a href="#" id="test">Move the mouse over here</a><br>
  
<div id="Popup" class="transparent">
  <div style="background-color: #003366">
    <b>Title goes here</b></div>
  <div>
  <div>Description goes here</div>
</div>

[idire]

Still says undefined for this line:

 

        x = event.clientX + document.body.scrollLeft;

 

 

EDIT: doesnt work on ie anymore:

 

Error: clientX is null or not an object

 

Code is from here btw

http://www.codeproject.com/KB/scripting/transparentpopup.aspx

 

 

[rhodesa]

ok...tested in FF and IE:

 

<style>
  .transparent {
    filter:alpha(opacity=90);
    background-color:green;
    display:none;
    width:170;
    height:100;
    position:absolute;
    color: white;
    border: 1 green solid;
}
</style>
<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(e)
    {
        e = e ? e : event;
        var Popup = document.getElementById('Popup');
        /* get the mouse left position */
        x = e.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = e.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x;
        /* set the pop-up's top */
        Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    window.onload = function(){
        var ele = document.getElementById('test');
        ele.onmouseout = Hide;
        ele.onmouseover = Show; 
        ele.onmousemove = Show;
    } 
</script>
<a href="#" id="test">Move the mouse over here</a><br>
  
<div id="Popup" class="transparent">
  <div style="background-color: #003366">
    <b>Title goes here</b></div>
  <div>
  <div>Description goes here</div>
</div>

[idire]

Added a </div> to the end of your code and it worked

 

Thanks for the help

 

 

 

 

EDIT: Why on firefox does the box appear on the far left, I wanted it to work like IE and appear where the mouse is, is that possible?

 

The error console comes up with:

 

error parsing value of property left/top declaration dropped

[rhodesa]

What version of firefox are you using? I'm using FF3 and it appears to the right of the mouse.

 

You shouldn't have had to add an extra </div> tag to the end. What is the most recent copy of your code?

[idire]

Without the </div> it puts my table following the code into the popup box

 

i'm using FF3 also

 

<style>
  .transparent {
    filter:alpha(opacity=90);
    background-color:#FFFACD;
    display:none;
    width:170px;
    height:100px;
    color: black;
    border: 2 green solid;
}
#popup { left:0; top:0; }

</style>
<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(e)
    {
        e = e ? e : event;
        var Popup = document.getElementById('Popup');
        /* get the mouse left position */
        x = e.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = e.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x;
        /* set the pop-up's top */
        Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    window.onload = function(){
        var ele = document.getElementById('test');
        ele.onmouseout = Hide;
        ele.onmouseover = Show; 
        ele.onmousemove = Show;
    } 
</script>
<a href="#" id="test">Move the mouse over here</a><br>
  
<div id="Popup" class="transparent">
  <div style="background-color: #003366">
    <b>Title goes here</b></div>
  <div>
  <div>Description goes here</div>
</div></div>

 

 

[rhodesa]

ah...spotted the problem, there was an EXTRA </div> tag...change the HTML block to this:

<div id="Popup" class="transparent">
  <div style="background-color: #003366">
    <b>Title goes here</b>
  <div>
  <div>Description goes here</div>
</div>

[idire]

Still complains about error parsing values and the popup appears on far left, the right vertical position but not horizontal

 

http://www.rstracking.com/expgainrecords.php

[rhodesa]

no offense, but your code is a mess...it probably has to do with problems elsewhere in your code:

 

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.rstracking.com%2Fexpgainrecords.php

[idire]

Yeh i know its a mess, its all dynamic generated from php loops and such.

 

Those validation errors are just the same one repeated 15 times.

 

I will look at it later, but its alot of work to go through and try to understand whats wrong

[rhodesa]

the main ones that will give you issues are the missing end tags...i saw some in there for forms and spans

 

...something else....use this for your JS and let me know what the alerts are:

<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(e)
    {
        e = e ? e : event;
        var Popup = document.getElementById('Popup');
        /* get the mouse left position */
        x = e.clientX + document.body.scrollLeft;
alert('x: '+x);
        /* get the mouse top position  */
        y = e.clientY + document.body.scrollTop + 35;
alert('y: '+y);
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x;
        /* set the pop-up's top */
        Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    window.onload = function(){
        var ele = document.getElementById('test');
        ele.onmouseout = Hide;
        ele.onmouseover = Show; 
        ele.onmousemove = Show;
    } 
</script>

[idire]

4 alerts

 

x: 406

 

y: 262

 

x: 406

 

y: 262

[rhodesa]

hum, ok...it might not like that there isn't a px on the end....try this for your CSS and JS:

<style>
  .transparent {
    filter:alpha(opacity=90);
    background-color:#FFFACD;
    display:none;
    width:170px;
    height:100px;
    color: black;
    border: 2 green solid;
}
#popup { left:0px; top:0px; }

</style>
<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(e)
    {
        e = e ? e : event;
        var Popup = document.getElementById('Popup');
        /* get the mouse left position */
        x = e.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = e.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x + 'px';
        /* set the pop-up's top */
        Popup.style.top = y + 'px';
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    window.onload = function(){
        var ele = document.getElementById('test');
        ele.onmouseout = Hide;
        ele.onmouseover = Show; 
        ele.onmousemove = Show;
    } 
</script>

[idire]

works perfectly now on ff and ie

 

what did you change? just adding px on the end?

[rhodesa]

yup

[idire]

Thanks

 

I'll have a go at sorting out code validation after I add dynamic data to the popup boxes.

 

Thanks for the help

[idire]

know anything about how I can get multiple popups to work?

 

Currently only the first one works, i know i would need to change the div name thats being hidden and shown but how?

 

 

[idire]

            <div id="Popup<? echo $i; ?>" class="transparent">

            <div style="background-color: #90EE90">

            <b>Method Used:</b></div>

            <div>

            <div><? echo $user.$method; ?></div>

            </div></div>

 

how to I add the var $i to the hide/show?