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?
According to http://www.w3schools.com/jsref/prop_win_innerheight.asp, the innerHeight and innerWidth properties are only supported in Firefox. Try screen.height and screen.width.
here's my code for it:
if(navigator.appCodeName == "mozilla")
document.write('<a href="commissions.php?w=' + window.innerWidth + '&h=' + window.innerHeight + '" class="button">Commissions</a>');
document.write('<a href="art.php?w=' + window.innerWidth + '&h=' + window.innerHeight + '" class="button">Art</a>');
document.write('<a href="designs.php?w=' + window.innerWidth + '&h=' + window.innerHeight + '" class="button">Designs</a>');
else //for IE
document.write('<a href="commissions.php?w=' + document.body.clientWidth + '&h=' + document.body.clientHeight + '" class="button">Commissions</a>');
document.write('<a href="art.php?w=' + document.body.clientWidth + '&h=' + document.body.clientHeight + '" class="button">Art</a>');
document.write('<a href="designs.php?w=' + document.body.clientWidth + '&h=' + document.body.clientHeight + '" class="button">Designs</a>');
Did you try screen.height and screen.width?
Getting browser dimensions
Hi, you can use the same code for all major browsers, to get the window's (inner) dimensions:
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 08:03 PM.
Reason: clarify that it's the inner dimensions of the window
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:
Originally Posted by interfacetricks
Of course, you should code in HTML style as well, according to the Doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
If you are dealing with XML files, an XHTML DTD is to be used:
Of course, in this case you should code in XHTML style.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
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.
Browser Dimensions / Document Types
Thanks for the clarification.
I did not know that <!doctype html> was for html 5, but had just been using it as the easiest way to trigger "standards mode" in various browsers.
I just did some quick google and can confirm the following for anyone interested:
- <!doctype html> is indeed the official html5 document type tag.
- It triggers standards mode in many additional browsers I hadn't tested.
Ok, I tried document.documentElement.clientWidth;
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.
I think it's working...thanks.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)