overflow-y: scroll causing issues with JQuery

Question

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:

$(function(){
  var nav = $('.nav'),
  navBut = $('.navBut');

  navBut.click(function(){
  if(nav.width() === 0){
    nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
  } else {
    nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
  }
});

Can anybody see why this would be the case or how I can solve this?

http://jsfiddle.net/9ubxyw0t/2/

what browser are you using? i just tried this in Chrome and it works fine with overflow set to "none" or "scroll" — Da Rod
– Da Rod, Commented Mar 3, 2015 at 1:03
I just tried it in Firefox and it works fine. In the latest version of Chrome it requires 2 clicks to open — Chris Dance
– Chris Dance, Commented Mar 3, 2015 at 1:11
I'm using Windows. Is it possibly a bug? And would there be a workaround in the jquery? — Chris Dance
– Chris Dance, Commented Mar 3, 2015 at 1:14

Josh Crozier · Accepted Answer · 2015-03-03 01:07:42Z

1

Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.

Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.

Updated Example

var nav = $('.nav'),
    navBut = $('.navBut');

navBut.on('click', function () {
    if (nav.width() <= 0) {
        nav.stop().animate({
            width: '15%',
            opacity: '1.0'
        }, 300);
    } else {
        nav.stop().animate({
            width: '0',
            opacity: '0.0'
        }, 300);
    }
});

answered Mar 3, 2015 at 1:07

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

Collectives™ on Stack Overflow

overflow-y: scroll causing issues with JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related