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 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Background based on Resolution with Javascript

    I'm a complete idiot with javascript im trying execute a specific .css file base on the user's screen resolution. I have this code which i thought should work. PLEASE HELP

    Code:
    <script type="text/javascript">
    <!--
    
    var width = screen.width; 
    var height = screen.height;
    
    if ((width==800) && (height==600)){document.write('<link rel="stylesheet" type="text/css" href="/includes/800x600.css" />'); } 
    if ((width=1024) && (height==768)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1024x768.css" />'); } 
    if ((width==1920) && (height==1080)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1920x1080.css" />'); } 
    if ((width==1280) && (height==768)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1280x768.css" />'); } 
    if ((width==1440) && (height==900)){document.write('<link rel="stylesheet" type="text/css" href="../includes/1440x900.css" />'); } 
    --></script>

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    905
    Thanks
    177
    Thanked 104 Times in 104 Posts
    Hi

    if ((width=1024)

    should be

    if ((width==1024)


    also are you missing .. from this line
    href="/includes/800x600.css" />

    should be
    href="../includes/800x600.css" />

    LT
    Last edited by low tech; 07-22-2012 at 01:31 AM.

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    948
    Thanks
    0
    Thanked 130 Times in 129 Posts
    it is better to use appendChild() than document.write():

    Code:
    function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}
    Code:
    <script type="text/javascript">
    <!--
    
    var width = screen.width; 
    var height = screen.height;
    
    if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');} 
    if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}  
    if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');} 
    if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');} 
    if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');} 
    --></script>
    The problem with your code is that it only covers 5 different resolutions and no alternative if none of the requirements is met.

    I will suggest that you include a default stylesheet that will be be used if none of the specified resolutions are used:
    Code:
    <script type="text/javascript">
    <!--
    
    var width = screen.width; 
    var height = screen.height;
    
    if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');} 
    else if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}  
    else if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');} 
    else if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');} 
    else if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');} 
    else{ImportStyleSheet('../includes/OtherResolutions.css');} 
    --></script>

  • Users who have thanked Lerura for this post:

    low tech (07-22-2012)

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    If you just want to change the background image and maybe a couple of other things just use this line.
    Code:
    document.body.style.background=, or width, etc.
    With your if statements of course. It's not so easy to change stuff in the head of the document.

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Lerura View Post
    it is better to use appendChild() than document.write():

    Code:
    function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}
    Code:
    <script type="text/javascript">
    <!--
    
    var width = screen.width; 
    var height = screen.height;
    
    if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');} 
    if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}  
    if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');} 
    if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');} 
    if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');} 
    --></script>
    The problem with your code is that it only covers 5 different resolutions and no alternative if none of the requirements is met.

    I will suggest that you include a default stylesheet that will be be used if none of the specified resolutions are used:
    Code:
    <script type="text/javascript">
    <!--
    
    var width = screen.width; 
    var height = screen.height;
    
    if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');} 
    else if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');}  
    else if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');} 
    else if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');} 
    else if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');} 
    else{ImportStyleSheet('../includes/OtherResolutions.css');} 
    --></script>
    I copied and paste the code exactly how u had it and it still did not work. this is wot i did.

    Code:
    <script type="text/javascript">
    <!--
    function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}
    
    
    var width = screen.width; 
    var height = screen.height;
    
    if ((width==800) && (height==600)){ImportStyleSheet('../includes/800x600.css');} 
    else if ((width==1024) && (height==768)){ImportStyleSheet('../includes/1024x768.css');} 
    else if ((width==1366) && (height==768)){ImportStyleSheet('../includes/1366x768.css');}   
    else if ((width==1920) && (height==1080)){ImportStyleSheet('../includes/1920x1080.css');} 
    else if ((width==1280) && (height==768)){ImportStyleSheet('../includes/1280x768.css');} 
    else if ((width==1440) && (height==900)){ImportStyleSheet('../includes/1400x900.css');} 
    else{ImportStyleSheet('../includes/1366x768.css');} 
    
    --></script>
    The script is picking up my current screen resolution which is 1366x768, however it is not executing the .css

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Hi bitejones,
    I change your code from if statement to switch statement, it work well.

    Code:
    <script type="text/javascript">
    <!--
    function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}
    
    //function ImportStyleSheet(File){ alert(File); }
    
    var width = screen.width; 
    var height = screen.height;
    
    switch(true){
    case ((width == 800) && (height == 600)):
           ImportStyleSheet('../includes/800x600.css');
           break;
    
    case ((width==1024) && (height==768)):
           ImportStyleSheet('../includes/1024x768.css');
           break;
    
    case ((width==1366) && (height==768)):
           ImportStyleSheet('../includes/1366x768.css');
           break;
    
    case ((width==1920) && (height==1080)):
           ImportStyleSheet('../includes/1920x1080.css');
           break;
    
    case ((width==1280) && (height==768)):
           ImportStyleSheet('../includes/1280x768.css');
           break;
    
    case ((width==1440) && (height==900)):
           ImportStyleSheet('../includes/1400x900.css'); 
           break;
    
    default :
           ImportStyleSheet('../includes/1366x768.css');
    }
    
    --></script>

  • Users who have thanked Richter for this post:

    bitejones (07-22-2012)

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Richter View Post
    Hi bitejones,
    I change your code from if statement to switch statement, it work well.

    Code:
    <script type="text/javascript">
    <!--
    function ImportStyleSheet(File){var cssNode=document.createElement('link');cssNode.type='text/css';cssNode.rel='stylesheet';cssNode.href=File;document.getElementsByTagName("head")[0].appendChild(cssNode);}
    
    //function ImportStyleSheet(File){ alert(File); }
    
    var width = screen.width; 
    var height = screen.height;
    
    switch(true){
    case ((width == 800) && (height == 600)):
           ImportStyleSheet('../includes/800x600.css');
           break;
    
    case ((width==1024) && (height==768)):
           ImportStyleSheet('../includes/1024x768.css');
           break;
    
    case ((width==1366) && (height==768)):
           ImportStyleSheet('../includes/1366x768.css');
           break;
    
    case ((width==1920) && (height==1080)):
           ImportStyleSheet('../includes/1920x1080.css');
           break;
    
    case ((width==1280) && (height==768)):
           ImportStyleSheet('../includes/1280x768.css');
           break;
    
    case ((width==1440) && (height==900)):
           ImportStyleSheet('../includes/1400x900.css'); 
           break;
    
    default :
           ImportStyleSheet('../includes/1366x768.css');
    }
    
    --></script>

    Thank you worked well indeed!! Thanks to every one who offered to help as well it was much appreciate!

  • #8
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    905
    Thanks
    177
    Thanked 104 Times in 104 Posts
    Hi

    I think you should use the "thank you button" on Lerura's post #3 since the script worked perfectly well and it is the appendChild script you are using now.

    Just my thought

    LT


  •  

    Tags for this Thread

    Posting Permissions

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