CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris Dance
Chris Dance

Reputation: 223

overflow-y: scroll causing issues with JQuery

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/

Upvotes: 1

Views: 64

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240938

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

Upvotes: 1

Related Questions