jQuery adding style="overflow: hidden;"

Question

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;" ?

What do you want to do instead? If you want it to just slide up without disappearing you could use animate() instead. — gideon
– gideon, Commented Feb 1, 2013 at 12:52
look on the site, I dont want the arrow to disappear after using the .slideUp() function — LegendaryLaggy
– LegendaryLaggy, Commented Feb 1, 2013 at 12:56

amd · Accepted Answer · 2013-02-01 13:17:24Z

17

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}

answered Feb 1, 2013 at 13:17

amd

21.7k6 gold badges54 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Saini Over a year ago

And, why should we? Because (from Andrey's answer), this is a bug in older jQuery. Personally, I found upgrading my jQuery version more convenient.

Andrey · Accepted Answer · 2014-01-30 11:01:47Z

7

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);

answered Jan 30, 2014 at 11:01

Andrey

1611 silver badge3 bronze badges

1 Comment

Jacob Bundgaard Over a year ago

jQuery.support.shrinkWrapBlocks seems to be set inadvertently when box-sizing is changed in resets and frameworks like Bootstrap, but this is fixed in jQuery 1.11.

Jay Blanchard · Accepted Answer · 2013-02-01 12:56:52Z

1

Override that style -

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

answered Feb 1, 2013 at 12:56

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-02-01 12:54:10Z

0

Try this...

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

edited Feb 1, 2013 at 12:54

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

answered Feb 1, 2013 at 12:52

MG_Bautista

2,6812 gold badges21 silver badges33 bronze badges

Comments

Srihari · Accepted Answer · 2013-02-01 13:20:28Z

0

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

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

edited Feb 1, 2013 at 13:20

answered Feb 1, 2013 at 12:51

Srihari

7761 gold badge7 silver badges22 bronze badges

1 Comment

markus Over a year ago

Code only answers are almost as bad as link only answers. They're not really answers at all. A good answer contains explanations and reasoning and possibly some sources or authority.

Collectives™ on Stack Overflow

jQuery adding style="overflow: hidden;"

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related