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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script to pick css file - help

    I'm trying to pick a style sheet based on screen size. (one of 2)

    What it should do is be used to place a menu on the side of the page. The menu is always going to the top left corner of the screen and doesn't scroll around. The menu works when the CSS is in the main page. So last resort would be to put the CSS code in the page in the javascript.

    The menu is
    Code:
    <div id="outofnormal">
    Here is the javascript to pick the size. It works when I use just text, so the logic works, and the webpage loads the right background when I leave it as is, but the menu is always in the corner.

    Code:
    <SCRIPT language="JavaScript">
    <!--
    if (screen.width>=1024){
    document.write('<link rel="stylesheet" type="text/css" href="menucode/1280.css" />');
    
    }else{
    document.write('<link rel="stylesheet" type="text/css" href="menucode/800.css" />');
    }//-->
    </SCRIPT>
    The CSS is located in the menucode file.
    This is the code.
    Code:
    	<style type="text/css" media="screen">		
    		#outofnormal
    		{
    			position: fixed;
    			left: 20px;
    			top: 25px;
    			width: 150px;
    			padding: 5px;
    			background-color: #FFFFFF;
    		}
    
    		
    		html, body {margin:0; padding:0; left:0; margin-top:0; padding-top:0;}
    		
    body {
    	background-color: #990000;
    }
    </style>

  • #2
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I realize background-color is repeated in the CSS. It's been remvoed. And the menu code is just to show I'm calling it properly. When I put just the CSS code in the webpage it works perfertly. Minus the resolution issue.

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Resolved it by using the following code.

    Not exactly the answer I hoped for, be nicer to have CSS outside the HTML, but I'll try doing that by removing white spaces.

    Code:
    <SCRIPT language="JavaScript">
    <!--
    if (screen.width<=1024)
    {document.write('<style type="text/css" media="screen">	#outofnormal{position:fixed;left: 10px;top: 25px;width: 150px;padding: 5px;}html, body {margin:0; padding:0; left:0; margin-top:0; padding-top:0;}body{background-color:#990000;}</style>');
    }
    else
    {document.write('<style type="text/css" media="screen">	#outofnormal{position:fixed;left: 150px;top: 25px;width: 150px;padding: 5px;}html, body {margin:0; padding:0; left:0; margin-top:0; padding-top:0;}body{background-color:#990000;}</style>');
    }
    //-->
    </SCRIPT>


  •  

    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
    •