2.01 Chrome CSS Menu Script iFrame Issue

[MrTovson]

1) Script Title:
Chrome CSS Drop Down Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
3) Describe problem:
Upgrading chrome.js from Version 2.0 to 2.01 to attempt to fix the does not work for an unknown reason in a specific case. I have an application that runs nested portals in iFrames (ie. SubPortal within a Portal). 2.01 wipes out an entire iFrame with text:

<IFRAME id="iframeshim" src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>
in IE7 at the very least.

Zip file attached in a reply below.

All these files are in the root of an extracted Demo directory downloaded from Dynamic Drive for the Chrome CSS Drop Down Menus. Any help would be greatly appreciated. To reproduce, replace the working chrome.js with version 2.01.

[MrTovson]

Zip file below:
\
\
V

[MrTovson]

Found a place to upload the entire example.

[MrTovson]

I've gotten a lot of views here, but no replies. Should I expect one, or should I just go back to the prior version? This bug requires some ugly hacks or extreme layout changes to work around.

I've provided a decent example. Hopefully, someone will get back to me soon...

[MrTovson]

- bump -

[MrTovson]

No workaround was identified. Looks like I need to redesign the layout to work with the control, which means reverting back to the old version is the only option.:(

[thatadamguy]

I was having a problem with the IFRAME getting removed after a postback using IE7 (ASP.net/IIS backend).

I don't know the details but I know that the object referencing the IFRAME becomes null after the postback so the failure occurs when the positionshim and hideshim functions try to change properties of the object.

I simply added checks to see if the object was null and avoided those functions. I imagine this may cause IE6 problems but using this knowledge, I'm sure someone can come up with a way to make this backward-compatible. I personally don't have the time right now :)


dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
if( null != this.shimobject ) {
this.positionshim() //call iframe shim function
}
}
},

hideshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined" && null != this.shimobject)
this.shimobject.style.display='none'
},

Thanks,
Adam