isn't working only on Firefox

Question

For some reason, this code works all chrome, safari, and ei but not on firefox.

        <script type="text/javascript">
        function toscheck(){
        if(tos.scrollTop+540 > tos.scrollHeight){
            alert(tos.scrollTop + " " + tos.scrollHeight);
        }
    }
        </script>

----------

    <textarea name="tos" id="tos" readonly="readonly"  onmousemove="toscheck()">text</textarea>

Nothing's triggered on FF but works fine on all other browsers.

However, <textarea.. onmousemove=alert('test')>text</textarea> works fine.

I'm new to javascript so any help would be greatly appreciated.

@Vince it was actually just bad formatting. I fixed it for him. — Stephen, Dec 17 '10 at 22:23

score 2 · Answer 1 · answered Dec 17 '10 at 22:18

That should actually not work in any browser. There is a closing bracket missing in your Javascript code:

<script type="text/javascript">
function toscheck() {
  if (tos.scrollTop + 540 > tos.scrollHeight) {
    alert(tos.scrollTop + " " + tos.scrollHeight);
  }
}
</script>

subhaze · Accepted Answer · 2010-12-17T22:34:15.437

Live example

Other than your missing } to close out your function it seems to work in FF for me.

<script type="text/javascript">
    function toscheck(){
        if(tos.scrollTop+540 > tos.scrollHeight){
            alert(tos.scrollTop + " " + tos.scrollHeight);
        }
    } // <----- was missing
</script>

Also, in your function you directly go to tos.property.

You'll either need to pass this into the mousemove="toscheck(this)" and have your function setup like this:

<script type="text/javascript">
    function toscheck(elem){
        if(elem.scrollTop+540 > elem.scrollHeight){
            alert(elem.scrollTop + " " + elem.scrollHeight);
        }
    }
</script>

Or get your textarea from within the function like this:

<script type="text/javascript">
    function toscheck(){
        var tos = document.getElementById('tos');
        if(tos.scrollTop+540 > tos.scrollHeight){
            alert(tos.scrollTop + " " + tos.scrollHeight);
        }
    }
</script>

I looked at your live example and saw that i needed function toscheck(tos){...} and onmousemove="toscheck(this)" Thanks a bunch! — sam, Dec 17 '10 at 22:41

score 0 · Answer 3 · answered Dec 17 '10 at 22:37

Best solution, use jQuery and it's automatically cross-browser method or see this page regarding making that code cross-browser compatible due to differences between implementation in re:

Scrolling offset - how much the page has scrolled.

var x,y;
if (self.pageYOffset) // all except Explorer
{
    x = self.pageXOffset;
    y = self.pageYOffset;
}
else if (document.documentElement &amp;&amp; document.documentElement.scrollTop)
    // Explorer 6 Strict
{
    x = document.documentElement.scrollLeft;
    y = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
    {
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    }

and

var x,y;
    var test1 = document.body.scrollHeight;
    var test2 = document.body.offsetHeight
    if (test1 &gt; test2) // all but Explorer Mac
    {
        x = document.body.scrollWidth;
        y = document.body.scrollHeight;
    }
    else // Explorer Mac;
         //would also work in Explorer 6 Strict, Mozilla and Safari
    {
        x = document.body.offsetWidth;
        y = document.body.offsetHeight;
    }

You're aware that we're talking about a `textarea` - not a whole document (in an `iframe` for example)? — Mario, Dec 17 '10 at 22:38
right, I copied over the code from the page that discussed the cross-browser issues with using the plain JS methods.. but I first recommended that jQuery be used since it handles that all internally... the code example relates only to the cross-browser differences, not the actual code needed as learning how and why is better than just dropping in correct code. — FatherStorm, Dec 17 '10 at 23:01

score 0 · Answer 4 · answered Dec 17 '10 at 22:37

How big is your actual text box? Maybe it's rendered in a different size than you expect and/or the scrollheight is a little bit different? Maybe it's a font size/resolution/DPI setting issue. To try to solve it, add a small overlapping amount so you actually don't have to scroll to the absolute bottom (won't work in IE for example when using keyboard navigation and Ctrl + End).

if(tos.scrollTop + 565 > tos.scrollHeight){

On a side note, I wouldn't check this in onmousemove as people might use keyboard keys to navigate as well. I'd suggest using onblur and maybe onmouseup and/or onkeyup. onmouseup however might not fire if the mouse button is released while being on the scroll bar.

isn't working only on Firefox

4 Answers4