Simple screen and browser resolution detection fails me

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Jafil21
Forum Newbie
Posts: 13
Joined: Sun Oct 11, 2009 5:14 am

Simple screen and browser resolution detection fails me

Post by Jafil21 »

Hello,

I have the following simple html + javascript code fragment in my webpage:

Code: Select all

 
<link rel="stylesheet" id="MyTag" type = "text/css" media = "screen" />
 
<!--The following script detects the user agent's browser and resolution and fixes screen issues. -->
<script language = "javascript">
function LoadStyle() {
    var browser = navigator.appName;
    if(screen.width > 1280 && screen.height > 1024 && browser = "Microsoft Internet Explorer"){
        MyTag.href = "large_ie.css";
    }
    else{
        MyTag.href = "default.css";
    }   
}
</script>
 
</head>
<body onload="LoadStyle()">
<div class = "allcontent">
    <div class= "header">
 
The purpose of the above code is to help me link to different external stylesheets if the user views my page through Internet Explorer with a screen resolution greater than 1280 x 1024 pixels. The reason for this is that my entire content is built above a 1280 x 1024 background, and the div containing that background has the following style:

Code: Select all

 
.allcontent {
    background: url(images/gone_clubbing-1280x1024.jpg) bottom;
    width: 1280px;
    height: 1024px;
    [b]margin: 0px auto;[/b]
}
 
Note the emphasized "margin" property. Apparently Internet Explorer thinks differently about what "auto" should mean for the left margin, so, whenever I end up viewing my page through IE from a computer whose screen resolution is greater than 1280 x 1024, the entire "allcontent" div (which represents my page's entire content) is stuck to the upper left corner of the viewport. Through both Opera and Firefox, I get a nice balanced view, with the background image in the center of the viewport and a black background to the left, right, and bottom. To solve this, I wrote the "large_ie.css" stylesheet, which changes the value for "margin" property of the "allcontent" div to "0px 20%" or "0px 25%", etc.

The problem is that the javascript code I embedded does not work correctly, because when I reload my page, it tends to find no stylesheet, and thus display quite uglily. I've debugged it with alert()s and it seems that in both my computers the code reaches the "else" clause, which is very logical, since I am currently posting from a Debian Linux system with Iceweasel, Konqueror, Opera and no Explorer, and my other computer is a desktop with Windows 7 and Internet Explorer 8, but with a resolution of 1280 by 1024, which is marginably handled by the "else" clause as well.

Is there anything strikingly wrong with the javascript code I've included? I have no knowledge of the language whatsoever (yet) so I just googled my way to a method that would help me detect the client's screen resolution and browser.

Thank you for your time and interest.
User avatar
akuji36
Forum Contributor
Posts: 190
Joined: Tue Oct 14, 2008 9:53 am
Location: Hartford, Connecticut

Re: Simple screen and browser resolution detection fails me

Post by akuji36 »

Here's a little help from css...
take a look at the following link---

http://www.devarticles.com/c/a/PHP/PHP- ... eneration/

thanks

Rod :P
Post Reply