DHTML Window appearing underneath menu

**dmwhipp** · 02-01-2009, 10:39 PM

1) Script Title: DHTML Window Widget

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ndow/index.htm

3) Describe problem: The window appears underneath the drop down menu on my page in IE. Is there any way to fix this?

Here is the example:
https://www.gidgetsclothing.com/stor...er09-GentleGem

I tried using the iFrame which appeared to solve the problem, but then I got a security warning every time the window opened, even though my links to my image and css file were https://

Thanks in advance,
Deborah

**jscheuer1** · 02-02-2009, 08:01 AM

Where's the widget?

Anyways, this is probably an issue dealing with the z-index of the widget, make it higher than the menu's and that should solve it. If you want more help, please link to a page on your site with both the menu and the widget on it. Or if that link you gave does have both, tell us what we have to do to activate the widget.

**dmwhipp** · 02-02-2009, 05:20 PM

Thanks for looking at this. Here is a page with the menu and widget:
https://www.gidgetsclothing.com/stor...09-BriefCargos

To call the widget, click 'Click to Enlarge Swatches' under the title Brief Cargos.

The code for the widget is entered through my shopping cart and called by php.

I've never dealt with z-index issues before and have just looked them up this morning. I have two files for my menu, gidgets_var.js and menu_com.js. I did a search through both of them. There was no reference to z-index or zindex at all in the gidgets_var.js.

Here is what I found in the menu_com.js file that appears to reference it:

var Ztop=100;
and

this.style.zIndex=RcrsLvl+Ztop}}

Thanks,
Deborah

**dmwhipp** · 02-02-2009, 05:33 PM

Thanks so much for pointing out this was a z-index issue. I made the following change in my menu script and it solved the problem:

var Ztop=100;
to
var Ztop=75;

I'm not sure how to mark my original post resolved, but it is.

Thank you,
Deborah

**jscheuer1** · 02-02-2009, 05:46 PM

I see it now (the widget), but in IE 6 and 7 at least there is no problem with the menu. In IE 6 the select element is overlapping (I know, that's what you meant, but I was looking at the actual menu on the left at first). This is a known bug of IE 6 and earlier.

You could use the iframe method for importing the content, iframes will overlap selects even in IE 6, but there will still be a problem with the very edges and the drag bar of the widget, which even when an iframe is used are not in the iframe. And the iframe has drawbacks, when it is dragged, it must disappear, which would let the select bleed through again temporarily in IE 6, and generally doesn't look as good as the (I'm assuming) AJAX imported widget content you have now, which when dragged may remain visible.

Other than that, it would require a modification to the script to place an iframe behind the widget (known as iframe shim, available in many scripts that have this problem as an option, but not in this one that I can see) while it is displayed in IE 6. Or, we could make up a routine to hide selects while the widget is displayed in IE 6 - not optimal for this I wouldn't think. The other option would be to move the widget, and/or select so that they would be unlikely to come into contact with each other. This last is often the easiest method with a complex script of this nature.

Also, iframes in https environment's like you have, even if used only as shim, must have a src that is also https, otherwise there will be a security warning - no shopper wants to see that. For shim, this should be a blank https page, for the swatches (if using the iframe widget) that page would also have to be https, and there still must be a blank https page available for the script to use in this process.

**dmwhipp** · 02-02-2009, 05:53 PM

I spent an hour last night trying the iframe method, creating the blank https page, etc. and finally gave up on that. Having the widget appear over the menu in the left column is already a huge improvement, but it would be nice to resolve the issue of the select element.

I agree that moving the widget is the best option since this script is new and a bit complicated for me. Is there a way to center the widget horizontally but have it at the top of the page vertically?

Thanks,
Deborah

**jscheuer1** · 02-02-2009, 06:14 PM

Yes, you can set the top for the swatchbox id in css for IE 6 and less only in fact. Put this in the head of your page:

Code:

<!--[if lt IE 7]>
<style type="text/css">
#swatchbox {top: 100px!important;}
</style>
<![endif]-->

It need not be 100, but that seems to keep it away from the select and still look good. In those browsers (IE less than 7) it will only be able to be dragged horizontally.

A pretty good solution I think.