jquery hover function onLoad not working in firefox

Question

This code works in Chrome and IE, but nothing in Firefox!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JS:

   $(window).load(function(){
    $("#bostitchTitle_Printable_1, #bostitchTitle_Printable_2").hover(function () {
        $(this).toggleClass("hoverblueL");
      });
    $(".printableTitle").hover(function () {
        $(this).toggleClass("hoverblue");
      });
    });

CSS:

.hoverblue { 
    background:url('images/border-bottom.png') !important;
    height:20px;
}
.hoverblueL { 
    background:url('images/border-bottom.png') !important;
    height:36px;
}

HTML:

All of the relevant IDS above look like the below (but with their element name, ie. _1 and _2). Notice class .printableTitle is shared among all in the <span> tag, but I needed to define the other two unique DIVS because they required different height treatment.

<li id="bostitchPrintable_1">
        <a href="http://www.canada.org" target="_blank">
            <span id="bostitchTitle_Printable_1" class="printableTitle bos_title shimify">Rollin to Canada tonight!!</span>
        </a>
    </li>

IE and Chrome perfect... nothing resolves at all for Firefox!!

What about it isn't working? It seems to atleast apply the class in this fiddle http://jsfiddle.net/1nfp3o43/2/ — DasBeasto, Jul 17 '15 at 19:26
@DasBeasto [http://jsfiddle.net/1nfp3o43/2/](http://jsfiddle.net/1nfp3o43/2/) does not work on `onLoad` — Malik Naik, Jul 17 '15 at 19:30
@Malik if you set the fiddle to onload it simply wraps your script in $(window).load(), so in that case just remove the $(window).load() from your script or it'll be nested. Or leave the call in your code and set the fiddle to noWrap — DasBeasto, Jul 17 '15 at 19:35

score 0 · Accepted Answer · edited Jul 20 '15 at 15:04

0

$(window).load does not work in firefox, and is bad practice. You should be using $(document).load.

Also, use .on and not .hover if your version of jQuery allows it.

$("#bostitchTitle_Printable_1, #bostitchTitle_Printable_2").on("hover", function () {
        $(this).toggleClass("hoverblueL");
      });

.hover calls this function anyway

edited Jul 20 '15 at 15:04

Dr Upvote

8,023
24
91
204

answered Jul 17 '15 at 19:19

Sinistralis

412
3
16

1

Do you have a reference for $(window).load not working on firefox? I've never heard this and it seems to work fine for me: http://jsfiddle.net/1nfp3o43/2/ – DasBeasto Jul 17 '15 at 19:25
1

`$(window).load does not work in firefox, and is bad practice` I'm not sure where you're getting that from as neither of those statements are correct. `$(window).load()` is used when you want to execute scripts after *all* resources (such as stylesheets, images etc) have been downloaded. It's arguable that the OP needs to use it, but to say it doesn't work, or is bad practice is demonstrably incorrect. – Rory McCrossan Jul 17 '15 at 19:27
1

I've ran into this issue personally several times where $(window).load was causing issues in firefox (this exact issue actually) and switching to document solved the issue. I read the bad practice on a stackoverflow issue in the past but I cannot locate it at the moment. I'll keep looking. Other examples of this issue cropping up: http://stackoverflow.com/questions/15945206/window-load-doesnt-seem-to-be-working-in-firefox Also, http://stackoverflow.com/questions/20764047/firefox-does-not-handle-jquery-window-load-properly shows that window.load has issues with images as well. – Sinistralis Jul 17 '15 at 19:35

jquery hover function onLoad not working in firefox

1 Answers1