Detect screen resolution and load image

Let me know if you need explanation

this might help

http://www.crowes.f9.co.uk/Javascript/scres.htm

mplungjan I just want to check that I understand this. This section I can load into my linked js file:

var img = "enormous.jpg"
if (window.width<800) img ="small.jpg";
else if (window.width<1024) img ="medium.jpg";
else if (window.width<1280) img ="large.jpg";
document.write('<img src="'+img+'">')

And then this section I would need to put into my xhtml?

<noscript>
<img src="medium.jpg">
</noscript>

Apologies for lack of knowledge!
cpalmer

the script plus the noscript is what I would put next to each other where the image was to appear...

Alternatively:

if you in  the head have
<script src="linked.js"></script>

and in there have

function getImage() {
  var img = "enormous.jpg"
  if (window.width<800) img ="small.jpg";
  else if (window.width<1024) img ="medium.jpg";
  else if (window.width<1280) img ="large.jpg";
  return img;
}


then you can have in the page:

<script type="text/javascript"><!--
  document.write('<img src="'+getImage()+'" alt="My javascript generated image" />')
//--></script>
<noscript><img src="medium.jpg" alt="My static image for non-js users" /></noscript>


Where do you have your js file and what else does it contain?

I noticed that you are looking at using 'document.write()' to do this. Keep in mind that IE will prevent this in some cases depending on how the browser is set up to handle active content. If the browser is set up to block active content a yellow band across the top is displayed stating that it block 'active content' from the page. In order to enable it the user would need to click on that band and select to allow the active content.

Thank you so much for that clarification! I'll try it out now!

My javascript file is here: isa_new/js/isa.js. It is linked in the head of each page thus:
<script type="text/javascript" language="JavaScript" src="/js/isa.js";></script>

The only other thing that it contains is this:

menu_status = new Array();
function showHide(theid){
    if (document.getElementById) {
    var switch_id = document.getElementById(theid);

        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
        }
    }
}
 
Which, as I am sure you can tell, is what I use to control the show/hide function of the css menu. I'm not a great Javascript user for obvious reasons!
cpalmer

I use document.write to only load the image needed.

Of course one can do this somewhat simpler version:


<img name="myImage" src="medium.jpg" alt="My image" />
<script type="text/javascript"><!--
  var img2use = getImage();
  if (img2use!='medium')  document.images["myImage"].src=img2use;
//--></script>


Michel

PS: You still need

function getImage() {
  var img = "enormous.jpg"
  if (window.width<800) img ="small.jpg";
  else if (window.width<1024) img ="medium.jpg";
  else if (window.width<1280) img ="large.jpg";
  return img;
}

in your js  file

Binary1,
Thank you for providing that solution and your note about active content. I specialise in producing sites which are fully accessiblity compliant and not very high tec at all ; minium java etc - so everything is 'right there' as it were. Which should mean that even if an image doesn't load a text explination of the image will. I have also specified the smallest image as the default image for the site.
cpalmer

I would like to know what scripts parts are blocked by active content blocking...
I do not see document.write as more blockable than image src changing...

To make sure it works across multiple browsers you can't just use window.width, try this

<script>
window.onload = function() {
      if (windowWidth = getBrowserWidth()) {  // Make sure width can be detected

      // Begin Image Changing
      if (windowWidth > 1280) {
            document.getElementById("IMAGE_ID").src = "PATH/TO/IMAGE_1280.jpg";
      } else if (windowWidth > 1024) {
            document.getElementById("IMAGE_ID").src = "PATH/TO/IMAGE_1024.jpg";
      } else if (windowWidth < 800) {
            document.getElementById("IMAGE_ID").src = "PATH/TO/IMAGE_800.jpg";
      } else {
            document.getElementById("IMAGE_ID").src = "PATH/TO/IMAGE_640.jpg";
      }
      // End Image Changing

      }  // End if browser width was detected
}  // End onload

function getBrowserWidth() {
      if (window.innerWidth) {
            return window.innerWidth;
      }
      else if (document.documentElement && document.documentElement.clientWidth != 0) {
            return document.documentElement.clientWidth;
      }
      else if (document.body) {
            return document.body.clientWidth;
      }
      return false;
}
</script>

Then in the body all you need is the image tag:
<img src="DEFAULT_IMAGE.jpg" id="IMAGE_ID" alt="image description" />


Change the IMAGE_ID to whatever you want, and add multiple images by giving them unique ids and repeating the section of the script with the new image id.

Sorry I had a > the wrong way, this line should be:

} else if (windowWidth > 800) {

Yes you can if you want to know the resolution of the screen

The resolution of the screen does not have anything to do with the size of the viewport (window)
I would not want the fontsize to become smaller just because I made the window smaller. Same for an image especially if the image has some text

Michel

and I would do
>= 1280
>= 1024

and so on

You're right, but the viewport (window) is what the user is looking at, so if they have any browser sidebars (or the browser is smaller than maximized) the resolution is going to be misread and the page will display the wrong size image to fit the layout.

If you use >= 1280 to get the window width as accurate as possible subtract about 16-20 pixels to account for the scroll bar. A 1280 monitor won't have a windowWidth of 1280 due to the scroll bar.

For testing the width you could add:
alert(windowWidth);
right before the image changing part of the code to display a pop up of what the script detects as the window width.

I do not get what you are saying....

If the resolution is 1024x768, the browser window can be 640x480 or whatever but the site can still serve page designed for 1024x768 - if the user runs with a sidebar, then I would rather turn it off than get font-sizes and images that are too small to see...

There is no need to turn off the script, (and you can't turn off a user's browser sidebar). The line:
      } else {
            document.getElementById("IMAGE_ID").src = "PATH/TO/IMAGE_640.jpg";
      }
sets the smallest size for the image so the image will not get any smaller than the image declared in this else statement.

The text size is determined by the user's browser and computer configuration, this script only affects the image.

cpalmer116,
Is the image text content or an image?

I meant if *I* am a user that runs with a sidebar, I'd rather turn it off than have a smaller resolution forced upon me due to the size of the window I chose to use.

Landship,
The image is a logo; so somewhere between an image and text!
cpalmer

That should work fine with my assumption of what you were looking for. I just found that www.themaninblue.com has an event listener to detect when a user resizes their browser so the image could adjust along with it. Otherwise both scripts only resize the image the first time a page is loaded.

add this before the // Begin Image Changing:
attachEventListener(window, "resize", checkBrowserWidth, false);

and put this function before the </script> tag
function attachEventListener(target, eventType, functionRef, capture)
{
    if (typeof target.addEventListener != "undefined")
    {
        target.addEventListener(eventType, functionRef, capture);
    }
    else if (typeof target.attachEvent != "undefined")
    {
        target.attachEvent("on" + eventType, functionRef);
    }
    else
    {
        return false;
    }

    return true;
};

Ok, Just to recap

* my script (suggestions) looks at the resolution of the screen of the user before loading a logo - it ignores the size of the browser window
* Binary's suggestion will load a logo and change it after the page has loaded
* Landship's suggestions look at the size of the browser window - if you have a small browser window you get a small logo - The last suggestion will resize the logo when you resize the browser

So, cpalmer, did we answer your question or was there more you needed?

Thank you so much for your solution! I thought I had accepted yours ages ago, but aparently not. So thank you again and apologies for the delay!
Christy Palmer