Changing css file according to resolution with javascript

Question

I found it on website but for me it seems doesn't work. The problem is that css doesn't change or changes very fast all i can see is black flash and blank page(http://gino.net16.net/inde.php it can be clearly see with firefox).Since i have no javascript skills , so i don't know what's wrong.

Main file

<html>
<head>
      <title>my title</title>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function redirectCSS() {

if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
// End -->
</script>      

</head>
<body onLoad="redirectCSS()">

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

css style file

@charset "utf-8";
/* CSS Document */

body {
    background-color: #2a2725;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0px 0px 1px #2a2725;
    color: #fff;
}
/* }}} END TableSorter */

It seems work on jsfiddle : http://www.jsfiddle.net/vLy3p/ . — Eray, Jan 29 '11 at 20:56
Google for "CSS media queries" -- there's are easier ways to do this! — Pointy, Jan 29 '11 at 21:00

score 3 · Answer 1 · answered Jan 29 '11 at 22:57

3

Try using CSS Media Queries, they do exactly what you want :)

answered Jan 29 '11 at 22:57

Florian

3,145
1
27
38

score 1 · Answer 2 · edited May 23 '17 at 11:47

You are overwriting the content of the page. document.write after onload overwrites the whole page. Instead of putting it in a function, you need to execute the JavaScript in the header while the page is loading.

<script type="text/javascript">
if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
</script>

Some more remarks:

1) Remember to incude a "general" stylesheet without using JavaScript, for the users and browsers who don't want to or can't support JavaScript.

2) language="JavaScript" is out-of-date. Use type="text/javascript" instead.

3) It's no need to "comment out" the JavaScript

4) Keep in mind that the screen size has nothing to do with the view port (browser window) size. No everyone maximizes their browser window.

5) And most importantly: There is no real reason to use JavaScript for this anymore. Unless you really, really, really need to support IE, then you can use CSS3 Media Queries. See this question for an example: Fluid layouts with CSS

point (2) - really, the "type" attribute is also unnecessary, and lots of luminaries (e.g. Crockford) recommend always leaving it off, as it's just a possible source of error (a typo makes a script unexecutable!) with no real benefit. — Pointy, Jan 29 '11 at 21:13

score 0 · Answer 3 · edited Oct 06 '12 at 09:55

Not sure that it works well, in some cases you always will have a problem with your layouts. Standard declaration for css:

link rel="stylesheet" type="text/css" href="css/style.css"

link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"

link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)"
        href="css/medium.css"

link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"

Browser will change a view even when you resize it.

mplungjan · Answer 4 · 2011-01-29T21:12:54.793

You may NEVER do a document.write after page load. You need to call the function inline like this (and it helps if you have different css files too)

<html>
<head>
      <title>my title</title>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function redirectCSS() {

if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='small.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='medium.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='large.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
redirectCSS()
// End -->
</script>      

</head>
<body >

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

I would personally do this if I had to do it:

<html>
<head>
      <title>my title</title>
<link href='style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript"><!-- Begin
var css = "";
if (screen.width < 800) css='small.css';
else if (screen.width < 1024)  css='medium.css';
else css='large.css';
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />");
// End -->
</script>      

</head>
<body >

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

Changing css file according to resolution with javascript

4 Answers4