Wrapper is not responsive to window resizing #5
Description
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);
};
})();