Home » jQuery » jQuery, bgiframe and IE6 z-order hacks

jQuery, bgiframe and IE6 z-order hacks

tp_vol3_006 Well, it probably looks like an odd title.  But let’s face it: we still have to support IE6 for some of our clients no matter how much we don’t like it or it shouldn’t be.  And one of the most frustrating items that we ever had to support in IE6 is the fact that certain controls and plug-ins don’t obey z-order.

What this means in a practical sense is that if we have a menu layer that drops over one of these misbehaving bad boys, we have to find some hack around it.

The problem I had to solve is that the code for this project is done.  There isn’t a lot of room for tweaking.  The menu we are using is something that is not going to be modified easily.  So, any solution I came up with had to “plug in” to what we already had.

Sounds like a job for jQuery to me.

I did find a solution that claimed it would do the trick: bgiframe.  But of course you notice that qualifier, “claimed.”  Yes folks, I had trouble getting it to work.

What exactly does bgiframe do?  It scripts the iframe hack into your popover layer.

You see, our menu system is based on a styled, unordered list.  When I told bgiframe to grab the UL and put the iframe in it, it just didn’t work.  Oh, it put the iframe in.  But the select windows still showed through.

What was odd was that even the iframe was transparent.  Odd, I thought.  It isn’t supposed to be transparent.

So after half a day of searching, looking at the source for bgiframe, and generally pulling my hair out, I finally remembered seeing this little “hack” for the src property of the iframe.  It’s actually noted in the link to the iframe hack I have above.

The iframe code should look like:

<iframe src="BLOCKED SCRIPT'&lt;html&gt;&lt;/html&gt;';" scrolling="no" frameborder="0" ...

But the script that bgiframe produces looks like:

<iframe src="javascript:false;" scrolling="no" frameborder="0" ...

the src=”javascript” thing works most of the time.  In fact, I kind of got everything working by putting the iframe arount the LI tags instead of around the UL tag.  Only I had some other issues when I did that, and it is a sub-optimal way of getting this all working.  Hack of a hack.

Now, I fixed this by changing the bgiframe source.  But if you don’t want to be that intrusive, you can just call bgiframe using the src parameter.

$("ul").bgiframe({ src: "BLOCKED SCRIPT'&lt;html&gt;&lt;/html&gt;';" });


Other post in jQuery

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • jQuery – Modal DialogjQuery – Modal Dialog Last week I introduced the jQuery Dialog plugin, which allows us to put various dialogs on the screen. I only gave out the basics of this flexible widget to keep things simple.  […]
  • jQuery – Calling Your Own FunctionsjQuery – Calling Your Own Functions While jQuery has a lot of functionality built into it, you may find that you have a need to implement your own functions and attach them to the jQuery framework in some way.There are […]
  • JQuery, Cufon, and Dynamic ContentJQuery, Cufon, and Dynamic Content Yesterday I mentioned a new tool called Cufon that allows you to easily embed fonts in your web site. One quirk about this tool is that your HTML has to be rendered prior to applying, […]
  • jQuery GUI – DragjQuery GUI – Drag About a year and a half ago I helped develop an application that required drag and drop functionality.  We used the MS-AJAX framework to implement it at the time because it was available […]
  • jQuery – Creating Plug-insjQuery – Creating Plug-ins Last week we looked at how to have jQuery execute our own functions. I suggested at the time that if you were going to need to use that function in multiple applications, you might want […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.