www.webdeveloper.com
Results 1 to 10 of 10

Thread: innerHeight property

  1. #1
    Join Date
    Mar 2010
    Posts
    55

    innerHeight property

    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?

    mike

  2. #2
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    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.

  3. #3
    Join Date
    Mar 2010
    Posts
    55
    here's my code for it:
    Code:
    <script type="text/javascript" >
    	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>');	
    	}
    </script>

  4. #4
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    Did you try screen.height and screen.width?

  5. #5
    Join Date
    Nov 2010
    Posts
    86

    Getting browser dimensions

    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:

    http://webinterfacetricks.com/dimensions/

    Note this wasn't tested in ie6 (ie6 is three versions and five years out of date and has only about 5&#37; 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

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by interfacetricks View Post
    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.

  7. #7
    Join Date
    Nov 2010
    Posts
    86

    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.
    http://www.w3.org/TR/html5-diff/#doctype

    - It triggers standards mode in many additional browsers I hadn't tested.
    http://themaingate.net/dev/html/all-...s-doctype-html

  8. #8
    Join Date
    Mar 2010
    Posts
    55
    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.

  9. #9
    Join Date
    Nov 2010
    Posts
    86
    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.

  10. #10
    Join Date
    Mar 2010
    Posts
    55
    I think it's working...thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles