Develop Reference

Disable fullpage js on mobile devices

I tried to disable the fullpage js for mobile devices but it is not working.
The script i am using is :
<script>
var isPhoneDevice = "ontouchstart" in document.documentElement;
$(document).ready(function() {
if(isPhoneDevice){
//mobile
}
else{
$(document).ready(function(){
$('#fullpage').fullpage();
responsive: 700 // here is solution
})
}
});
</script>
website link : http://demo.lamppostmedia.in/arklan-dev/
Help me disable it.

There's no such thing as a "mobile device" anymore. Is a table a mobile device? Is a touch screen laptop consider a desktop?
The right way to deal with this is basing the behaviour on the resolution of the device the visitor is accessing from.
That's why fullPage.js version 3 provides the options responsiveWidth and responsiveHeight that allow you to turn off the snap effect when reaching certain threshold.
See the Responsive width example for fullPage.js.
And the examples code here:
https://github.com/alvarotrigo/fullPage.js/tree/master/examples
You can read more about responsive options in the the fullpage.js documentation:
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

Retrieving viewport height of screen in mobile browsers with jquery

I'm attempting to get the viewport height in mobile browsers WITHOUT the height of the browser bar but all of the solutions I've attempted have come up short.
What others have suggested is using the below, however it does not work for me. I still get a blank white bar at the bottom of the window when scrolling
var screenHeight = window.innerHeight;
$('.mobile-nav-wrapper').height(screenHeight)

I believe what you are looking for is scrollHeight
The scrollHeight property returns the entire height of an element in
pixels, including padding, but not the border, scrollbar or margin.
You can try this:
document.body.scrollHeight

Solution 1:
I don't have an answer using jQuery. But using a plain/vanilla JavaScript wouldn't cause any issue :).
Following script allows you to detect the Viewport size (height and width) reliably.
https://github.com/tysonmatanich/viewportSize
Sample usage:
<script type="text/javascript">
var width = viewportSize.getWidth();
var height = viewportSize.getHeight();
</script>
I have used it in couple of projects, were i have to re-initialize some widgets based on current Viewport width/height rather than using window width/height (Window width/height calculation isn't consistent in all browsers - some include scroll bar size 16px as a part of window width and some doesn't).
Sample Test page:
http://tysonmatanich.github.io/viewportSize/
Solution 2: (Just for reference - Not an answer to OP's question, though it is related so I thought that it can remain)
Well modernizr has a very good addition Modernizr.Mq. Through which you can cross check which break point range you are in...
if(Modernizr.mq("(min-width:320px)")){
//Do job 1
}
else if (Modernizr.mq("(min-width:768px)")){
//Do job 2
}
or
based on height
Modernizr.mq("(min-height: 800px)")
http://tysonmatanich.github.io/viewportSize/

jQuery: Div height set to default height 16px before breakpoint (only happens on Windows browsers)

I have jQuery on my homepage that sets the height of the FlexSlider based on the height of the window so that the slider is exactly the height of the window, no matter the width. I have a breakpoint at 1025 in the jQuery so that in 1024 and less than 1024 the div #homepage-fold (which includes all the content I want above the fold) and the flexslider images set to the default height of 550px. This works in all browsers I've tested in on my Mac and I can't reproduce the issue on my 13" MacBook Pro Retina but on multiple windows laptops the script seems to disable at 1041px instead of 1024 setting the inline css height of the div to style="height:550px" instead of using a working a script until responsive styles start to kick in at 1024px.
-- I've triple checked all of my media queries and looked in Chrome inspector but it appears the script is setting #homepage-fold height to the default of 550px at 1041< on these certain screens. I can't imagine it's an OS specific issue but for comparison I've used Chrome on both the Mac and Windows 8 and vista machines I've tested on that see the error.
jQuery(document).ready(function($){
// DOM READY
var $window = $(window), // cached
$fold = $('#homepage-fold'),
$slider = $('.flexslider .slides img'),
breakpoint = 1024,
defaultHeight = 550,
resizeTimeout,
callbackDelay = 0; // ms
function setFold(){
if( $window.width() < breakpoint ){
$fold.css('height', defaultHeight );
}
else {
$fold.css('height', $window.height() );
$slider.css('height', $window.height() );
}
}
setFold(); // initial setting
// Attach event
$window.on('resize', function(){
clearTimeout( resizeTimeout );
resizeTimeout = setTimeout(function(){
setFold();
}, callbackDelay );
})
});
Could someone point out any errors in my code or give me an idea for coming up with fix? I'd really appreciate it.
Thanks!
Nick

You know, I just subtracted 16px from the breakpoint and set it to 1008. I figured this would break the slider between 1008 and 1024 but it doesn't seem to and it fixed the problem on windows so I guess I'm good to go. Still would love to know of a real solution or reason for why this happened -- if someone has one please share. Thanks!

To match the width of the window perceived by the css and the width perceived by javascript, you can add a div giving it a width 100% and height 1px, positioning it fixed so that it doesn't affect the regular flow of the rest of the page and then instead of if( $window.width() < breakpoint ) , you could write if( $div.width() < breakpoint ) where $div refers to the div we added above. To hide the div from the page you can use a negative top style attribute.
You could do a similar thing with the height. But since usually there isn't a horizontal scrollbar, css height and javascript height will be the same.
Hope it helps.

document scroll doesn't work in IE

Neither this script:
$(window).scroll(function() {
alert("works");
})
nor this:
$(document).scroll(function() {
alert("works");
})
works in IE 8 and earlier.
I don't know why, could somebody help?

Create jsfiddle and check it in browserstack:
IE8 - window scroll works
IE7 - window scroll works
Check what you don't have javascript errors on page.

Mainly three things you should see
1.If you have given style as
overflow:hidden
2.If you have given height in page percentage.
3.if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason :
IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
Hope this helps...

How do I get actual screen height in an iOS web app

I am trying to determine the actual screen height in iOS.
On a short page. If I use the code below I get an incorrect size.
window.innerHeight
This will return 356 on my iPod touch. This is screen height - URL bar. If I add a CSS rule to the container of my page then it returns the correct number 416.
#container { min-height:600px; }
However, the problem with this solution is it adds a chunk of blank space at the bottom of some pages.
I have tried to fix this by doing the following.
$('#container ').css('height', '800px');
window.scrollTo(0, 1);
$('#container ').css({
'height' : window.innerHeight + 'px'
});
This doesn't work. It doesn't influence the page height at all and I am not sure why. Has anyone solved this problem before?

The window.screen object should contain what you're looking for
window.screen.height