Hey all, I've never posted in the Website Design forum before, but i had a useful script I thought I'd share with you. This is a relatively simple JavaScript which lets you specify different .css style sheets to correspond with different screen resolutions.
Put the following code between the <head> </head> tags of your site:
<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>
I use this to adjust table, image, font size to make full use of screen real estate at any resolution. Sometimes at 800x600 and smaller I'll lose an advertising banner in liu of maintaining the form and function of my site.
Put the following code between the <head> </head> tags of your site:
<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>
I use this to adjust table, image, font size to make full use of screen real estate at any resolution. Sometimes at 800x600 and smaller I'll lose an advertising banner in liu of maintaining the form and function of my site.
