Wrapper is not responsive to window resizing

[fabianar]

I've been trying to apply easyWizard to a webpage made using Zurb Foundation and the content inside the wrapper won't adjust to after page load resizing. The reason for that as I can see is:

• the plugin gets the current width and divides by the # of steps within the selector; then it sets that value to the width of each step, and each step will be floating with a fixed margin-left, not allowing for the step to be resized after that.

This is the fix I came up with and I'm not sure it's the best solution, that's why I'm posting on here:

• Add function resize()

    resize: function(activeStepObj) {

      // gets new width
      thisSettings.width = $this.width(); 

      // update wrapper width
      $this.find('.easyWizardWrapper').width(thisSettings.width * thisSettings.steps);

      // update steps width
      $steps.each(function(index) {
        $(this).css({
        'width': thisSettings.width,
        });          
      });

      // gets the activeStep #
      activeStep = activeStepObj.attr('data-step');      

      // sets new margin-left positioning to main wrapper
      $this.find('.easyWizardWrapper').css({
          'margin-left': thisSettings.width * (activeStep - 1) * -1
      });

      // makes sure activeStep maintains class active
      activeStepObj.addClass('active').css('height', '');

    }

• Call function whenever window resizes (giving the active step as param):

$(window).resize(function() {
  waitForFinalEvent(function(){
    $form.easyWizard('resize', $form.find('.active'))
  }, 500, "resizingEvent");  
});

// only fires function once, at the end of resizing event

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

[mauriciosouto]

Hi,
I had the same problem, and this works for me :-D

Thanks!

[yogiben]

@fabianar thank you for your code !

[Sachin4dotnet]

Really it's very helpful and saved a lot of my time. Thanks a lot..

[fabianar]

glad it was useful!

[TrueEddie]

Thanks so much! This worked perfectly.