SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Cape Town
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Relating a page to a users monitor

    I have a site up and running called www.kalahari.co.za which points to www.kalahari-adventures.co.za As the business depends on adventurous people seeing images of the place, the bigger the better. So I have designed the site to show one static background pic to each page. I sorted out a problem of different browsers by have a hidden index page that looks at the monitor a viewer has and decides that if you have a 1024 x 768 monitor it then opens a page index1024.htm that has the appropriately sized background pic.

    Now I said to my client he would get better search engine ratings if we created 3 sites and the existing site is spread over those sites. Anyway I have done all that only to discover from High Rankings Advisor (highrankings.com that search engines have now cottoned onto this (competitors complaining I suppose). But I'm going ahead anyway.

    My problem is that I have put all my keywords and descriptions on the 1024 pages. But if a person sees that page in a search engine clickt to view it and has a 800 x 600 monitor then my script is not going to work.

    I have tried putting my index page script onto all the pages (see script below), but when I open a unique page it looks for the index page in the folder where that doc is situated. I suppose a quick and dirty would be to direct the viewer back to the index page which will then activates the scrpt (see below) that checks for the right monitor size.

    I would prefer the viewer to stay on page. So If someone who knows Javascript can rewrite the script so that A) it looks at the name of the page. And B) once it sees that page's name it has to then look for that same page in the appropriate folder and open that page. (folders are docs800, docs1024 and docs1624)

    The problem is that I can't have the same index page script because at the moment if the script is on the page I am trying to open, it loops forever.

    How do I sort this out?

    This is the present script on the index page.

    <script language="JavaScript">
    <!--// hide bad old browsers
    var s800x600page = "index800.htm";
    var s1024x768page = "index1024.htm";
    var s1152x864page = "index1264.htm";
    var s1280x720page = "index1264.htm";
    var s1280x960page = "index1264.htm";
    var s1280x1024page = "index1264.htm";
    var pagetype;
    if ((screen.height == 600) && (screen.width == 800)) { pagetype = 2; }
    else if ((screen.height == 768) && (screen.width == 1024)) { pagetype = 3; }
    else if ((screen.height == 864) && (screen.width == 1152)) { pagetype = 4; }
    else if ((screen.height == 720) && (screen.width == 1280)) { pagetype = 4; }
    else if ((screen.height == 960) && (screen.width == 1280)) { pagetype = 4; }
    else if ((screen.height == 1024) && (screen.width == 1280)) { pagetype = 4; }
    else { pagetype = 2; }
    if (pagetype == 2) { window.location.href = s800x600page }
    else if (pagetype == 3) { window.location.href = s1024x768page }
    else if (pagetype == 4) { window.location.href = s1152x864page }
    else if (pagetype == 4) { window.location.href = s1280x720page }
    else if (pagetype == 4) { window.location.href = s1280x960page }
    else if (pagetype == 4) { window.location.href = s1280x1024page }
    //-->
    </script>


    I design but programming is still in my dreams

    Thanks

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi James,

    Here's a suggestion. Instead of having a different html page for each screen resolution, just have one html page and dynamically insert the appropriate image.

    The technique I use for inserting the image is not the latest and greatest standards thing, but it will work in almost all browsers as long as javascript is enabled - and there are things you can do to handle that situation also.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <style type='text/css'><!--
    --></style>
    <script type='text/javascript'><!--
    var imgPath='mysite/images/';
    var imgName = new Array(
      "img800x600.jpg",    // 0
      "img1024x768.jpg",   // 1
      "img1152x864.jpg",   // 2
      "img1280x720.jpg",   // 3
      "img1280x960.jpg",   // 4
      "img1280x1024.jpg"   // 5
    );
    function InsertMainImg() {
      var imgIndex;
      if (screen.width > 1200) {
        if (screen.height > 1000) imgIndex = 5;
        else if (screen.height > 900) imgIndex = 4;
        else imgIndex = 3;
      }
      else if (screen.width > 1100) imgIndex = 2;
      else if (screen.width > 1000) imgIndex = 1;
      else imgIndex = 0;
      document.write(
        "<img src='"
        + imgPath + imgName[imgIndex]
        + "' border='0' alt='img alt text'>"
      );
    }
    //--></script>
    </head>
    <body>
    
    <script type='text/javascript'>
    InsertMainImg();
    </script>
    
    </body>
    </html>

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, I haven't tested this, so let me know if there's a problem.

  4. #4
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Cape Town
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hallo Mike
    think your script is grate as it would solve my problem of search engines and viewers seeing the right background image corresponding to their screen size, but I can't get it to bring up an image in IE or NS. I've included a slightly changed script below. Can you test on you screen?
    One thing I need to also do is make the image a fixed background image. My htm files at the moment have
    <body bgcolor="#FFCC66" bgProperties=fixed background=imgfile.jpg"
    Do you think your script could insert the right image as a background image?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <style type='text/css'><!--
    --></style>
    <script type='text/javascript'><!--
    var imgPath='images/';
    var imgName = new Array(
    "img8.jpg", // 0
    "img1.jpg", // 1
    "img12.jpg", // 2
    );
    function InsertMainImg() {
    var imgIndex;
    if (screen.width > 1200) {
    if (screen.height > 1000) imgIndex = 2;
    else if (screen.height > 900) imgIndex = 2;
    else imgIndex = 2;
    }
    else if (screen.width > 1100) imgIndex = 2;
    else if (screen.width > 1000) imgIndex = 1;
    else imgIndex = 0;
    document.write("<img href="" + imgPath + imgName[imgIndex] + "" border='0' alt='img alt text'>");
    }
    //--></script>
    </head>
    <body>
    <script type='text/javascript'>
    InsertMainImg();
    </script>
    </body>

    Don't worry about the background image at the moment. I'll play around with that. I'm just hopeless with programme, so just to get to work would be great.

    James

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, I missed the part (in your first post) about it needing to be a background image. I think we can fix that. But first...

    My original script works for me, although I did not change my monitor res to test any other values.

    You changed the line with "document.write" - why?
    You changed nested single quotes to double quotes, and you changed the src attribute to "href" (which an img tag does not have). I'm sure you are getting a javascript error.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this. It inserts the body tag with the 'background' attribute set to the appropriate image file. CSS is used to make the image fixed and non-tiled.

    If javascript is disabled, they'll get the 800x600 image.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <style type='text/css'><!--
    body {
      background-attachment:fixed;
      background-repeat:no-repeat;
    }
    .bigM {margin-top:2000px;}
    --></style>
    <script type='text/javascript'><!--
    var imgPath='images/';
    var imgName = new Array(
      "img800x600.jpg",    // 0
      "img1024x768.jpg",   // 1
      "img1152x864.jpg",   // 2
      "img1280x720.jpg",   // 3
      "img1280x960.jpg",   // 4
      "img1280x1024.jpg"   // 5
    );
    function InsertBodyTag() {
      var imgIndex;
      if (screen.width > 1200) {
        if (screen.height > 1000) imgIndex = 5;
        else if (screen.height > 900) imgIndex = 4;
        else imgIndex = 3;
      }
      else if (screen.width > 1100) imgIndex = 2;
      else if (screen.width > 1000) imgIndex = 1;
      else imgIndex = 0;
      document.write("<body background='"+imgPath+imgName[imgIndex]+"'>");
    }
    //--></script>
    </head>
    
    <script type='text/javascript'><!--
    InsertBodyTag();
    //--></script>
    
    <noscript>
    <body background='images/img800x600.jpg'>
    </noscript>
    
    <div class='bigM'>test</div>
    
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Cape Town
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike, sorry to be a pain, but your code still does not work on my PC. I am allowing JavaScript
    This is the code which I have adapted slightly for my images. I'm only using 3 images. The higher res screens will crop some of the background image but it does not matter. They all have been ghosted slightly to easily see the text on top.

    I'm using IE5.5 and NS 7 NS and both tell me that Line 19 has a syntx error and Line 35 Insert Bodytag is not defined or an Object expected. Dreamweaver 3 (can't afford latest) also gave me error on the 2nd noscript saying it should be at the end of the doc.

    code

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <style type='text/css'><!--
    body {
    background-attachment:fixed;
    background-repeat:no-repeat;
    }
    .bigM {margin-top:2000px;}
    --></style>
    <script type='text/javascript'><!--
    var imgPath='images/';
    var imgName = new Array(
    "8bd_canoes.jpg", // 0
    "1bd_canoes.jpg", // 1
    "canoes_12.jpg", //2
    );
    function InsertBodyTag() {
    var imgIndex;
    if (screen.width > 1200) {
    if (screen.height > 1000) imgIndex = 2;
    else if (screen.height > 900) imgIndex = 2;
    else imgIndex = 2;
    }
    else if (screen.width > 1100) imgIndex = 2;
    else if (screen.width > 1000) imgIndex = 1;
    else imgIndex = 0;
    document.write("<body background='"+imgPath+imgName[imgIndex]+"'>" );
    }
    //--></script>
    </head>
    <script type='text/javascript'><!--
    InsertBodyTag();
    //--></script>

    <noscript>
    <body background='images/8bd_canoes.jpg'>
    </noscript>
    <div class='bigM'>test</div>
    </body>
    </html>

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi James, it's no problem.

    Delete the comma on line 18:
    Code:
    "canoes_12.jpg", //2
    Also, try this, which separates "<" from "body":
    Code:
    document.write("<"+"body background='"+imgPath+imgName[imgIndex]+"'>");

  9. #9
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Cape Town
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works! There are a few things I'm trying to solve which would really put the cherry on the cake. And one is the noscript script. When I put in the body of the page it inserts the background image making it difficult to as I cannot see the text - it shows in the browser though. DW3 also doesnt like the </noscript> - it says it must be at the end of the doc. This I have done and disabled all references to scripts but nothing happens. Would you use the same code if I warned viewers that they would not see the background image and then leave it out?

    The other aspect that I've tried to insert into your script is the OnLoad=(gif files for a footer nav bar) but then the background image does not load. I may be doing it wrong. Can it be done?

    Code:

    document.write("<"+"body background='"+imgPath+imgName[imgIndex]+"'+"onLoad="MM_preloadImages(''footer/kacfooter_r2_c02_f3.gif','footer/kacfooter_r2_c02_f2.gif','footer/kacfooter_r2_c02_f4.gif','footer/kacfooter_r2_c03_f3.gif','footer/kacfooter_r2_c03_f2.gif','footer/kacfooter_r2_c03_f4.gif','footer/kacfooter_r2_c04_f3.gif','footer/kacfooter_r2_c04_f2.gif','footer/kacfooter_r2_c04_f4.gif','footer/kacfooter_r2_c06_f3.gif','footer/kacfooter_r2_c06_f2.gif','footer/kacfooter_r2_c06_f4.gif','footer/kacfooter_r2_c08_f3.gif','footer/kacfooter_r2_c08_f2.gif','footer/kacfooter_r2_c08_f4.gif','footer/kacfooter_r2_c09_f3.gif','footer/kacfooter_r2_c09_f2.gif','footer/kacfooter_r2_c09_f4.gif')"+">");
    }



    </body>
    <noscript>
    <body background='images/8bd_canoes.jpg'>
    </noscript>
    </html>

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It defeats the purpose to put the noscript after the closing body tag. The noscript is there to 'open' the body when js is disabled.

    I know nothing about DW, sorry.

    For the onload question...

    Code:
    <html>
    <head>
    <script>
    window.onload = function() {
      MM_preloadImages(...);
    }
    
    ...
    Last edited by MikeFoster; Mar 1, 2003 at 23:40.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •