Jump to content

Easy Javascript Question


WxGuy1
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 by TCH-Scott
Link to comment
Share on other sites

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 by TCH-Scott
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

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

 

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 by TCH-Scott
Link to comment
Share on other sites

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

<!--

 

@import url(mainframe.css);

.style7 {font-size: 1.5em};

.note {text-align:center};

.leftpic {text-align:center; position:relative; left:273px; top:110px; width:300px;};

.rightpic {text-align:center; position:relative; left:330px; top:100px; width:300px;};

.style8 {font-size: 1.3em};

a:link {

border:none;

}

-->

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...