Hi All,

I would like to have my webpage use different css files based on the resolution of the screen that they are being viewed on. I'm working on the snowleopard wiki server.

I have an external javascript file, which checks for the resolution and then loads the various css files.

My javascript file looks like this:

if(window.Toolbar)
{

if(screen.width >= 2560)
{
Toolbar.finalWidth = 1520;
<link href = "./screen.css" rel = "stylesheet" type = "text/css">
}

if((screen.width >= 1680) && (screen.width <2560)
{
Toolbar.finalWidth = 1320;
<link href = "./screen1680/screen1680.css" rel = "stylesheet" type = "text/css">
}

else
{
Toolbar.finalWidth = 700;
<link href = "./screen800/screen800.css" rel = "stylesheet" type = "text/css">
}

};

The toolbar's width changes when I view at the different screen resolutions, but the stylesheet does not get loaded dynamically.

I have scoured the web and found another script that would help doing that from this website, but I haven't been successful in implementing it right. This is available at:

<script type="text/javascript">
function getcss(cssfile){
loadcss = document.createElement('link')
loadcss.setAttribute("rel", "stylesheet")
loadcss.setAttribute("type", "text/css")
loadcss.setAttribute("href", cssfile)
document.getElementsByTagName("head")[0].appendChild(loadcss)
}
if(screen.width <= '800')
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)
{
getcss('800x600.css')
// Defines the .css file you want to load for this range (800x600.css)
}
else if(screen.width > '800' && screen.width < '1280')
// This time we're targeting all resolutions between 800 and 1280 pixels wide
{
getcss('1024x768.css')
//And we want to load the .css file named "1024x768.css"
}
else if(screen.width > '1024' && screen.width < '1600')
//Targeting screen resolutions between 1024 and 1600px wide
{
getcss('1280x1024.css')
//Load 1280x1024.css
}
else
{
getcss('1280x1024.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css
}
</script>

Again, I modified this to an external javascript file by removing the <script> tag.

Can somebody please tell me what I am doing wrong in either of these approaches? Your help is much appreciated! Thanks!