Fluid sliding panel : make it work on load and after resize with computed values?

Question

I'm trying to put together a fluid sliding panel which should take into account the inner width of the window on load, as well as on resizes : depending on the actual window size, the panel should be moved left / right a fourth of the window width. So far i managed to bypass the multiple resize events happening when the user resizes the window, thx to this thread.

var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
  uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
  clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();

var slidinNav = function(rtr){
document.getElementById('navPanel').style.left = -rtr + "px";
document.getElementById('navPanel').style.width = rtr + "px";

$('.showMenu').click(function(){
        $('#navPanel').animate({left: '+=' + rtr +'px'}, 400); 
        });

        $('.hideMenu').click(function(){
        $('#navPanel').animate({left: '-=' + rtr + 'px'}, 400); 
        }); 
}

$(document).ready(function(){
var winW = window.innerWidth;
 var navPosLeft=winW/4;
 slidinNav(navPosLeft);
});

$(window).resize(function () {
waitForFinalEvent(function(){
 var winW = window.innerWidth;
 var navPosLeft=winW/4;
 slidinNav(navPosLeft);
 console.log(" Left / Width : " + navPosLeft);
}, 200, "un identifiant unique ?");
});

But being a complete javascript newbie i haven't found the solution to prevent the variables i use to store the window width value and offset to take all the successive values computed. Better than a long and unclear explanation see jsfiddle here.

Here's my question : Should i reset variables (how and when) or rather try and get the last value (and again : how and when) ? Thx for any help on this one ; - )

Answer 1

Correct me if I am not understanding exactly what you are looking for here but it looks to me like you may be making it more complicated than it needs to be. Looks like you could simply just stay with using % and just have these functions:

 $('.showMenu').click(function(){
            $('#navPanel').animate({left: 0}, 400); 
            });

            $('.hideMenu').click(function(){
            $('#navPanel').animate({left: "-20%"}, 400); 
            }); 

As demonstrated here: http://jsfiddle.net/X9Jrc/3/