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

Related Post

  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]
  • jQuery – Loading Partial ContentjQuery – Loading Partial Content In previous posts, I've covered the core architecture of jQuery.  How it works.  How you call methods.  A brief overview of what's available. From here on out, we will […]
  • jQuery – Auto Scrolling the SliderjQuery – Auto Scrolling the Slider Question from Yuhsin: I would like to make the jquery steps slider to do auto-increment when the window loads. Is there an easy way to trigger the slide to move by itself ? I'm assuming […]
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple […]
  • jQuery Expand/Collapse Using Head TagsjQuery Expand/Collapse Using Head Tags I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from. The task started […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.