Jquery detect resize browser and tabSlideOut plugin

Question

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

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