Hi, I have a website which displays photos. I want the photos to be resized depending on the innerWidth and innerHeight of the browser. I have my resolution set to 1024x768. So if you go to http://www.mikeglaz.com/wujek/ and click on 'Commissions' my 'w' variable in the URL contains 1024 but for some reason the 'h' variable displays 50. If I click on 'Commissions' one more time then it correctly displays h=602. Anyone know why this is happenning?
Hi, you can use the same code for all major browsers, to get the window's (inner) dimensions:
document.documentElement.clientWidth;
and
document.documentElement.clientHeight;
For this to work you need to force various browsers into "standards mode", which you can do by putting <!doctype html> at the start of your code (before the <html> tag).
I've put up an example page that shows the document, window and screen dimensions and updates them if you resize the browser window. You can check it out here:
Note this wasn't tested in ie6 (ie6 is three versions and five years out of date and has only about 5% of browser share. In my opinion it's time for all website developers to abandon ie6 unless they're specifically required to support it.)
Last edited by interfacetricks; 04-26-2011 at 07:03 PM.
Reason: clarify that it's the inner dimensions of the window
For this to work you need to force various browsers into "standards mode", which you can do by putting <!doctype html> at the start of your code (before the <html> tag).
Agree. But there is a specification to be made: <!doctype html> is the HTML5 Doctype, and it is not the only one. There are Doctypes for HTML 4.01 and XHTML as well. Unless you have HTML5 specific features, it is better to use other DTD. Most of the time, a HTML 4.01 Strict Doctype is more than enough:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Of course, you should code in HTML style as well, according to the Doctype.
If you are dealing with XML files, an XHTML DTD is to be used:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>
Of course, in this case you should code in XHTML style.
Well, it is true that the HTML5 Doctype <!doctype html> permits both HTML strict or XHTML strict types of coding. But, as long as HTML5 is still in the working draft stage, it is not an official standard, thus it should be used only if absolutely necessary.
Ok, I tried document.documentElement.clientWidth;
and
document.documentElement.clientHeight;
but I still have the same problem when I click on my 'Commissions' link: http://www.mikeglaz.com/wujek/index.php
Sometimes it comes up with the correct w=1280 h=858 but sometimes it comes up as w=1280 h=69 and it seems random.
I should have mentioned that the <!doctype> tag must be the very first thing on the page. There are some numbers before it on your page, and this prevents standards mode being triggered.
Reply With Quote
Originally Posted by interfacetricks
Bookmarks