moist_hat
08-27-2011, 07:52 AM
Total javascript noob here, but managed to get this working:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect1024.css"});
}
else
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect800.css"});
}
if ((screen.width>=1280) && (screen.height>=1024))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detectlarge.css"});
}
});
Like i said, its working fine. However i was hoping to make it also work on the fly, so if the user resizes the window, the different stylesheets are used.
Ive been told to: 1. Put the working gubbins into a separate function and 2. Call the function from both load and resize events - But i dont know how to do this.
Any help would be really appreciated!
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect1024.css"});
}
else
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect800.css"});
}
if ((screen.width>=1280) && (screen.height>=1024))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detectlarge.css"});
}
});
Like i said, its working fine. However i was hoping to make it also work on the fly, so if the user resizes the window, the different stylesheets are used.
Ive been told to: 1. Put the working gubbins into a separate function and 2. Call the function from both load and resize events - But i dont know how to do this.
Any help would be really appreciated!