type: utility

release: 0.0

status: moving to a core jQuery plugin, will not be part of UI

documentation: http://docs.jquery.com/Plugins/bgiframe

demo:

 

 

---

 

1 - Description:

 

This is a low-level utility that can be used for any widget that needs to sit on top of the page and be protected from select boxes and Flash movies showing through in Internet Explorer 6 due to z-index issues. Some current jQuery UI plugins use the bgiframe plugin but having this capability included in the library will make implementation easier for end developers.

 

• Typical use case is to call this on a widget (menu, plugin, dialog, modal overlay) or any DOM element and have the iframe layer auto-sized to match the element's dimensions, then positioned directly under the widget (same x,y coordinates).

• Multiple stackfixes many be need at once. For example, a non-modal dialog would need a stackfix on the shadow and on the dialog. Or a flyout menu would need a stackfix on each menu.
• This should have no visual appearance (transparent)
• This should protect elements from select boxes, Flash, and any other plugins that typically interfere

 

 

Bgiframe plugin Brandon Aaron:

http://plugins.jquery.com/project/bgiframe

http://docs.jquery.com/Plugins/bgiframe

 

---

 

2 - Visual Design:

 

No visual design needed

 

---

 

 

3 - Functional Specifications/Requirements:

 

A single plugin method stackfix, with options:

• top, default auto == .currentStyle.borderTopWidth
• left, default auto == .currentStyle.borderLeftWidth
• width, default auto == offsetWidth
• height, default auto == offsetHeight
• opacity, default true (via filter:Alpha(Opacity=0)) - when would disabling make sense?
  • can be disabled for performance tuning
• src, default 'javascript:false;' - is there any case where this needs to be customized?
  • can be tuned to work around issues in certain enviroments, eg. SSL

 

The options top, left, width and height can be configured with static values for better performance.

---

 

4 - Markup & Style:

 

None. Just an iframe with IE6 specific properties.

 

---

 

5 - Latest version of plugin:

 

http://jquery-ui.googlecode.com/svn/trunk/ui/ui.stackfix.js

 

---

 

6 - Open issues being discussed

 

The adapted code uses IE-specific expression for top, left, width and height properties, as well as opacitiy. Each can be configured with static values, replacing the dynamic expression and therefore potentially improving performance a ton. Whether these options can be used depends on each usecase, eg. a fixed-size dialog could optimize, a resizable couldn't. A full-page overlay could optimize as it doesn't move and has a fixed size, as long as it doesn't have do resize with the window (does it?).

So basically this boils down to dialog-specific issues (currently the only place where stackfix is used).

 

Also this plugin needs to be adapted for Firefox2/Mac, currently its only IE6.