Geeks With Blogs
Brian Schroer Don't Call Me Mort!
Technorati Tags: ,

 

Extinct

I'm using the jQuery UI Autocomplete plug-in on my current intranet project, and am impressed with how powerful and easy to use it is. It works great on my development PC with Internet Explorer 8, and I was very pleased with myself.

…until I tested on one of our "thin client" machines, and my beautiful autocomplete dropdown looked like Swiss cheese:

SwissCheese

The browser on the thin-client is, you guessed it - everybody's favorite browser - IE6.

IE6 has z-index issues that lets dropdowns and some other elements peek through the top layer.

Another jQuery plug-in to the rescue: bgiframe. It can be used to surround the autocomplete dropdown in an IFrame to work around the IE6 z-index bug (and if you're using a real browser, it's smart enough to do nothing).

Now my dropdown looks like quality American cheese on IE6!:

AmericanCheese

Posted on Monday, July 12, 2010 9:21 PM JavaScript , jQuery | Back to top


Comments on this post: jQuery UI autocomplete / IE6 fix with bgiframe plug-in

# re: jQuery UI autocomplete / IE6 fix with bgiframe plug-in
Requesting Gravatar...
Could you give us the code for how you surround the autocomplete dropdown in an IFrame please?

Thanks,
Alan.
Left by alano444 on Nov 17, 2010 9:51 AM

# re: jQuery UI autocomplete / IE6 fix with bgiframe plug-in
Requesting Gravatar...
The IFrame is generated by the jQuery plugin (http://plugins.jquery.com/project/bgiframe).

All I had to do in my script was point my textbox to the plugin:

$('#personSearch').bgiframe();
Left by Brian Schroer on Nov 20, 2010 9:20 AM

# re: jQuery UI autocomplete / IE6 fix with bgiframe plug-in
Requesting Gravatar...
didn't work for me ....throws exception
Left by Ilya on Nov 29, 2010 4:46 AM

# re: jQuery UI autocomplete / IE6 fix with bgiframe plug-in
Requesting Gravatar...
The jquery ui autocomplete widget has a dependency on bgiframe. By adding the script reference to bgiframe between jquery-1.4.2.min.js and the jquery-ui-1.8.5.custom.min.js solved it for me.
Left by Eugene on Nov 29, 2010 7:20 AM

Your comment:
 (will show your gravatar)


Copyright © Brian Schroer | Powered by: GeeksWithBlogs.net