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
    851
    Thanks
    172
    Thanked 93 Times in 93 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 12:31 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    905
    Thanks
    0
    Thanked 118 Times in 117 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
    1,915
    Thanks
    15
    Thanked 227 Times in 227 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
    851
    Thanks
    172
    Thanked 93 Times in 93 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
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.


  •  

    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
    •