Results 1 to 8 of 8

Thread: Inserting image into table cell

  1. #1
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Inserting image into table cell

    I've written code that will conditionally insert an image into a table cell depening on the monitor resolution of the user - it doesn't work. Using straight HTML it does load the image correctly and display it. The section of code is as follows:

    <table width="92%" borders="0">
    <tr>
    <script type="text/javascript">
    <!-- hide from javascript impaired browser
    var width=screen.width;
    var height=screen.height;
    var status="false";
    if(width==1280 && height==1024 )
    {
    alert("have entered 1280x1024 mode");
    document.write('<tr width="350" height="399" align="center"><img scr="Design/Assets/father_john_1280_1024.gif"></td>');
    document.write('td width="488"><div align="center">');
    status="true";
    }
    // done hiding -->
    </script>
    ... various other HTML for the last cell ...
    </td>

    The alert was displayed showing that the JavaScript was working and was going to the right place in the decision structure. But it just showned a place holder for the image. Went I click on the properties of the image (no picture) it said "not available" but it loaded the image with straight HTML code

    Regards
    Dave

  2. #2
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default looking I saw an error

    Looking back at the code I saw a mistake - a " had been left out. But even when I corrected the error it still didn't display the image.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You have two <tr> tags in a row without a <td> tag:

    Code:
    <table width="92%" borders="0">
    <tr>
    <script type="text/javascript">
    <!-- hide from javascript impaired browser
    var width=screen.width;
    var height=screen.height;
    var status="false";
    if(width==1280 && height==1024 )
    {
    alert("have entered 1280x1024 mode");
    document.write('<tr width="350" height="399" align="center"><img scr="Design/Assets/father_john_1280_1024.gif"></td>');
    document.write('td width="488"><div align="center">');
    status="true";
    }
    // done hiding -->
    </script>
    ... various other HTML for the last cell ...
    </td>
    Also, the second <td> tag has no leading <

    Finally, when hiding from javascript impaired browsers, it is best to run as fast as you can too. Actually, the hiding and done hiding lines are not needed.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by David Pritchard
    I've written code that will conditionally insert an image into a table cell depening on the monitor resolution of the user
    The display resolution has relatively little bearing on the issue. My current resolution is 1024x768, but you certainly won't have that much space to work with: including an image of that size would mean I'd have to scroll both vertically and horizontally to view it all.

    it doesn't work.
    Yes, in more ways than one.

    If your intent is to provide various images at different sizes, list the dimensions available and let the user choose. Even if you just want to provide a very large image, link to it. Nothing more.

    Code:
    <table width="92%" borders="0">
       <tr>
       <script type="text/javascript">
       <!-- hide from javascript impaired browser
       var width=screen.width;
       var height=screen.height;
       var status="false";
       if(width==1280 && height==1024 )
       {
          alert("have entered 1280x1024 mode");
          document.write('<tr width="350" height="399" align="center"><img scr="Design/Assets/father_john_1280_1024.gif"></td>');
          document.write('td width="488"><div align="center">');
          status="true";
       }
       // done hiding -->
       </script>
          ... various other HTML for the last cell ...
       </td>
    That markup is invalid, both before and after the script runs.

    Mike

  5. #5
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default changes made - code is now

    I have made changes, code listed below, but still doesn't display the image

    <table width="92%" border="0">
    <tr>
    <script type="text/javascript">
    var width = screen.width;
    var height = screen.height;
    var status = "false";
    alert("have reached here");
    if( width == 1280 && height == 1024 )
    {
    alert("have entered 1280 x 1024 mode");
    document.write('<td width="350" height="399" align="center"><img
    scr="Design/Assets/father_john_1280_1024.gif"></td>');
    document.write('<td width="488"><div align="center">');
    status = "true";
    }
    </script>
    <p><strong><font color="#000000" size="7" face="Arial, Helvetica, sans-
    serif">Father John</font></strong></p>
    <p><strong><font color="#000000" size="4" face="Arial, Helvetica, sans-
    serif">our Spiritual Advisor</font></strong></p>
    </div></td>
    </tr>

    Regards
    Dave

  6. #6
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Mike,
    Thanks for the comments.
    How come the markup is invalid - sorry I don't understand - as you can see I'm still learning.
    In supplying a list of resolutions to the user does that mean I have to repeat each page on the web site five or six times (representing the different image sizes for each resolution). At the moment the web site analysis is showing 36 pages. That would now be 36x6 = 216 pages.
    I was hoping to dynamically formate the page, after the Javascript reading the monitor resolution.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There is no scr attribute for the img tag. Also, though the line wrapping may be an artifact of the way the forum has displayed your code on my monitor, you cannot have a line break in the middle of a document.write(), at least not the way it appears here:

    Code:
    <table width="92%" border="0">
    <tr>
    <script type="text/javascript">
    var width = screen.width;
    var height = screen.height;
    var status = "false";
    alert("have reached here");
    if( width == 1280 && height == 1024 )
    {
    alert("have entered 1280 x 1024 mode");
    document.write('<td width="350" height="399" align="center"><img //no line break allowed here
    scr="Design/Assets/father_john_1280_1024.gif"></td>');
    document.write('<td width="488"><div align="center">');
    status = "true";
    }
    </script>
    <p><strong><font color="#000000" size="7" face="Arial, Helvetica, sans-
    serif">Father John</font></strong></p>
    <p><strong><font color="#000000" size="4" face="Arial, Helvetica, sans-
    serif">our Spiritual Advisor</font></strong></p>
    </div></td>
    </tr>
    This will work:

    Code:
    <table width="92%" border="0">
    <tr>
    <script type="text/javascript">
    var width = screen.width;
    var height = screen.height;
    var status = "false";
    alert("have reached here");
    if( width == 1280 && height == 1024 )
    {
    alert("have entered 1280 x 1024 mode");
    document.write('<td width="350" height="399" align="center"><img src="Design/Assets/father_john_1280_1024.gif"></td>');
    document.write('<td width="488"><div align="center">');
    status = "true";
    }
    </script>
    <p><strong><font color="#000000" size="7" face="Arial, Helvetica, sans-
    serif">Father John</font></strong></p>
    <p><strong><font color="#000000" size="4" face="Arial, Helvetica, sans-
    serif">our Spiritual Advisor</font></strong></p>
    </div></td>
    </tr>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John
    Thanks - another person in another forum said the same thing. Once I made the syntax correction as you suggested it worked.

    Thanks very much

    Regards
    Dave

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
  •