CODEWITHSUNDEEP
javascriptjquerywordpress
Geeky Bird
Geeky Bird

Reputation: 71

My Jquery Script is not working in IE / Safari / Firefox

I have a short code written that adds a class and removed a class from to a DIV in the nave menu. & It works perfectly fine in Google Chrome & no erros.

jQuery(function ($)
{
    $(window).scroll(function ()
    {
        var scroll = $(window).scrollTop();
        //>=, not <=
        if (scroll == 500)
        {
            //ADDS THE CLASS
            document.getElementById("main-header-container").className += " opened";
            document.getElementById("nav_toggle_button").className += " nav-close";
            document.getElementById("main-nav-container").className += " active";
            console.log("Nav Open");
        }
        else if (scroll <= 400)
        {
            //REMOVES THE CLASS
            $("#main-header-container").removeClass("opened");
            $("#nav_toggle_button").removeClass("nav-close");
            $("#main-nav-container").removeClass("active");
            console.log("Nav Close");
        }
    });
    );
});

Browsers not working & verisons:

Environment: Wordpress website.

My IE Version: 11.447.14393.0
My Firefox Version: 50.0.2
My Google Chrome Version: 54.0.2840.99
My Safari Version: Microsoft Edge

Things i notices on other broswers:

Just what to know what i am doing wrong here :(

It was solved and wrote a diff logic and this works better for me :)

<script type="text/javascript">

jQuery(function($){


$(window).scroll(function() {  

            var scroll = $(window).scrollTop();

                if (scroll > 0) {
                //IF SCROLL > 0

                  if ( $("#main-header-container").hasClass( "opened" ) ) {

                          //DO NOTHING IF THE CLASS IS ALREADY THERE

                     }else{

                      $("#main-header-container").addClass("opened");
                      $("#nav_toggle_button").addClass("nav-close");
                      $("#main-nav-container").addClass("active");

                                    console.log("Nav Open");
                                }

                }else if(scroll <= 200){

                    $("#main-header-container").removeClass("opened");
                    $("#nav_toggle_button").removeClass("nav-close");
                    $("#main-nav-container").removeClass("active");

                    console.log("Nav Close");

                } //END OF IF SCROLL > 0

            }); 
    });


</script>

Upvotes: 0

Views: 342

Answers (5)

hellofromTonya
hellofromTonya

Reputation: 1359

Hum, I'd be curious why Chrome is more forgiving. You do have an error as there's an extra ); on the second to last line of your script. Take a look at Developer Tools in Chrome and view the errors in the console.

Also, you have a tiny window to catch the window scroll when it exactly equals 500. That might be problematic.

Code Suggestions

You are mixing JavaScript and jQuery. Let's standardize on jQuery for readability. I think you'll find it easier to read and work with too.

Let's use jQuery to add and remove the class attributes. The following code:

  1. Uses .addClass() and .removeClass() from jQuery
  2. Caches the DOM lookups into variables
  3. It waits until the document is ready.

Here's the script for you:

(function($, window, document){
    "use strict";

    var $headerContainer, $navToggle, $mainNav;

    var init = function() {
        $headerContainer = $("#main-header-container");
        $navToggle = $("#nav_toggle_button");
        $mainNav = $("#main-nav-container");

        $(window).scroll(navHandler);
    }

    var navHandler = function() {
        var scroll = $(this).scrollTop();

        if (scroll >= 500) {
            $headerContainer.addClass("opened");
            $navToggle.addClass("nav-close");
            $mainNav.addClass("active");
            console.log("Nav Open");

        } else if (scroll <= 400) {

            $headerContainer.removeClass("opened");
            $navToggle.removeClass("nav-close");
            $mainNav.removeClass("active");
            console.log("Nav Close");
        }
    }

    $(document).ready(function(){
        init();
    });

}(jQuery, window, document));

Here's a working demo too on JSFiddle. The HTML and CSS are just dummy placeholders to show you the script working. When you scroll down past the threshold, the header container background turns green as a visual indication.

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

I am going to bite here; guess your intent and suggest you use this alternate code.

My guess: if less than or equal to 400 NOT use class (remove it), if more, use the class (add it).

(function($) {
    $(window).scroll(function() {  
        var scroll = $(window).scrollTop();
        var isNotLess = (scroll > 400);
        $("#main-header-container").toggleClass("opened",isNotLess);
        $("#nav_toggle_button").toggleClass("nav-close",isNotLess);
        $("#main-nav-container").toggleClass("active",isNotLess);
    });
})(jQuery);// pass jQuery to the anonymous function

Note, to directly answer your question; bottom line is your original code has a syntax error and some browsers appear to handle it better.

Upvotes: 1

Michael T&#233;treault
Michael T&#233;treault

Reputation: 424

do you have a fiddle with your code that we can use to test?

I also noticed mixed between javascript className method and jQuery removeClass one, why not just using one?

Here is with jQuery, you can try it but it would be simpler to debug with a fiddle.

$(function() {
    $(window).scroll(function() {  
        var scroll = $(window).scrollTop();
        // >=, not <=
        if(scroll == 500) {
            // ADD THE CLASS
            $("#main-header-container").addClass("opened");
            $("#nav_toggle_button").addClass("nav-close");
            $("#main-nav-container").addClass("active");
            console.log("Nav Open");
        } else if(scroll <= 400) {
            // REMOVE THE CLASS
            $("#main-header-container").removeClass("opened");
            $("#nav_toggle_button").removeClass("nav-close");
            $("#main-nav-container").removeClass("active");
            console.log("Nav Close");
        }
    });
});

Upvotes: 1

Igor Yavych
Igor Yavych

Reputation: 4228

You have stray ); in your code after the scroll listener

    else if (scroll <= 400)
    {
        //REMOVES THE CLASS
        $("#main-header-container").removeClass("opened");
        $("#nav_toggle_button").removeClass("nav-close");
        $("#main-nav-container").removeClass("active");
        console.log("Nav Close");
    }
});
); <------

Also, jQuery in WP is loaded in no-conflict mode. You should wrap your code like this:

jQuery(document).ready(function ($)
{
    //your code
)}

Correct code 

jQuery(document).ready(function ($)
{
    $(window).scroll(function ()
    {
        var scroll = $(window).scrollTop();
        //>=, not <=
        if (scroll == 500)
        {
            //ADDS THE CLASS
            document.getElementById("main-header-container").className += " opened";
            document.getElementById("nav_toggle_button").className += " nav-close";
            document.getElementById("main-nav-container").className += " active";
            console.log("Nav Open");
        }
        else if (scroll <= 400)
        {
            //REMOVES THE CLASS
            $("#main-header-container").removeClass("opened");
            $("#nav_toggle_button").removeClass("nav-close");
            $("#main-nav-container").removeClass("active");
            console.log("Nav Close");
        }
    });
});

Side not, your conditions seem a bit weird tbh.

Upvotes: 2

Denys Konoplin
Denys Konoplin

Reputation: 362

jQuery(function($)

you are trying to get $ as argument but you don't send this argument. So I suggest that inside a function can be created some local variable $ with value as undefined

try to make 

(function($){
  $(function(){
   $(window).scroll(function (){
     ......
   });
  });
}(jQuery)

Upvotes: 1

Related Questions