Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc69b44
1) replaced "$window.height()" with "viewportSize.getHeight()", taken…
tmcdos May 27, 2017
936acb9
cleaned up some comments
tmcdos May 27, 2017
1b9cd51
Fixed a bug - calling "reBuild(true)" on timeout in "resizeHandler()"…
tmcdos May 28, 2017
9df2c79
Removed the code which was prematurely exiting the "resizeHandler()" …
tmcdos May 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 28 additions & 14 deletions jquery.fullPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


/*!
* fullPage 2.9.4
* https://github.com/alvarotrigo/fullPage.js
Expand Down Expand Up @@ -198,7 +201,7 @@
var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/);
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
var container = $(this);
var windowsHeight = $window.height();
var windowsHeight = viewportSize.getHeight(); // IVO GELOV
var isResizing = false;
var isWindowFocused = true;
var lastScrolledDestiny;
Expand Down Expand Up @@ -450,7 +453,7 @@

isResizing = true;

windowsHeight = $window.height(); //updating global var
windowsHeight = viewportSize.getHeight(); // IVO GELOV = updating global var

$(SECTION_SEL).each(function(){
var slidesWrap = $(this).find(SLIDES_WRAPPER_SEL);
Expand Down Expand Up @@ -651,7 +654,7 @@
$('html').addClass(ENABLED);

//due to https://github.com/alvarotrigo/fullPage.js/issues/1502
windowsHeight = $window.height();
windowsHeight = viewportSize.getHeight(); // IVO GELOV

container.removeClass(DESTROYED); //in case it was destroyed before initializing it again

Expand Down Expand Up @@ -938,8 +941,8 @@
var currentScroll = $window.scrollTop();
var scrollDirection = getScrollDirection(currentScroll);
var visibleSectionIndex = 0;
var screen_mid = currentScroll + ($window.height() / 2.0);
var isAtBottom = $body.height() - $window.height() === currentScroll;
var screen_mid = currentScroll + (viewportSize.getHeight() / 2.0); // IVO GELOV
var isAtBottom = $body.height() - viewportSize.getHeight() === currentScroll; // IVO GELOV
var sections = document.querySelectorAll(SECTION_SEL);

//when using `auto-height` for a small last section it won't be centered in the viewport
Expand Down Expand Up @@ -1051,10 +1054,10 @@
*/
function isCompletelyInViewPort(movement){
var top = $(SECTION_ACTIVE_SEL).position().top;
var bottom = top + $window.height();
var bottom = top + viewportSize.getHeight(); // IVO GELOV

if(movement == 'up'){
return bottom >= ($window.scrollTop() + $window.height());
return bottom >= ($window.scrollTop() + viewportSize.getHeight()); // IVO GELOV
}
return top <= $window.scrollTop();
}
Expand Down Expand Up @@ -1158,7 +1161,8 @@
else if(options.autoScrolling && canScroll){

//is the movement greater than the minimum resistance to scroll?
if (Math.abs(touchStartY - touchEndY) > ($window.height() / 100 * options.touchSensitivity)) {
if (Math.abs(touchStartY - touchEndY) > (viewportSize.getHeight() / 100 * options.touchSensitivity)) // IVO GELOV
{
if (touchStartY > touchEndY) {
scrolling('down', scrollable);
} else if (touchEndY > touchStartY) {
Expand Down Expand Up @@ -2083,15 +2087,25 @@

//if the keyboard is NOT visible
if (!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select')) {
var currentHeight = $window.height();
var currentHeight = viewportSize.getHeight(); // IVO GELOV

//making sure the change in the viewport size is enough to force a rebuild. (20 % of the window to avoid problems when hidding scroll bars)
if( Math.abs(currentHeight - previousHeight) > (20 * Math.max(previousHeight, currentHeight) / 100) ){
reBuild(true);
previousHeight = currentHeight;
if( Math.abs(currentHeight - previousHeight) > (20 * Math.max(previousHeight, currentHeight) / 100) ) reBuild(true); // IVO GELOV
else
{
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the change is less than 20%, we should not ignore the event - just postpone the rebuild for some time,

// IVO GELOV =====
clearTimeout(resizeId);

resizeId = setTimeout(function(){
reBuild(true);
}, 350);
// IVO GELOV =====
}
previousHeight = currentHeight; // IVO GELOV
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure whether the above statement should be inside the ELSE branch or outside of it ....

}
}else{
}
else
{
//in order to call the functions only when the resize is finished
//http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
clearTimeout(resizeId);
Expand All @@ -2112,7 +2126,7 @@

//only calculating what we need. Remember its called on the resize event.
var isBreakingPointWidth = widthLimit && $window.outerWidth() < widthLimit;
var isBreakingPointHeight = heightLimit && $window.height() < heightLimit;
var isBreakingPointHeight = heightLimit && viewportSize.getHeight() < heightLimit; // IVO GELOV

if(widthLimit && heightLimit){
setResponsive(isBreakingPointWidth || isBreakingPointHeight);
Expand Down