iframe: Close link failing intermittently / resize gif movin

[montclairguy]

I'm having some issues (likely related to CSS) with iframe expanders on my site, especially with Chrome. The main issue is with html expanders and iframes. The close button fails to work on the first click sometimes, and other times fails to work at all. Esc doesn't even work.

Here's a sample on the live site:
http://www.shopblt.com/cgi-bin/shop/sho ... d=!ORDERID!

Click the item number in the left column and then try closing it. For me, it only works sometimes. Also, if you grab the resize handle at the bottom right and resize the window, you'll notice that the things shift and the resize.gif moves almost out of view. It becomes off by about 5px. The issue also affects the "Specs" links on that page as well (also iframe calls).

I don't have this problem with ajax expanders at all, but need to use iframe for these calls. Any help would be appreciated.

[MisterNeutron]

I did some poking around on your page, but there's simply too much going on to be able to debug it.

I can see the closing problem in Chrome, but the standard Highslide JS demo page for an iframe doesn't exhibit the same problem. All I can suggest is that you strip out all the other Javascript on the page (this really can't be a CSS problem), start with a clean, unmodified highslide-full.js, and then start adding your own material back in until the error reappears.

And BTW, modifying the Highslide script itself is not recommended, since it makes debugging so difficult. Leave the defaults alone, but then load a separate highslide-config.js file (after loading the default script, of course), containing only your changes from the defaults.

On the disappearing resize handle, the same comments apply. You've done all sorts of modifications to the Highslide CSS. I notice that you've prepended extra classes to many of the settings, and you've deleted attributes that may be needed. Again, drop back to the standard, unmodified highslide.css, see how things look, and only then start making your own changes.

As if all that weren't enough, your HTML contains over 60 validation errors. There's just no telling what effects all those errors might be having.

Wish I could be more help, but there are just too many nonstandard things happening on that page.

[montclairguy]

The site is being converted from 20 year old HTML code, so there are certainly bound to be HTML validation errors, however, I doubt they have anything to do with the javascript issues. There's only a one line modification to highslide.js, but I do like your idea of a separate config file to keep things cleaner.

I do know the default examples don't have the iframe resize handle and close problem. I was hopeful that others had experienced a similar issue and could get on top of a quick fix, but it looks like I'm going to have to really debug this myself.

As far as "too many non-standard things", I'm not sure that's an accurate way of describing it. Perhaps, "too many advanced things" or "too many customized things".

Thanks for the reply.

[MisterNeutron]

As far as "too many non-standard things", I'm not sure that's an accurate way of describing it. Perhaps, "too many advanced things" or "too many customized things".

If the stuff worked, you'd have a point.

[montclairguy]

As far as "too many non-standard things", I'm not sure that's an accurate way of describing it. Perhaps, "too many advanced things" or "too many customized things".

If the stuff worked, you'd have a point.

It is functional, except fully in Chrome, and was actually based on suggestions from the developer about 7 years ago. The issue is related to the way previous versions of HS worked, and lacked the kind of heading and header available now. I don't believe the "headingText" attribute existed previously, and the javascript I wrote, based on discussions here with the developer, inserted a similar element to the one his "headingText" attribute causes to be inserted.

Upon reviewing how he accomplishes this now, the "headingText" element he creates is in a slightly different place with slightly different CSS, which is what's causing the issues in Chrome.

The solution is to remove the custom code we had worked on, and convert to using "headingText".