Proper viewport size, do not update height in responsive mode, do not forget to rebuild on touch devices if change is less than 20% #2728
Conversation
… from https://github.com/tysonmatanich/viewportSize 2) "resizeHandler()" returns immediately when "fp-responsive" is active 3) "resizeHandler()" rebuilds sections immmediately if change in height is more than 20% and postpones it for 350ms otherwise
| @@ -1,3 +1,6 @@ | |||
| /*! viewportSize | Author: Tyson Matanich, 2013 | License: MIT (https://github.com/tysonmatanich/viewportSize) */ | |||
| (function(n){n.viewportSize={},n.viewportSize.getHeight=function(){return t("Height")},n.viewportSize.getWidth=function(){return t("Width")};var t=function(t){var f,o=t.toLowerCase(),e=n.document,i=e.documentElement,r,u;return n["inner"+t]===undefined?f=i["client"+t]:n["inner"+t]!=i["client"+t]?(r=e.createElement("body"),r.id="vpw-test-b",r.style.cssText="overflow:scroll",u=e.createElement("div"),u.id="vpw-test-d",u.style.cssText="position:absolute;top:-1000px",u.innerHTML="<style>@media("+o+":"+i["client"+t]+"px){body#vpw-test-b div#vpw-test-d{"+o+":7px!important}}<\/style>",r.appendChild(u),i.insertBefore(r,e.head),f=u["offset"+t]==7?i["client"+t]:n["inner"+t],i.removeChild(r)):f=n["inner"+t],f}})(this); | |||
There was a problem hiding this comment.
This is a cross-browser safe way to get the proper viewport size (does not include scrollbars) - because $window.height() returns a value which is the viewport height minus the height of the horizontal scrollbar.
jquery.fullPage.js
Outdated
| @@ -2076,22 +2080,33 @@ | |||
| function resizeHandler(){ | |||
| //checking if it needs to get responsive | |||
| responsive(); | |||
| if(document.body.classList.contains('fp-responsive')) return; // IVO GELOV | |||
There was a problem hiding this comment.
When the responsive mode is active, we should not enforce the viewport height to the sections - their height should be left to AUTO.
| previousHeight = currentHeight; | ||
| if( Math.abs(currentHeight - previousHeight) > (20 * Math.max(previousHeight, currentHeight) / 100) ) reBuild(true); // IVO GELOV | ||
| else | ||
| { |
There was a problem hiding this comment.
If the change is less than 20%, we should not ignore the event - just postpone the rebuild for some time,
| } | ||
| previousHeight = currentHeight; // IVO GELOV |
There was a problem hiding this comment.
I am not sure whether the above statement should be inside the ELSE branch or outside of it ....
|
Thanks for that!
fullPage.js should set the height of the sections even in responsive mode.
That prevents fullpage.js to resize the section when the address and bottom bars get hidden. When using scrollBar:true or autoScrolling:false, this might be an issue. |
… should not occur if RESPONSIVE mode is active
I am using the default values for all parameters - I only define the responsiveWidth and provide handlers for the afterResize and afterResponsive events when initializing the library. I have not tested with
You are right - using this class solved the issue and did not require the presense of my code for early exiting the resizeHandler() in responsive mode. I will revert the changes. There is another issue, though. If you visit http://mmx.ivogelov.com and scroll down to the Testimonials section - you will see that this particular section has wrong Y offset for the "translate3d". It is -3620px while it should be -3790px (watching it in Chrome DevTools in mobile/responsive view with 1188x905 viewport). If you scroll to the next section (Professional massage) and then scroll back up to the Testimonials - this time the Y offset will be the right one. |
…in responsive mode.
I would like to share a contribution. I am using the library for the landing page of a customer's web site - development copy is currently available at http://mmx.ivogelov.com
I have experienced some strange/erroneous behavior in a couple of cases: