jQuery Window Resize event not updating when using module pattern -
i trying simple script whereby divs set w/h of window when page loads , when window resized. here code:
/* module - resize scroller */ var resizecontainer = (function() { /* settings */ var s = { $scrollable : $('#scrollable'), $sectionwrapper : $('#sectionwrapper'), $scrollablechildren : $('.scrollablev'), $childrentotal : $('.scrollablev').length, $navtext : $('nav span'), $winwidth : $(window).innerwidth(), $winheight : $(window).innerheight(), fontsize : parseint($(window).width()/10)+'px' }; function init() { binduiactions(); } function binduiactions() { s.$scrollable.add(s.$scrollablechildren).css( { width : s.$winwidth, height : s.$winheight }); s.$sectionwrapper.css( { width : s.$winwidth * s.$childrentotal, height : s.$winheight }); s.$navtext.css( { 'font-size' : s.fontsize }); console.log(s.$winwidth); } return { init : init }; })(); $(document).ready(function() { /* call resize module */ resizecontainer.init(); }); $(window).on('resize', function() { /* call resize module */ resizecontainer.init(); }); when call resizecontainer on document ready console gives me window size, when resize window value not updated. can me understand why? many in advance.
i cannot see wrong in code, however, resize event got particular behaviour made call twice (depending of browser). try , see if working you:
$(document).ready(function() { var timeoutresize; $(window).on('resize', function() { cleartimeout(timeoutresize); timeoutresize = settimeout(resizecontainer.init,100); }).triggerhandler('resize'); });
Comments
Post a Comment