Javascript Question

  • Started
  • Last post
  • 2 Responses
  • voiceof

    I'm an amateur when it comes to JS and was hoping someone could help me with a basic script.

    In firefox if I add/remove the overflow:hidden property at the same time that I trigger a css animation it will kill the animation.

    https://bugzilla.mozilla.org/sho…

    So my workaround it to use JS to add the overflow:hidden style to the body tag right before I add the class. This works for opening the sidemenu but since the property is removed at the same time as the class it kills the closing animation.

    Here is what I am using.

    $("#js-toggle-course-menu ").click(function(){
    var $body = $("body");
    if ($body.hasClass("course-sidebar... {
    $body.removeClass("course-sideba... "");
    } else {
    $body.addClass("course-sidebar-o...
    setTimeout(function() {
    $body.css("overflow", "hidden");
    }, 50);
    }
    });

    How would I rewrite this to add the overflow property first and then the class on opening and then remove the class first followed by the overflow property on closing.

    Any help is appreciated.

  • voiceof0

    Nevermind it seems to be working now.

  • voiceof0

    Damnit, I was wrong it's still broken. I forgot I added overflow:hidden to the body in the style sheet to test it.