Is this possible? plz help

Question

AlloyNES 0 Newbie Poster

18 Years Ago

Alright, here's the deal. I've designed an entire website for work, but there are complaints about certain things not being seen on low resoultions. I opted to have a link to show the user how to change their resolution, but my superiors really want the content of the website to resize relative to the resolution/browser window.

The way I have the site set up, in a nutshell, is that on the majority of the pages, the body is designed as one big image, sandwhiched between the header and the footer, in a table. Is there a way to set the large image that has text, etc. to resize itself depending on the browser window size?

Oh, and I'm using DreamWeaver

ui-ux web-design

3 Contributors
20 Replies
1K Views
6 Days Discussion Span
Latest Post 18 Years Ago Latest Post by FC Jamison

mikeandike22 18 Nearly a Posting Virtuoso

18 Years Ago

you could probably use the em unit for that im not sure if it is possible, but em is a measurement based on the font-size on the screen.

FC Jamison 31 Posting Pro in Training

18 Years Ago

You can use javascript to detect the monitor resolution and then have the image set to a certain size depending on what the resolution is.

FC Jamison 31 Posting Pro in Training

18 Years Ago

In this example, the main image on every page would have the id "imageID".

You can place this code into a .js file and link to it from inside the head element or add it directly inside the head element.

pageImage = getElementById('imageID');

switch(screen.width) {
  case 640: 
    pageImage.style.height = '480px'; 
    pageImage.style.height = '640px'; 
    break;
  case 800: 
    pageImage.style.height = '600px'; 
    pageImage.style.height = '800px'; 
    break;
  case 1024: 
    pageImage.style.height = '768px'; 
    pageImage.style.height = '1024px'; 
    break;
  case 1152: 
    pageImage.style.height = '864px'; 
    pageImage.style.height = '1152px'; 
    break;
  case 1280: 
    pageImage.style.height = '1024px'; 
    pageImage.style.height = '1280px'; 
    break;
  case 1600: 
    pageImage.style.height = '1200px'; 
    pageImage.style.height = '1600px'; 
    break;
  case 1920: 
    pageImage.style.height = '1440px'; 
    pageImage.style.height = '1920px'; 
    break;
  default : 
    pageImage.style.height = '768px'; 
    pageImage.style.height = '1024px'; 
    break;
}

FC Jamison 31 Posting Pro in Training

18 Years Ago

a .js file is a javascript file.

You can just put the code in a text file and change the extension to .js instead of .txt

To call the script from a Web page, add the following to the head section of your html:

<script src="code.js" type="text/javascript"></script>

where code.js is the name you gave to the javascript file you saved.

FC Jamison 31 Posting Pro in Training

18 Years Ago

<img src="image.jpg" id="imageID">

You have the right idea, but you give the image an ID, not a name.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

AlloyNES 0 Newbie Poster · Answer 1 · 2006-08-08T19:11:54+00:00

You can use javascript to detect the monitor resolution and then have the image set to a certain size depending on what the resolution is.

That sounds like what I need. But, I'm not greatly familiar with javascript. Could you give me code or something to paste into my documents?

AlloyNES 0 Newbie Poster · Answer 2 · 2006-08-09T00:20:11+00:00

How do you put it in a .js file? What is a .js file?

AlloyNES 0 Newbie Poster · Answer 3 · 2006-08-09T23:59:37+00:00

Alright. I put that line of code in the header, made a txt file with that long piece of code a few replies back (cut and paste), and then changed the file to .js instead of .txt

Now what? I saw you said something about changing the ID of the image? Does that mean the name of it? As in when you right click the image in Dreamweaver and click "Names..."

AlloyNES 0 Newbie Poster · Answer 4 · 2006-08-10T20:56:31+00:00

Well, I did that, but the body-image is still the same size on both my regular high resoultion and on 800x600.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 5 · 2006-08-10T23:22:12+00:00

If your pages are online, send me a link and I will take a look at them.

AlloyNES 0 Newbie Poster · Answer 6 · 2006-08-12T00:32:53+00:00

If your pages are online, send me a link and I will take a look at them.

They're not online yet. Right now, they're on a test site that can only be viewed internally here at work. They should go live next week. Me trying to have the page adjust for people with 800x600 is going to be a post-launch project.

But, here's a screenshot.

http://i44.photobucket.com/albums/f34/AlloyNES/design.gif

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 7 · 2006-08-12T01:03:36+00:00

Oh crap...

The initial line in that first code

pageImage = getElementById('imageID');

Should be

var pageImage = document.getElementById('imageID');

Plus it should have been in a function and called after the page loaded.

Here is the corrected code:

window.onload = setImage;

function setImage() {

  var pageImage = document.getElementById('imageID');

  switch(screen.width) {
    case 640: 
      pageImage.style.height = '480px'; 
      pageImage.style.width = '640px'; 
      break;
    case 800: 
      pageImage.style.height = '600px'; 
      pageImage.style.width = '800px'; 
      break;
    case 1024: 
      pageImage.style.height = '768px'; 
      pageImage.style.width = '1024px'; 
      break;
    case 1152: 
      pageImage.style.height = '864px'; 
      pageImage.style.width = '1152px'; 
      break;
    case 1280: 
      pageImage.style.height = '1024px'; 
      pageImage.style.width = '1280px'; 
      break;
    case 1600: 
      pageImage.style.height = '1200px'; 
      pageImage.style.width = '1600px'; 
      break;
    case 1920: 
      pageImage.style.height = '1440px'; 
      pageImage.style.width = '1920px'; 
      break;
    default : 
      pageImage.style.height = '768px'; 
      pageImage.style.width = '1024px'; 
      break;
  }
}

Looks like I forget to change the second lines to widths as well...no wonder the thing didn't work! Sorry about that.

Here is an alternative to the switch-case statement as well:

onload = setImage;

function setImage() {

  var ww = getWindowWidth();
  var im = document.getElementById('imageID');
  
  if (ww < 800) {
    im.style.height = 500 + 'px';
    im.style.width = 500 + 'px';
  }

  else if (ww >= 800 && ww < 1024) {
    im.style.height = 724 + 'px';
    im.style.width = 724 + 'px';
  }

  else {
    im.style.height = 1000 + 'px';
    im.style.width = 1000 + 'px';
  }
}



function getWindowWidth() {
  var windowWidth = 0;

  if (typeof(window.innerWidth) == 'number')
    windowWidth = window.innerWidth;
	
  else {

    if (document.documentElement && document.documentElement.clientWidth)
      windowWidth = document.documentElement.clientWidth;
		
    else {
      if (document.body && document.body.clientWidth)
        windowWidth = document.body.clientWidth; }; };
	
  return windowWidth;
};

AlloyNES 0 Newbie Poster · Answer 8 · 2006-08-12T01:33:12+00:00

So... of the last two codings you listed in your latest reply, which one do I use in the .js file? When you said alternative, does that mean its optional? I'm slightly confused.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 9 · 2006-08-12T01:34:30+00:00

Use one or the other in your .js file. They should both yield the same result.

You can then modify the code to fit your needs.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 10 · 2006-08-12T01:39:04+00:00

Well...almost the same result. The first code checks the screen resolution, the second code checks the browser window width.

It depends on what you want to base your image size on.

AlloyNES 0 Newbie Poster · Answer 11 · 2006-08-12T01:55:24+00:00

the body-image stayed the same when I changed resolutions. Not sure what I'm doing wrong.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 12 · 2006-08-12T01:58:51+00:00

did you refresh your browser window?

It will only resize the image when the page is loaded.

AlloyNES 0 Newbie Poster · Answer 13 · 2006-08-12T01:59:44+00:00

I'm staying with the first code then. I did refresh. But, as I said before, it doesn't seem to be functioning the way I want.

Is there a way to have the site detect the resolution of the computer and if it's 800x600, change out the main body (which is one big image) with another one. What I have for all the pages so far looks great on anything greater than 800x600. What I need to do is make sure it is viewable without scrolling for ppl who use 800x600. If I could have the regular image change to a customized image for 800x600 viewing, that would be great. This way we wouldn't hafta worry about the main image chaning sizes. It would just change the image filename. Can this be done?

Such as (this is just to spell it out):

careers1.jpg is tailored for 1024x768 and higher
careers2.jpg is tailored for 800x600

If the resolution of the cpu is 800x600
Change careers1.jpg to careers2.jpg
ELSE
stay as careers1.jpg

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 14 · 2006-08-12T02:24:43+00:00

Hmm...

yes...it can be done.

You will need to creat another .js file and add the following:

if (window.screen.width <= 800)
  document.write('<img name="" src="image1.jpg" width="779" height="550" alt="">');
else
  document.write('<img name="" src="image2.jpg" width="1003" height="725" alt="">');

You call this javascript from the location in the html page where you want the image to appear.

<body>
  <script src="image.js" type="text/javascript"></script>
</body>

Also, screen.width worked in my browser, but you might also try window.screen.width in the switch statement of the codes I posted earlier.

There is a more complicated code I have been working on that will do exactly what you want...resize the page when the resolution (or browser size) is changed. It will take me a day or so to see if I can get it to work right in Opera.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 15 · 2006-08-13T22:00:45+00:00

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):

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

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

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:

#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