BG based on Screen Resolution

Hamid Fard Apr 4, 2002

There are times that you want to load different background colors/images based on a viewer's screen resolution. This script is perfect for this application. It works beautifully with IE and Netscape.

The JavaScript Source: User Details: BG based on Screen Resolution

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- ONE STEP TO INSTALL BG BASED ON SCREEN RESOLUTION:

1.  Copy the coding into the HEAD of your HTML document  -->

<HEAD>

<!-- Begin
  var ScrnSize = "UnCommon"

if (navigator.appVersion.indexOf("4.") != -1 && 
      navigator.appName.indexOf("Explorer") != -1) {
     ScrnSize = screen.width + "x" + screen.height;
  }
  if (navigator.appVersion.indexOf("4.") != -1 && 
      navigator.appName.indexOf("Netscape") != -1) {
     ScrnSize = screen.width + "x" + (screen.height + 19); //Netscape sees 19 pixels less on Height
  }
  switch(ScrnSize) {
    case "640x480":   document.write('<body bgcolor="#FF0000" text="#000000">');
    case "800x600":   document.write('<body bgcolor="#00FF00" text="#000000">');
    case "1024x768":  document.write('<body bgcolor="#0000FF" text="#000000">');
    case "1152x864":  document.write('<body bgcolor="#FFFF00" text="#000000">');
    case "1280x1024": document.write('<body bgcolor="#AA0000" text="#000000">');
    case "1600x1200": document.write('<body bgcolor="#FF00FF" text="#000000">');
    case "1600x1280": document.write('<body bgcolor="#00AA00" text="#000000">');
    default:          document.write('<body bgcolor="#FFFFFF" text="#000000">');
  }

// The following 3 lines are for display only. They can safely be removed.
  document.write('Browser Type=' + navigator.appName + '<BR>');
  document.write('Browser Version=' + navigator.appVersion + '<BR>');
  document.write('Screen Resolution=' + screen.width + "x" + screen.height);

//  End -->
</script>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

BG based on Screen Resolution

Leave a Response

Attention JavaScript Coders

Go Deeper