JS/Jquery syntax for IE Window width and height - javascript

I'm measuring the window and document width and height via the following properties :
//measure the window and document height and width dynamically
var w = $(window).width();
var h = $(window).height();
var wd = $(document).width();
var hd = $(document).height();
Works fine in firefox but IE kicks up a fuss. Is there an alternative to this syntax that works in IE?
JS error recieved - could not get the position property. Invalid Argument

Works for me in both FF and IE, check for yourself here.

i just figured out, whats the "bug" in the code.
Firefox is able to get width and height, whereever you put your javascript.
But IE is only able to get this values when the script is within the body element.
I've had the same problem here and was trying about an hour.
I noticed, that the jsbin script is inside the pagebody and moved my javascript into the body and wow - it works in IE :-)
Best regards

I had the same problem and i solve it.
The question was related with IE being in Quircks mode, because i had in the begining of the HTML some non valid tags (i copy the source from a .aspx page, and i left there the <%page ..%> directive.
When IE finds some strange tag it enters quircks mode, and some things work diferent.
When i deleted the strange tag, the $(window).width(); stuff begins to work.
Hope this helps someone in the future with my same problem. :)

Related

CSS / jQuery: Placing items at window height causing layout issues

Currently I am using jQuery to position a few elements relative to the size of the window. While this works perfectly if the window is full size, if I have the debugger open or a shorter window, the resulting layout is incorrect.
Q: Is there anyway to place things relative to the maximum possible window height, rather than the current window height?
jQuery
var navbarHeight = parseInt($(".navbar").css("height"));
$("#home-part-1").css("height", $(window).innerHeight() - navbarHeight);
$("#home-part-2").css("height", $(window).innerHeight());
$("#home-part-3").css("height", $(window).innerHeight());
$("#divider-1").css("top", $(window).innerHeight() - navbarHeight);
$("#divider-2").css("top", (2 * $(window).innerHeight()) - navbarHeight);
It is bad practice to try to lay out your page this way. There is not a lot I can do to help with the solution you are specifying. Its not going to work that way. Take a look at this though: http://alvarotrigo.com/fullPage/#firstPage . That might help you.

outerHeight in Chrome giving wrong value, OK in IE and FireFox

In the jquery.smartWizard plugin, there is a function called fixHeight which adjusts the height of a wizard step. This is used when a step is first displayed or when revealing hidden divs within the step. It works fine in IE (at least in IE 11 on Win8.1) and in FireFox. But, in the latest version of Chrome (Version 40.0.2214.94 m) the outerHeight is a much smaller value than it should be, by over 100 pixels or more.
This is the function, out of the box:
SmartWizard.prototype.fixHeight = function(){
var height = 0;
var selStep = this.steps.eq(this.curStepIdx);
var stepContainer = _step(this, selStep);
stepContainer.children().each(function() {
if($(this).is(':visible')) {
height += $(this).outerHeight(true);
}
});
// These values (5 and 20) are experimentally chosen.
//stepContainer.height(height);
//this.elmStepContainer.height(height + 12);
stepContainer.animate({ "height": height - 12 }, 500);
this.elmStepContainer.animate({ "height": height }, 500);
alert(window.outerHeight);
}
I modify the final steps to add the animation. With or without Chrome fails.
EDIT:
Here is a fiddle that demonstrates the difference between IE and Chrome. Click member, then click non-member. You will see that second set of values is different in each browser.
http://jsfiddle.net/xjk8m8b1/
EDIT2:
Here is another fiddle that shows both browsers get the same values for height until you try and calculate the visible elements. Then Chrome is way off.
http://jsfiddle.net/xjk8m8b1/2/
While not the best solution, I did figure out the issue. Firefox and IE are both adding up the height of everything in the div, include break tags and anything that creates vertical space. Chrome, in my opinion is broken, and not adding up these extra elements! It is not returning a true value for consumed vertical space.
My workaround is to wrap the contents of the div inside another dummy div. This way jquery looks at the height of that first child div and correctly returns the height.
I have the same problem, a ScrollBar is in the middle, the StepContainer never fixes the height.
Then I change this line in jquery.smartwizard.js:
$this.elmStepContainer.height(_step($this, selStep).outerHeight());
To this:
$this.elmStepContainer.height(_step($this, selStep).outerHeight() +20);
20 is enough for me, and my problem is gone.

Iframe not resizing IE10

I found this bit of popular javascript doesn't work in IE10. I didn't create it but am maintaining a site that implements this. Was wondering if anyone else came across it. It seems the Document.getElemsntById('frame').onload event isn't working but the window.resize event does. Meaning on initial frame load it doesn't re-size but when I do anything to the window it does. Its just a pdf opening in an Iframe. Seems fine in all browsers except IE10 , on both Win 7 and 8 machines.
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
height -= 250;
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
Sorry if I was too vague in the question. I did Google this and found similar situations but not exactly like mine. I alerted out the height var and checked with a conditional and like I mentioned the browser would only run the function on resize, all other browsers were fine. I don't know why but I decided to add empty parenthesis to the call in on the onload event and it worked.
document.getElementById('frame').onload = resizeIframe();

Truly cross-browser way to get document height?

I have a control contained in an iframe on a page of my ASP.NET web application.
Control changes its vertical size correspondingly to what user selects on it (some elements get in, others get out). So, I have to set the iframe size precisely to get the whole control shown and not to make gap between the iframe and the elements below it.
Somewhere on the web I have found a way to get the document height in a cross-browser way:
function getDocHeight(document) {
return Math.max(
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}
On self.document.body.onload on the control page, hence, I call this function:
function adjustIframeHeight() {
var iframe = window.parent.document.getElementById(window.frameElement.id);
var iframeHeight = getDocHeight(iframe.contentWindow.document);
iframe.style.height = iframeHeight + "px";
}
The problem is it works fine e.g. in Firefox, but in some cases bottom sections of the control are cutoff in Chrome and IE for example.
Is there some truly cross-browser way to get this height, or I am doing something else wrong?
Thank you for the time
I'd use something like jQuery to help out with this (since using height methods seem to vary from browser to browser) and here is some jQuery code that could help out:
$(document).height(); // height of HTML doc

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.

Categories

Resources