Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do i make this script dynamic? (noob)

    Total javascript noob here, but managed to get this working:

    Code:
    $(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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    One way:

    Code:
    <body onload="gubbins( );" onresize="gubbins( );">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •