PDA

View Full Version : JavaScript to switch stylesheet for widescreen resolutions

blaness
10-05-2004, 04:39 PM
I am currently developing a site (http://www.studio-4.com/test/index.html) and am having a bit of a problem with the graphics in the tables matching up with the background graphics.

I have determined that in the first few lines of the CSS stylesheet where I set the position of the page is where the problem occurs.

for computers with standard resolutions (800x600, 1024x768, 1280x1024, etc.) setting the top value to 0px lets everything line up. With widescreen displays like the computer that I am developing on which is 1280x854 the top value needs to be 1px for the table to line up.

I imagine handling this with some sort of JavaScript...any suggestions or other ways to handle this problem?
Jon Hanlon
10-05-2004, 06:12 PM
I've done a similar thing with font size.
In the <head> section...

<script language="javascript>
function dynaStyle() {
document.writeln("<style>");
var screenClass = 0;
if (screen.height >= 500) screenClass = 1; // say 800x600
if (screen.height >= 700) screenClass = 2; // say 1024x768
switch (screenClass) {
case 0 : document.writeln(".logonPrompt { font-size: small; ");
document.writeln(" font-family: Helvetica, Arial, Verdana; ");
document.writeln(" color: navy } ");
break;
case 1 : document.writeln(".logonPrompt { font-size: medium; ");
document.writeln(" font-family: Helvetica, Arial, Verdana; ");
document.writeln(" color: indigo } ");
break;
default : document.writeln(".logonPrompt { font-size: large; ");
document.writeln(" font-family: Helvetica, Arial, Verdana; ");
document.writeln(" color: midnightblue } ");
break;
}
document.writeln("</style>");
}

dynaStyle(); // invoke the function
</script>


That should get you started.
blaness
10-06-2004, 11:07 AM
Does this bit of code write to a linked stylesheet?

I have a index.html page that redirects to an index.php page, I was hoping to detect the aspect ratio of the user's machine and write to the stylesheet just once so I didn't have to add javascript to all of my pages.
blaness
10-06-2004, 11:21 AM
...Or would it be easier to have two stylesheets defined. One for 4:3 aspect ratios and one for widescreen ratios, and select the stylesheet at the beginning of each page with a script.

Any thoughts?