CODEWITHSUNDEEP
javascriptjquerycss
LegendaryLaggy
LegendaryLaggy

Reputation: 455

jQuery adding style="overflow: hidden;"

I have created a bit of code to hide my menu, the menu is not complete but I am trying to use jQuery.slideUp() function but it adds style="overflow: hidden;" to the code so when I use .show one of my elements is hidden which is #nav:after and #nav:before which adds a small arrow to the bottom of the menu

here is the js code

  $("span#start_button").click(function () {
        if ($("#nav").is(":hidden")) {
            $("#nav").show("fast");
        } else {
            $("#nav").slideUp();
        }
    });

and here is the result on this site

How can I stop .slideUp() from creating style="overflow: hidden;" ?

Upvotes: 15

Views: 57168

Answers (5)

Andrey
Andrey

Reputation: 161

This is bug in older jquery. This code replace standart function "slideDown" and delete overflow property. 

!(function (jQuery, origSlideDown) {
jQuery.fn.slideDown = function (speed, easing, callback) {
    var self = this;
    var args = Array.prototype.slice.call(arguments);
    var origCallback;

    for (var i = 0, len = args.length; i < len; i++) {
        if (jQuery.isFunction(args[i])) {
            origCallback = args[i];
            args[i] = function () {
                origCallback.call(this);
                self.css('overflow', '');
            }
        }
    }

    if (!origCallback) {
        args.push(function () {
            self.css('overflow', '');
        });
    }

    return origSlideDown.apply(this, args);
};
})(jQuery, jQuery.fn.slideDown);

Upvotes: 7

Srihari
Srihari

Reputation: 766

Override the default styling by modifying the style attribute of html.

else {
       $("#nav").slideUp();
       $("#nav").attr("style","overflow:visible");
    }

Upvotes: 0

amd
amd

Reputation: 21452

You must remove the overflow:hidden on the callback of the slideUp() function so you can try 

$("#nav").slideUp('fast', function(){ $('#nav').css('overflow','visible') });

Or you can force it by css 

#nav{overflow:visible!important}

Upvotes: 17

Jay Blanchard
Jay Blanchard

Reputation: 34416

Override that style - 

   $("#nav").slideUp();
   $("#nav").css({'overflow':'visible'});

Upvotes: 1

MG_Bautista
MG_Bautista

Reputation: 2653

Try this...

else {
   $("#nav").slideUp();
   $("#nav").css("overflow","visible");
}

Upvotes: 0

Related Questions