Switching the background-image according to resolution

Discussion in 'Javascript' started by Markus Mohr, Oct 29, 2003.

  1. Markus Mohr

    Markus Mohr Guest

    Hi, everyone,


    I have a special problem:

    For every monitor resolution in 200 pixel steps from 800 to 1600
    pixels I have an image to be shown as centered background-image.
    Those images all have the same name and reside in the following
    physical path structure:

    /images/700/many_files_in_this_dir.png
    /images/900/many_files_in_this_dir.png
    /images/1100/many_files_in_this_dir.png
    /images/1300/many_files_in_this_dir.png
    /images/1500/many_files_in_this_dir.png

    The basic idea is to selectively display the appropriate *.png file
    for every *.html file to be opened on the website according to the
    user's individual monitor resolution.

    Now, I could do this job easily in PHP oder Perl, but the customer
    wants to have it in JavaScript.

    Some code snippet I have already tried to set up and show the basic
    idea:

    var file_to_be_displayed = something???;

    if ((screen.width == 800) || (screen.width > 800) && (screen.width <=
    1600) || (screen.width > 1600)) {
    document.write('<td width="210" weight="*%" bgcolor="#6C799B"
    bordercolor="white" style="border-bottom-width:1px;
    border-bottom-style:solid;">&nbsp;</td>');
    document.write('<td width="*" height="*%" bgcolor="#C2C7D3"
    bordercolor="white" style="border-width:1px; border-style:solid;">');
    if (screen.width == 800) {
    document.write('<div style="width:*%; height:100%; overflow:auto;
    background-image:url(images/700/appropriate_filename_for_this_resolution.png);
    background-repeat:no-repeat; background-position: 50% 50%; align:left;
    text-align:justify">');
    }
    if ((screen.width > 800) && (screen.width <= 1000)) {
    document.write('<div style="width:*%; height:100%; overflow:auto;
    background-image:url(images/900/appropriate_filename_for_this_resolution.png);
    background-repeat:no-repeat; background-position: 50% 50%; align:left;
    text-align:justify">');
    }
    if ((screen.width > 1000) && (screen.width <= 1200)) {
    document.write('<div style="width:*%; height:100%; overflow:auto;
    background-image:url(images/1100/appropriate_filename_for_this_resolution.png);
    background-repeat:no-repeat; background-position: 50% 50%; align:left;
    text-align:justify">');
    }
    if ((screen.width > 1200) && (screen.width <= 1400)) {
    document.write('<div style="width:*%; height:100%; overflow:auto;
    background-image:url(images/1300/appropriate_filename_for_this_resolution.png);
    background-repeat:no-repeat; background-position: 50% 50%; align:left;
    text-align:justify">');
    }
    if ((screen.width > 1400) && (screen.width <= 1600)) {
    document.write('<div style="width:*%; height:100%; overflow:auto;
    background-image:url(images/1500/appropriate_filename_for_this_resolution.png);
    background-repeat:no-repeat; background-position: 50% 50%; align:left;
    text-align:justify">');
    }
    if (screen.width > 1600) {
    document.write('<div style="width:*%; height:100%; overflow:auto;
    background-image:url(images/1500/appropriate_filename_for_this_resolution.png);
    background-repeat:no-repeat; background-position: 50% 50%; align:left;
    text-align:justify">');
    }
    }

    Now, the *.html file should call the javascript and provide it with
    the appropriate filename to be shown in the respective resolution.

    Maybe this is a stupid question and the approch might be quite simple,
    but at the very moment I'm unable to think of a good solution.

    Can anyone please help?


    Sincerely



    Markus Mohr
     
    Markus Mohr, Oct 29, 2003
    #1
    1. Advertising

  2. Markus Mohr <> writes:

    > For every monitor resolution in 200 pixel steps from 800 to 1600
    > pixels I have an image to be shown as centered background-image.
    > Those images all have the same name and reside in the following
    > physical path structure:
    >
    > /images/700/many_files_in_this_dir.png
    > /images/900/many_files_in_this_dir.png
    > /images/1100/many_files_in_this_dir.png
    > /images/1300/many_files_in_this_dir.png
    > /images/1500/many_files_in_this_dir.png
    >
    > The basic idea is to selectively display the appropriate *.png file
    > for every *.html file to be opened on the website according to the
    > user's individual monitor resolution.


    Why use monitor resolution if the browser isn't maximized?

    If you insist on relying on resolution, at least use screen.availWidth
    instead of screen.width.

    > Now, I could do this job easily in PHP oder Perl, but the customer
    > wants to have it in JavaScript.


    That would require your server to know my screen resoltution, which
    would require Javascript.

    >
    > Some code snippet I have already tried to set up and show the basic
    > idea:



    That's a lot of code for such a small thing.

    var baseName="many_files_in_this_dir.png";
    var fileSize;
    if (screen.availWidth <= 800) {
    fileSize = "700";
    } else if (screen.availWidth <= 1000) {
    fileSize = "900";
    } else if (screen.availWidth <= 1200) {
    fileSize = "1100";
    } else if (screen.availWidth <= 1400) {
    fileSize = "1300";
    } else { // > 1400
    fileSize = "1500";
    }
    var fullFileName = "images/"+fileSize+"/"+baseName;

    > document.write('<td width="*" height="*%" bgcolor="#C2C7D3"
    > bordercolor="white" style="border-width:1px; border-style:solid;">');


    "*%" is not a valid value for the height attribute. Nor is "*" for the
    width.

    > if (screen.width == 800) {
    > document.write('<div style="width:*%; height:100%; overflow:auto;


    "*%" isn't valid as a CSS length either.

    document.write('<div style="height:100%; overflow:auto;'+
    'background: url('+fillFileName+') 50% 50% no-repeat;'+
    'text-align:justify;">');

    There is no CSS property called "align".

    > Now, the *.html file should call the javascript and provide it with
    > the appropriate filename to be shown in the respective resolution.


    See above.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Oct 29, 2003
    #2
    1. Advertising

  3. Markus Mohr

    Markus Mohr Guest

    On 29 Oct 2003 01:34:46 +0100, Lasse Reichstein Nielsen
    <> wrote:

    >Markus Mohr <> writes:
    >
    > [....]
    >
    >That's a lot of code for such a small thing.
    >
    > var baseName="many_files_in_this_dir.png";
    > var fileSize;
    > if (screen.availWidth <= 800) {
    > fileSize = "700";
    > } else if (screen.availWidth <= 1000) {
    > fileSize = "900";
    > } else if (screen.availWidth <= 1200) {
    > fileSize = "1100";
    > } else if (screen.availWidth <= 1400) {
    > fileSize = "1300";
    > } else { // > 1400
    > fileSize = "1500";
    > }
    > var fullFileName = "images/"+fileSize+"/"+baseName;


    Thank you very much, that really does the job very well.

    Sincerely


    Markus Mohr
     
    Markus Mohr, Oct 29, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrew FPGA
    Replies:
    0
    Views:
    1,009
    Andrew FPGA
    Sep 26, 2005
  2. Replies:
    5
    Views:
    8,466
    Andy Dingley
    May 7, 2005
  3. Sivaswami Jeganathan

    Modify asp page according to Monitor resolution.

    Sivaswami Jeganathan, Mar 27, 2006, in forum: ASP General
    Replies:
    3
    Views:
    160
    Naresh
    Mar 28, 2006
  4. Konrad Den Ende

    How to modify the color according to background?

    Konrad Den Ende, Jun 22, 2004, in forum: Javascript
    Replies:
    11
    Views:
    274
    Richard Cornford
    Jun 29, 2004
  5. Seige
    Replies:
    12
    Views:
    457
    Matt Kruse
    Jun 23, 2006
Loading...

Share This Page