Geek Answers Handbook

JQuery resize () causes screen flicker and div to shift

Background:

I am trying to create a system that allows me to scroll the map view using the mouse, scroll up and scroll the mouse like this:

------- | | | 1 | | | ------- ------- ------- ------- ------- | | | | | | | | | 2 | | 3 | | 4 | | 5 | | | | | | | | | ------- ------- ------- ------- ------- | | | 6 | | | -------

Each of the above reset fields in javascript is the height and width of the browser. When you scroll up and down, the browser will scroll to an equal position on the map, starting with div 1, then 2, and so on. This positioning is set using my scroll function, which listens for mouse scrolling and adds the appropriate padding to the top and edge to the left to create the illusion of the map above.

Here is the code for it:

http://codepen.io/lorenzoi/pen/mxejJ

And here is the javascript for it:

 $(function(){ $(window).on('resize', function(){ var $divs = $('.vertical, .horizontal > div'), ww = $(this).width(), wh = $(this).height(); $divs.css({ height : wh, width : ww }); $('.horizontal').each(function(){ var $container = $(this), nbChildren = $container.children().length; posY = $container.offset().top, $container.css({ height: ww*(nbChildren-1) + wh, width: ww*(nbChildren) }); }); }).trigger('resize'); $(window).on('scroll', function(){ var wh = $(window).height(), scroolTop = $(window).scrollTop(); $('.horizontal').each(function(){ var $container = $(this), posY = $container.offset().top, height = $container.height(), nbChildren = $container.children().length, marginMax = $container.width()/nbChildren*(nbChildren-1), marginL = scroolTop - posY; if(marginL<0) marginL = 0; else if (marginL>marginMax) marginL = marginMax; $container.css('marginLeft', -marginL); $container.css('paddingTop', marginL); }); }).trigger('scroll'); });

Problem:

Resizing the window creates a strange div offset, which is fixed when the scroll function is called for sections 2 through 5. When resizing, when in these divs, they seem to compensate themselves, and then only lock when the scroll function is called.

.trigger ('size'); should always be called, huh? I do not know why this is only called when the scroll function is executed.

How can this be fixed?

+6
source share
3 answers

Using a timer should be enough:

 $(function(){ var timeoutResize; $(window).on('resize', function(){ clearTimeout(timeoutResize); timeoutResize = setTimeout(function(){ var $divs = $('.vertical, .horizontal > div'), ww = $(this).width(), wh = $(this).height(); $divs.css({ height : wh, width : ww }); $('.horizontal').each(function(){ var $container = $(this), nbChildren = $container.children().length; posY = $container.offset().top, $container.css({ height: ww*(nbChildren-1) + wh, width: ww*(nbChildren) }); }); },100); }).trigger('resize'); ... });
+3
source

., You should keep in mind that whenever the user resizes the window vertically, the scroll position will be affected, and it should also affect the background scroll (because it is based on the current scroll position).

., The simplest solution would be to simply call $(window).trigger('scroll'); at the end of the resize handler code, so you store it DRY. I made this change with my CodePen fork . Check this.

+2
source

If you have an event handler that runs too often, you can throttle it as follows:

 function throttle(ms, fn) { var allow = true; function enable() { allow = true; } return function(e) { if (allow) { allow = false; setTimeout(enable, ms); fn.call(this, e); } } }

Then pass the throttle handler when it is assigned. It will return a function that will work no more than once every n milliseconds based on the first argument that you provide.

 $(window).resize(throttle(100, function(e) { // do heavy work }));
0
source

More articles:


All Articles