Easy Javascript Question

**WxGuy1** · January 22, 2004

Ok all... I'm not very javascript-skilled. So I'm wondering if someone out here can lend me a hand...

I want to load a particular css style-sheet depending upon the screen resolution of the visitor. For example, I'll have one style sheet for those w/ < 768x1024 and another stylesheet for those w/ a screen resolution greater than that. This way I can layout my pages with fixed widths, yet still allow some screen efficieny (e.g. to minimize both lots of open spaces for the larger resos and to minimize the need for scrolling for those w/ lower resos). I was using a script similar to this, except it would maximize the browser if it were smaller than a given dimension... e.g:

><script language="JavaScript"> 

if (screen.availHeight <= 768 || screen.availWidth <= 1024) {
 if (navigator.appName=="Netscape") {
  if (top.screenX>0 || top.screenY>0) self.moveTo(0,0);
  if (top.outerWidth < screen.availWidth)
     top.outerWidth=screen.availWidth;
  if (top.outerHeight < screen.availHeight) 
     top.outerHeight=screen.availHeight;
 }
 else {
   self.moveTo(0,0);
   self.resizeTo(screen.availWidth,screen.availHeight);
 }
 alert("Your web browser has been maximized for better viewing of Tornado Central."); 
}


</script>

Can someone help me out? Thanks!!!!!

Jeff Snyder

www.tornadocentral.com

**SEO** · January 22, 2004

I want to load a particular css style-sheet depending upon the screen resolution of the visitor.

This should do the trick:

><script language="javaScript" type="text/javascript">

var width = screen.width;
var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+((!(1152-width))*4)+((!(1280-width))*5)+((!(1600-width))*6));

if(!(res)) res = 1;
if (res=='1') {window.location='640.html'}
if (res=='2') {window.location='800.html'}
if (res=='3') {window.location='1024.html'}
if (res!='1' && res!='2' && res!='3') {window.location='other.html'}

</script>

Edited January 22, 2004 by TCH-Scott

**SEO** · January 22, 2004

Or this:

><script language="javaScript" type="text/javascript">

var Wide = screen.width;

if (Wide <= 640){
  window.location ='640.html'
}

else if (Wide <= 800){
  window.location ='800.html'
}

else if (Wide <= 1024){
 window.location ='1024.html'
}

else {
 window.location ='other.html'
}


</script>

Edited January 22, 2004 by TCH-Scott

**WxGuy1** · January 22, 2004

First off,,, Thanks Scott!!!

I was wondering, however, if I could just load a particular **.css file based on resolution. So instead of going to 1024.html or 1280.html, for example, have it just load smallreso.css or highreso.css ... That way I still only have one index.shtml file, but it could include hires.css or lowres.css depending upon the reso of the visitor... Thanks!

Jeff Snyder

**SEO** · January 22, 2004

Add this to all your pages (prior to </head>):

Now use either of the two scripts (naming them whichcss.js).

Change the names from {window.location='xxx.html'} to {cssfile='xxx.css';}

eg. from {window.location='640.html'} to {cssfile='640.css';}

Never done this, let me know if it works.

Edited January 22, 2004 by TCH-Scott

**WxGuy1** · January 23, 2004

Thanks for you help thus far!

Unfortunately, the above code does not work. I have made 2 different CSS files for smallreso.css and highreso.css. However, they are not loading (well, importing) via the javascript code...

Jeff

**SEO** · January 23, 2004

Jeff:

Let us see all your code (sometimes it is something very simple).

**TCH-Don** · January 23, 2004

Im thinking that you need to use a document.write statement for the then part

if (Wide <= 640){

document.write(' ')

}

else {

document.write(' ')

}

maybe?

**WxGuy1** · January 23, 2004

Ok, I could have sworn I posted my more-length script and header on here, but I don't see that post here... so I'll add it again...

Here is the beginning of my index.shtml file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>Tornado Central (Home of Jeff Snyder)</title>

<META NAME="KEYWORDS" CONTENT="storm chaser,storm chaser,storms,tornado,tornado chasing,tornado chaser,thunderstorm,wall cloud,severe,weather,minnesota,oklahoma,rabbit,pics,pictures,video,car audio">

<meta name="description" content="Homepage of Storm Chaser Jeff Snyder. This site includes many photos, videos, and much documentation of my storm chases. In addition, several other facets of my life are contained herein.">

<META NAME="AUTHOR" CONTENT="Jeff Snyder">

<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="English">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">



</style>

<script language="JavaScript" src="openwindow.js"></script>

<script language="JavaScript">

if (document.images) {

image1on = new Image();

image1on.src = "/homeon.gif";

image2on = new Image();

image2on.src = "/windyon.gif";

image3on = new Image();

image3on.src = "/chasingon.gif";

image4on = new Image();

image4on.src = "/caraudioon.gif";

image5on = new Image();

image5on.src = "/linkson.gif";

image6on = new Image();

image6on.src = "/aboutmeon.gif";

image1off = new Image();

image1off.src = "/homeoff.gif";

image2off = new Image();

image2off.src = "/windyoff.gif";

image3off = new Image();

image3off.src = "/chasingoff.gif";

image4off = new Image();

image4off.src = "/caraudiooff.gif";

image5off = new Image();

image5off.src = "/linksoff.gif";

image6off = new Image();

image6off.src = "/aboutmeoff.gif";

}

function changeImages() {

if (document.images) {

for (var i=0; i<changeImages.arguments.length; i+=2) {

document[changeImages.arguments].src = eval(changeImages.arguments[i+1] + ".src");

}

}

}

</script>

<script language="JavaScript" src="clock.js"></script>

<script language='javascript' type='text/javascript' src='whichcss.js'></script>

</head>

<body>

<div id="content">

<h1>Welcome to Tornado Central</h1>

And here is my whichcss.js file:

var Wide = screen.width;

if (Wide > 1024){

cssfile ='highreso.css';

}

else {

cssfile ='lowreso.css';

}

Thanks guys for your help so far!

Jeff

**SEO** · January 23, 2004

Turtle (TCH-Don) was correct (not unusual :dance: ):

Here you go:

This is file testres.html

><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Resolution</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language='javascript' type='text/javascript' src='whatresolution.js'></script>

</head>

<body>
<h1>What Color am I?</h1>

<font face="Arial, Helvetica, sans-serif" size="2" color="#FF0000">640 = red</font><br>
<br>
<font face="Arial, Helvetica, sans-serif" size="2" color="#000099">800 = blue</font><br>
<br>
<font face="Arial, Helvetica, sans-serif" size="2" color="#00FF00">1240 = green</font><br>
<br>
<font face="Arial, Helvetica, sans-serif" size="2" color="#FF00FF">other = pink</font>
</body>
</html>

This is file whatresolution.js

>var Wide = screen.width;

if (Wide <= 640){document.write('<link rel="stylesheet" type="text/css" href="640.css">');}

else if (Wide <= 800){document.write('<link rel="stylesheet" type="text/css" href="800.css">');}

else if (Wide <= 1024){document.write('<link rel="stylesheet" type="text/css" href="1240.css">');}
  
else {document.write('<link rel="stylesheet" type="text/css" href="other.css">');}

File 640.css

>h1 {color: #FF0000;}

File 800.css

>h1 {color: #000099;}

File 1280.css

>h1 {color: #00FF00;}

File other.css

>h1 {color: #FF00FF;}

**WxGuy1** · January 23, 2004

Woohoo! Works great. Thanks guys!

Jeff

Tornado Central

Sign In

Easy Javascript Question

Recommended Posts

WxGuy1

Link to comment

Share on other sites

SEO

Link to comment

Share on other sites

SEO

Link to comment

Share on other sites

WxGuy1

Link to comment

Share on other sites

SEO

Link to comment

Share on other sites

WxGuy1

Link to comment

Share on other sites

SEO

Link to comment

Share on other sites

TCH-Don

Link to comment

Share on other sites

WxGuy1

Link to comment

Share on other sites

SEO

Link to comment

Share on other sites

WxGuy1

Link to comment

Share on other sites

Join the conversation

Hosting