Unique Problem with Image Thumbnail Viewer & eBay

[scytus]

1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:

This has been driving me nuts for the past few days, after searching the board and trying different solutions, I wasn't able to fix it.

I've taken time off from school to help my father with his business situation, and started putting together eBay templates for him. I have included a gallery to which I use the Image Thumbnail Viewer script when clicked on the larger thumbnail (on the right).

Here is the link: http://cgi.ebay.com/ebaymotors/ws/eBayISAPI.dll?ViewItem&item=260539064144

Now what happens in all browsers is that its completely perfect when you first load the page(or when you clear everything from a browser). No matter what position on the page you are, on that first/cleared visit, if you click the thumbnail, the enlarged image would load at the center of your screen.

The problem is if you go back to the page (or refresh) the enlarged image is no longer visible...unless you scroll down about 1200px. It seems to be at a fixed position in the center of my design (Not the center of the entire eBay page, but the center of the template room I'm given). So instead of the center of the screen, its the center of the template. So this is a vertical problem, not horizontal. Horizontally its still perfect.

A fix would be very, very appreciated, a lot of stress would be taken off my shoulders as I'm 99% finished with the template.


Solution I've tried: I've tried entering a "top: [xx]px!important; " position in the css for thumbBox, but came across a peculiar problem. In Internet Explorer/Firefox, "top" refers to the top of the template space given by eBay. In Chrome/Safari, "top" refers to the top of the page. EXCEPT, when you refresh the page in Chrome/Safari, "top" THEN refers to the top of the template, very odd.

My guess for a solution would be to make an absolutely fixed position in regards to the vertical position, though as previously mentioned, I failed at that attempt. Another guess would be to modify the javascript file to accommodate my needs, though I'm quite a novice at java.

Any help would be most appreciated

[ddadmin]

It's hard to debug your page by looking at your source code, as it's highly compressed/ obfuscated. It could be a number of things, though most likely it has something to do with the surrounding HTML in which the script is injected into that's causing the issue. We could try a few things and see if that changes anything. To start, inside the .js file, try adding the line in red to the existing code:


this.thumbBox=document.getElementById("thumbBox")
document.body.appendChild(this.thumbBox)

[scytus]

Just tried.

No change..other than in IE, most of the page(template portion) went blank.

EDIT: Should I post the HTML code I use in the description/template area? or would that not really be any significant help.

[ddadmin]

Hmm ok lets try something else. Try replacing the existing .js file of the script with the below version instead. Note that all this is shooting in the dark so to speak due to the reasons mentioned above. Posting the HTML code for the template area doesn't really help, as it would be out of context with the rest of the page and the various CSS files.

[scytus]

Got it

I applied the new javascript, though seems like with the same results.

[scytus]

I was wondering, would there be another method to find the Y offset, basically another method of calculating the top position? as it seems this method might be conflicting with eBay.


On a sidenote, I also noticed my li hover/active/focus attributes not being recognized in chrome/safari, in reference to the gallery thumbnails(non enlarged) I have on the page, it's full css. I know that it's not a script on DD, but I would be thankful for any advice on that.

[ddadmin]

Hmm the fundamentals of positioning a DIV vertically on the page so it's visible on the page is pretty much the same regardless of any possible tweaks to it. The problem in this case should be something else.

There are a few other scripts on DD that do something similar to this one. Have you tried perhaps:

http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

[scytus]

I tried both of the alternatives you pointed out, though apparently eBay has a problem with those scripts as well, and I couldn't really track down the problem...however I did find a somewhat unconventional solution to the Thumbnail Viewer script.

As odd as it is, when you first view the page on eBay, it works just as it should through the javascript. On the second view/refresh, it looks toward the CSS for direction (or at least that's what I've concluded), so I've included the following adjustments..



#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0px;
top: 0px;
width: auto;
padding: 10px;
padding-bottom: 0;
background: transparent;
visibility: hidden;
z-index: 100;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
margin-bottom: 2150px;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
margin-bottom: 2150px;
z-index: 90;
}


I tried putting the margin-bottom value on "thumbBox", though it had no effect whatsoever, so that's when I tried on the footer. However because it was on the footer and not the entire DIV itself, it left an extended trail of the box, so I had to set the background to transparent.

So far it works on every browser & all resolutions..I did however try to do a "margin-top" on thumbBox itself (to not have a div box trail), and while that did work, and it was completely clean..the "top" values differ from IE/FF and Chrome/Safari, and I don't know a way to get around that..the top value in chrome safari refers to the top of the page, whereas IE/FF it refers to the top of the template. I don't know how to insert a top value they would both recognize the same, or is there a way I can set a different top value for IE/FF and Chrome/Safari?