Ipad: window.height() give bad value in Safari but not in Chrome - javascript

I have to get the window's height on Ipad to display something in the full height.
I have done this example page: http://daviddarx.com/stuffs/work/biceps/ipad/
Here is my js code, very simple, that only write the window.height() in the body:
generalResizeListener=function(){
screenW=$(window).width();
screenH=$(window).height();
$("body").html(screenH)
console.log(screenH);
}
$(window).resize(generalResizeListener);
There is two problem, on my ipad2 with IOS7:
-In safari, but not in Chrome, the displayed value don't fit to the actual page height (I checked on screenshots)
-In Safari always, even if there isn't anything in the page, the page's height is bigger than the viewport and I can scroll down for something like 10-20px. That is the biggest probleme.
Do you know why is this happening? I haven't any css files in my demo page, so I really don't understand.
Thank you in advance for your help!
David
#Gal V:
I already implemented this "hacky solution". Thank you for your answer, anyway! I looked a bit more in google and it seems to be a specific bug of safari IOS7:
-https://discussions.apple.com/message/23150650#23150650
-Scrolling problems on a web page with fixed header and footer in iOS7
-iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

Safari browser on iOS has a bottom bar (unlike chrome) that is being calculated inside the window height while it isn't really part of the window/page.
you need to detect cases (with user-agent) where the client uses Safari browser on iOS device, and then you need to set the height of the body (with javascript) to $(window).height() - bar_height, and it should solve your problem.
hope that helps.

My solution is this...
Insert this on your page:
<div id="win-height" style="position: fixed;left: 0; top: 0; bottom:0; width: 0; z-index: "></div>
instead of,
$(window).height()
to get the window height, use,
$('#win-height').height()
Goodluck!

I used this JavaScript solution for solving that problem:
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
var fixViewportHeight = function() {
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}.bind(this);
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}

Related

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.

Cordova/Phonegap 3.1 keyboard (still) overlays focused form fields - iOS 7

I just upgraded from cordova 3.0 to 3.1 and I'm still experiencing a very disturbing issue (which still exists when playing with KeyboardShrinksView preference).
Whenever I'm focusing an element (input/textarea) which triggers the keyboard opening, the element gets hidden behind the keyboard and I need to scroll down (using webkit-overflow-scrolling for scrolling by the way) in order to see the element and its content.
When KeyboardShrinksView is set to true the page won't even scroll, making it even worse.
Any solutions in order to fix this issue? I've seen a few questions and bug reports but with no working solutions (or solutions at all).
Playing with the "fullscreen" preference won't solve the problem.
Just had a very similar problem to this. Some of the hacks found on this site did work, but had nasty side effects (such as making a mess of scrolling or CSS layout). Finally came up with a brand new stupid hack.
Viewport meta tag:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />
JavaScript run after load:
document.body.style.height = screen.availHeight + 'px';
And that's it. Works on iOS 7 and I have no idea why.
Finally fixed the problem with the help of the following plugin: jQuery scrollTo plugin
Whenever i'm focusing on an element i'm triggering a focus event which does the following calculations and updates the scroll position:
updateScroll: function(e){
var el = $(e.currentTarget);
var offset = -$(".scrollerWrap").height() + $(el).height();
$(".scrollerWrap").scrollTo(el,{offset: offset});
}
Sticks the bottom of the input/textarea to the top of the keyboard. Works like a charm, even if the solution needs to go through that bit of JavaScript.
Well, logically the view should move up when the keyboard opens. I have faced a similar issue with iOS7 and to fix it I have applied few css tweaks.
Tweaks were applied on the wrapper class/id which is containing the content of the app.
position: relative;
overflow: hidden;
height: 460px;
width: 320px;
Note - Height and width are judged dynamically depending on the device height and width
height = window.innerHeight
width = window.innerWidth
By using jQuery selectors height and width are appended to wrapping class/id.
Works for me.
document.body.style.height = (screen.availHeight - 100) + 'px';
I think the issue here originates from Framework7.
document.body.style.height = window.outerHeight + 'px';
The above code placed in my index.js file worked like charm.

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

Jquery $(window).height() function does not return actual window height

I have a page that I need to dynamically load ajax content when the user scrolls to the bottom. The problem is that JQuery is not returning the correct window height. I have used this function before and have never seen it fail, but for some reason it will return the same value as the document height. I have the test page here: bangstyle.com/test-images
I have coded the alert to display at page load, and also whenever the user scrolls 500px below the top:
function scroller() {
if($(window).scrollTop() > 500){
delay(function(){ //200ms wait
pagecounter++;
sideshow();
alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());
return false;
}, 200 );
}
}
I tried posting this before but I deleted it as I didn't get a solution. I hope it is ok to post a link to my test page. BTW I have tested this on Mac Safari and Mac FF. I have run this same code on other pages and it works fine. I feel there must be something in the dom of this page that causes JS to fail, but no idea what that would be.
Look at your HTML souce code.
The first line should be <!DOCTYPE html> and you have <style> tag instead.
So it seems that your document is running in Quirks Mode and jQuery can't calculate correct window dimensions.
//works in chrome
$(window).bind('scroll', function(ev){
//get the viewport height. i.e. this is the viewable browser window height
var clientHeight = document.body.clientHeight,
//height of the window/document. $(window).height() and $(document).height() also return this value.
windowHeight = $(this).outerHeight(),
//current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
scrollY = $(this).scrollTop();
if( windowHeight - clientHeight === scrollY ){
console.log('bottom');
}
});
I had the same problem.
I've found some things:
1) the problem happens when you try to get the actual height before document is completed rendered;
2) the problem happens in google chrome when you does not use corret DOCTYPE (mentioned above)
3) it always happens in google chrome even after the document is rendered completly.
For google chrome, I've found a workaround here: get-document-height-cross-browser
I'm using this solution only for google chrome and it resolved my problem, I expect helps someone that still have the problem.
This is an old question but I recently struggled with not getting the correct window height in IE10 by a few pixels.
I discovered that IE10 applies a 75% zoom by default and that screws the window and document measurements.
So, if you're getting wrong width or height, make sure zoom is set to 100%.
Did some looking around and stumbled upon this, don't know if it helps but it's worth bringing up.
why is $(window).height() so wrong?
Since jquery (and dom in general) is not calculating sizes correctly in quirksmode, two solutions:
Add doctype html at the top of your page (like mentioned in "correct" answer), or
Use window.innerHeight, window.innerWidth if first option is not an option.
Hope it helps.
I moved my scripts from to footer and that resolved it for me.

set body width in px?

how can you set the body width in px in javascript?
has to work in chrome, ff and our beloved ie
edit:
it has to be used when a dialog box pops up and the horisontal scrollbar is hidden.. then I have to compensate for the missing 16px.. else the whole site is moving slightly to the right
maybe you have better solution to the problem? I don't know :)
document.body.style.width = '800px';
[Edit]
If you need to adjust from the existing width, per your edit, you could do something like this:
var adjustBodyWidth = function(nPixels) {
var m, w = document.body.style.width || document.body.clientWidth;
if (m=w.match(/^(\d+)px$/)) {
document.body.style.width = (Number(m[1]) + nPixels) + 'px';
}
};
If the problem is the scroll bar coming up and disappearing depending on the page's contents, I would consider forcing the page to display a (disabled) scroll bar even when there's nothing to scroll. This can be done through CSS:
body { overflow-y: scroll }
it works in all major browsers. It doesn't in IE, but that doesn't matter because IE shows the desired behaviour automatically.

Categories

Resources