Is this possible? plz help

•

What is DaniWeb IT Discussion Community?

You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 427,333 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,218 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our Site Layout and Usability advertiser: Programming Forums

Thread Tools Display Modes

Views: 2870 | Replies: 20

Page 3 of 3

•

Join Date: Jun 2004

Location: Hemet, CA

Posts: 429

Reputation: FC Jamison is on a distinguished road

Rep Power: 5

Solved Threads: 18

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: Is this possible? plz help

#21

Aug 13th, 2006

OK Chief,

I have the solution you seek...

I am attaching two javascript files which both need to be referenced the head of each page you want to modify according to browser window size.

Here is an example of the code you would add to your head element (and the actual code for a site I am working on):

[html]

<link rel="stylesheet" type="text/css" href="resources/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="resources/css/jamExpressMenu.css" />
<link rel="alternate stylesheet" type="text/css" href="resources/css/stylesheet0800.css" title="800 x 600" />
<link rel="alternate stylesheet" type="text/css" href="resources/css/stylesheet1024.css" title="1024 x 768" />
<link rel="alternate stylesheet" type="text/css" href="resources/css/stylesheet1152.css" title="1152 x 864" />
<link rel="alternate stylesheet" type="text/css" href="resources/css/stylesheet1280.css" title="1280 x 1024" />

<script type="text/javascript" src="resources/scripts/externalLink.js"></script>
<script type="text/javascript" src="resources/scripts/setPage.js"></script>
<script type="text/javascript" src="resources/scripts/event_listeners.js"></script>
<script type="text/javascript" src="resources/scripts/resolution.js"></script>

[html]

In the resolution.js file, find the checkBrowserWidth function (shown below);

Help with Code Tags

(Toggle Plain Text)

function checkBrowserWidth() {
  var theWidth = getBrowserWidth();
	
  if (theWidth == 0) {
    var resolutionCookie = document.cookie.match(/(^|;)msjc_res_layout[^;]*(;|$)/);

    if (resolutionCookie != null) {
      setStylesheet(unescape(resolutionCookie[0].split("=")[1]));
    }
		
    addLoadListener(checkBrowserWidth);
		
    return false;
  }

  if (theWidth <= 800) {
    setStylesheet("800 x 600");
    document.cookie = "msjc_res_layout=" + escape("800 x 600");
  }
  
  else if (theWidth > 800 && theWidth <= 1024) {
    setStylesheet("1024 x 768");
    document.cookie = "msjc_res_layout=" + escape("1024 x 768");
  }
	
  else if (theWidth > 1024 && theWidth <= 1152) {
    setStylesheet("1152 x 864");
    document.cookie = "msjc_res_layout=" + escape("1152 x 864");
  }
	
  else if (theWidth > 1152) {
    setStylesheet("1280 x 1024");
    document.cookie = "msjc_res_layout=" + escape("1280 x 1024");
  }
	
  return true;
};

Simply change the if statements to the 'theWidth' numbers to the screen sizes you want to adjust for and add the title attribute to the alternate stylesheets listed in your html (see above).

The event_listeners.js file requires no modification. This file is used to identify changes in the browser width.

In my site, made one main stylesheet and used the alternates to override only the values that needed to be changed for different resolutions.

I have tested it and it will change image sizes based on the height and width attributes you specify in your stylesheets.

For example, I have several images that are 100px in height as specified in my html. In my stylesheet1024.css file, I added the following:

Help with Code Tags

(Toggle Plain Text)

  #photo01, #photo02, #photo03, #photo04 {
    height: 107.75px;
  }

When the browser window is between 1025px and 1152px in width, the images change height from 100px to 107.75px. You can do the same for the width as well.

If your images are background images, you can also swap them out based on the resolution as well by specifying a different background image in your alternate css files.

I have tested this script in IE7, NS7.2, FF 1.5, and Opera 9.

I hope these help you out.

FJ

Last edited by FC Jamison : Aug 13th, 2006 at 12:06 pm.

Attached Files