I recommend using IETester, it will throw all the errors you ever wanted (NOT!) at you. Combine it with Firebug Lite and sleep a little better.

Some solutions have been proposed, among them:

• hiding the select element on hover
• replacing it with an input element on hover
• or stop caring about IE6 altogether

These solutions all include drawbacks in usability or undesired UI changes, which can be confusing for the user. Another work-around, which is quite unnoticeable in the front-end is to place an invisible, empty IFRAME in the layer that will be positioned above the SELECT element.

Here’s how to do this jQuery-style:

The jQuery-Plugin:

jQuery.fn.activeXOverlap = function() { 

    $(this).each(function(i){
        var h   = $(this).outerHeight();
        var w   = $(this).outerWidth();
        var iframe  = ''
        $(this).prepend(iframe);
    });
}

The Plugin setup:

$(function() {
    $('.myHoverClass').activeXOverlap();
});

where .myHoverClass references all elements that should hover above the select.

The required CSS:

What this does is placing an Iframe behind every selected element, scaling it to the correct dimensions and hiding it from all browsers but IE6.

More than 100 comments on the first release of jQuery.popeye, an appearance on the frontpage of delicious.com and coverage in uncounted blogs…

I certainly didn’t expect that much interest. The numerous feature requests,  suggestions, bug reports and, in the end, acknowledgments and nice comments prompted me to continue development, as promised. So here it is, in a major release, a completely rewritten and overhauled jQuery.popeye, the image gallery plugin that started as an alternative to the famous JavaScript lightbox.

Download jQuery.popeye 1.0
from the jQuery Plugin Repository

What’s new

When you check out the example installation, you’ll immediately notice some changes and new features:

• The navigation buttons (next and previous image, enlarge / compact image) have moved. They will appear on mouseover on the popeye box and fade out accordingly. As a result, the user interface is less cluttered with navigational elements.
• Navigation is also possible in enlarged mode, as this was a big feature request.
• The caption is hidden by default and also shows on mouseover. It automatically adjusts to the amount of text with a smooth transition.
• The image counter can be placed either as an overlay above the image (and thus serves as a hint to the user that there’s more than one image to see), or it can be inserted in the caption or even completely turned of.
• There’s a new basic skin. I deliberately kept it quite blunt as to encourage you to design your own skin that better fits your website design. Designing a new skin is quite simple via adjustments to the included jquery.popeye.style.css.
• The original image list is hidden via CSS, so the user won’t see anything until jQuery.popeye has preloaded all the thumbnail images and then inserted the gallery in the page. In order to prevent a jumping effect once the images load, a placeholder div can be added to the original html which will be replaced by the gallery box.

Under the hood

Version 1.0 comes with a fresh set of options:

Usage

The HTML structure hasn’t changed, but if you like, you can now place an extra element (which can serve as a placeholder for users without JS) in the source.

                

                

                
...


        This element will be deleted once the gallery loads

Support

Please leave your comments and requests here in the blog. Bug reports can also be filed at the plugin repository issue tracker. If you make use of jQuery.popeye in one of your projects,I would be really interested to see the result! So feel free to link your site in the comment section.

524288?
2147483647?
-1?
No, that’s not my bank account balance…

Unlike any other attribute, maxlength is implicitly present on any input-element. I had to find this out the hard way trying to select only input-elements with an explicitly set maxlength via the jQuery-selector input[maxlength].

Well, that didn’t work. input[maxlength] returns all inputs, regardless of whether they have maxlength or not. The only conclusion this leaves us with is that browsers add a certain maxlength-value implicitly to any input-field.

What’s my browser doing with maxlength?

That’s exactly what I asked myself. A quick browser test left me quite surprised, but, hey – what did I expect – every browser behaving the same? Not in this world…

Every browser rendering engine implies a different value. The most reasonable browsers are Firefox (surprised?) and Opera – they are at least assuming a negative value. The other values seem (at least to me, maybe I’m just missing some nerdy inside joke) completely arbitrary are natural limits: 2147483647 is the highest possible 32-bit-number (2^32 /2 or 0111 1111 1111 1111 1111 1111 1111 1111), while 524288 is the same in 16 bit:

jQuery to the rescue

So back to the original problem – my solution for selecting only input-fields with maxlength-attributes based on these findings is as follows:

var inputs = $('input[maxlength!=-1][maxlength!=524288][maxlength!=2147483647]');

Ugly, I know. But it works.

Take the Browser Test
and post your result in the comment section!

Why?

Why would I want to select only this subset of input elements anyway? In my case, it was to display the number of total and remaining characters a user could enter.

Browsershots.org
Erstellt mehr oder weniger schnell (zwischen 10 Min. und 4 Stunden) Screenshots auf einer Vielzahl von Plattform-Browser-Kombi.
http://browsershots.org

Multiple IE
Tredosoft.com stellt diesen netten Installer zur Verfügung, mit dem sich nach einem Update auf IE7 alte IEs als Standalone-Versionen einrichten lassen.
http://tredosoft.com/Multiple_IE

IE Tester
Ein Webbrowser, der verschiedene Rendering-Engines emuliert. Kann inzwischen neben IE6 und IE7 auch IE8 Beta sowie weitere der üblichen Verdächtigen.
http://www.my-debugbar.com/wiki/IETester/HomePage