0

I am using tabSlideOut plugin (http://www.building58.com/examples/tabSlideOut.html) which works great apart from when I resize the browser. The code basically checks the browser size on document ready and on browser resize to determine whether the tab should be displayed. However, on resize the tab doesn't work as it should and slides in and out multiple times when clicked. Can anyone assist?

function doMenu() {

    var width = $(window).width();

    if (width < 530) {


     $('.slide-out-div').tabSlideOut({
         tabHandle: '.handle',
         pathToTabImage: null,
         imageHeight: null,
         imageWidth: null,
         tabLocation: 'right',
         speed: 300,
         action: 'click',
         topPos: '0',
         leftPos: '20px',
         fixedPosition: false,
         toogleHandle: false
     });
   }

}
$(document).ready(doMenu);
$(window).resize(doMenu);
LeeTee
  • 6,401
  • 16
  • 79
  • 139

1 Answers1

1

You are probably initializing the tabSlideOut plugin multiple times - every time browser window is resized it adds a new click handler that runs the sliding animation. Try something like:

var menuInitialized = false;
var handle = null;
function doMenu() {
    if(handle === null) {
        handle = $(".handle");
    }
    var width = $(window).width();
    if (width < 530) {
        if(!menuInitialized) {
            //only call $.tabSlideOut once
            menuInitialized = true;
            $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',
                pathToTabImage: null,
                imageHeight: null,
                imageWidth: null,
                tabLocation: 'right',
                speed: 300,
                action: 'click',
                topPos: '0',
                leftPos: '20px',
                fixedPosition: false,
                toogleHandle: false
            });
        }
        handle.show();
   } else {
        handle.hide();
   }
}
$(document).ready(doMenu);
$(window).resize(doMenu);
pfyod
  • 617
  • 5
  • 11
  • Hi, thanks for you answer. This works for document ready but not on browser resize, it does not look like it initializing the tab menu at all – LeeTee Apr 03 '13 at 09:43
  • Unless I misunderstood you somehow, it does work. I've created a fiddle to test: http://jsfiddle.net/Zmu5C/ - you can play with resizing the right column. It's initialized on `ready` and `resize` if during that event window is less than 530px wide (and initialized just once); shows/hides the handle accordingly (hidden when >= 530px, shown when < 530px). – pfyod Apr 03 '13 at 11:13
  • Wonder why its not working on my project. When the browser is resized to < 530 the whole of the slide out div is shown and clicking the handle does not close it either. I assume this will be my CSS. – LeeTee Apr 03 '13 at 11:36