Results 1 to 5 of 5

Thread: Thumbnail Viewer Alignment Issue

  1. #1
    Join Date
    May 2006
    Location
    Washington, DC
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thumbnail Viewer Alignment Issue

    Script: Image Thumbnail Viewer
    http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    I have this script installed, and it works great in all browsers except Safari. In Safari, sometimes the image windows appear where you click (as they're supposed to), but if you scroll down and click on one of the thumbnails farther down the page the image window loads in a random location even farther down the page--not directly over the clicked thumbnail. Here's a page I'm working with:

    http://www.bayphoto.com/catalog/socards.php

    Is there any way to fix this? I noticed that it's working perfectly on the demo page, so I'm hoping I just need to rearrange the div tag or something easy...

    Thanks in advance for your help!

  2. #2
    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

    The script is not rated for Safari. I don't have a Mac to test on and neither does DD. The demo page has just a few images in one location so, it is no real test for Safari. I would guess that whatever the script uses to determine how far the page has been scrolled and/or the location of the item clicked needs to be reworked for Safari.
    - John
    ________________________

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

  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

    I'm just looking at the script some more, it uses this:

    Code:
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    to determine which browser it is being used on. If Safari recognizes document.all but not clientHeight, that would be the problem. I'd try changing the above to:

    Code:
    var ie=document.all&&!document.getElementById
    var ns6=document.getElementById&&document.all
    If that fixes it in Safari, it will mess it up in other browsers but, at the same time, it will let me know how to fix the script's code for Safari and the others. If it doesn't take care of things in Safari, then I'm not sure what the problem is.
    - John
    ________________________

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

  4. #4
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Somewhat related to the Safari alignment question. I am using Image Thumbnail Viewer II at http://davissignstudio.com I resolved an alignment issue by adding valign="top" to the <td> tag that contained the loadarea, everything works as expected in Safari. My problems are with FireFox and iCab (the only other browsers I have used to view the site, don't do windows, so I don't know what it looks like in IE or others). My problem is when an image is loaded in the loadarea in Safari the page size adjusts an allows the image to load with no overlapping. In Firefox and iCab the page does not resize and the image either goes over or under elements on the lower part of the page. I figure I could probably work around this by designating the height and width of the load area and or adjust the size of the images being loaded. But I would rather make all browsers work like Safari. I use standards compliant code and hope that all browsers render my site the way I intend it to look.

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Roodavis:
    The problem is that you have an explicit height declared for the loadarea DIV:

    Code:
    <div id="loadarea" style="width:500px; height: 250px">
    Firefox will honor that as it should. Just remove the height attribute.

    p.s: In the future please start a new thread for new questions (instead of replying to another one).

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
  •