Friday, November 18, 2005

Overlapping DIV Element Issues

OK, my last technical article for this week, before i move on to my step-by-step "Build your Web Site"

This is a common question for all techqie, when u have a DIV element which overlapped any windowed controls like text box, drop down list, list box and etc, no matter what z-index your set, it will always be covered by the text box.

Here goes the solution

IFRAME

The IFRAME control has a unique nature in IE 5.5. It can
exist in both the zIndex of windowed controls and the zIndex of regular HTML
elements. Simply put, you can shim an IFRAME under your DIV. The
IFRAME will block out the windowed control.
Set up your IFRAME:





The src attribute is set with a useless JavaScript statement so that the IFRAME
does not try to load a page (which you won't notice it doing, but it will be the
cause for tripping the "Unsecured Items" message if you use it on a HTTPS
page).

You can code your IFRAME as a static element on the page, or if you
are going to be using more than one of them you may want to dynamically create
them as required. The insertAdjacentHTML() method is good for that.

Now, all that is needed is to size the IFRAME according to the dimensions of your DIV, position it, place it one layer beneath the DIV in the zIndex order and
make it "visible". The IFRAME's style object will allow you to do these
tasks:

iframe.style.top
iframe.style.left
iframe.style.width
iframe.style.height
iframe.style.zIndex
iframe.style.display

Hope this may help, for anyone who facing this problem.

3 Comments:

At 9:59 AM, Blogger webcoyote said...

Will this work with layering problems with activeX controls? I am trying to layer Flash over another activeX control AND use transparency in the Flash layer. As sson as I turn on transparency in the Flash (param name="wmode" value="transparent") the Flash disapears (or goes under). A Flash Tech note states "By default, browsers place embedded plug-in content, such as a Flash movie or Java applet, on the topmost layer. ..." Well, I have two controls.

I experimented with IFrames but it does not seem to help. Any ideas?

Thanks

 
At 7:35 AM, Anonymous Anonymous said...

I've got the same problem - trying to place a transparent .swf over top of a .wmv. Help would be greatly appreciated!

 
At 2:20 PM, Blogger Web Idiot said...

hey guys...

i've found some great pages explaining this issue! I really hope this help.

CSS Positioning: http://www.brainjar.com/css/positioning/default5.asp

Revenge of Menu Bar:
http://www.brainjar.com/dhtml/menubar/default11.asp

 

Post a Comment

Links to this post:

Create a Link

<< Home