...

View Full Version : Script to pick css file - help



mgent
10-01-2008, 04:19 AM
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

<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.


<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.


<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>

mgent
10-01-2008, 04:45 AM
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.

mgent
10-01-2008, 04:59 AM
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.



<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum