I have set up a jQuery.popeye site where you can find documentation and demos.

You will also find links to a new feature request forum and bug tracker there. Hope you like the new stuff!

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.

In den vorherigen Tutorials und Beispielen hatte ich diesen weggelassen, damit die Hintergrundgrafiken, die einem Rollover-Link per CSS zugewiesen werden, nicht vom Linktext, also dem Text zwischen dem öffnenden und schließenden <a>, überlagert werden.

Unschön! Der entstehende Code hat keine semantische Aussagekraft, von derSuchmaschinenfreundlichkeit ganz zu schweigen. Außerdem zeigen ältere Browser bei Einsatz dieser Technik dann gar nichts an, der Link wird also unsichtbar für den Benutzer. Kurz gesagt: ein Link sollte immer einen Ankertext haben.

Hier also der Code verbesserte Rollover-Code:

Linktext 1

a.rollover {
	display: block;
	float: left;
	width: XYpx; /* Breite einer Rollover-Status-Grafik  */
	height: 0px !important;
	padding-top: XYpx; /* Höhe einer Rollover-Status-Grafik */
	overflow: hidden;
}
#rollover1 {
	background: url(rollover.png) no-repeat left 0px;
}
#meinRollover1:hover {
	background: url(rollover.png) no-repeat left -XYpx; /* Höhe einer Rollover-Status-Grafik (negativ) */
}
#rollover1:active {
	background: url(rollover.png) no-repeat left -XYpx; /* doppelte Höhe einer Rollover-Status-Grafik (negativ) */
}

Dabei verwende ich wieder eine Grafik, in der die drei Rollover-Stati übereinander in einer einzigen Datei abgespeichert sind, die dann jeweils nur in ihrer Position als Hintergrundgrafik der Links verschoben wird. Dies geschieht durch die Angabe des negativen Abstands in Pixeln zum oberen Rand der Grafik. Neu ist, dass der Linktext zwar da ist, durch die CSS-Anweisungen aber so weit nach unten verschoben wird, dass er nicht mehr über der Grafik liegt, sondern unsichtbar wird.

Wie das Ergebnis genau aussieht, zeigt dieses Beispiel.

Kompatibel mit folgenden Browsern:

• Mozilla 1.7
• Firefox 1+
• Opera 9+
• Safari (Windows) 3+
• Internet Explorer 6+ (allerdings keine Anzeige des dritten Status :active)

So weit alles kalter Kaffee.

Liegen diese fließenden <div> innerhalb einer Container-<div>, ergibt sich aber folgendes Problem: float bewirkt, dass die <div> in der Höhe über die Eltern-<div> (den Container) nach unten herausragen (laut CSS-Spezifikationen auch so vorgesehen…). In anderen Worten: Der Container “kennt” die Höhe seiner Kinder-<div> nicht mehr und erhält als Höhe null, anstatt sich der Höhe seiner Kinder anzupassen und diese zu umschliessen (siehe Beispiel 1 und folgendes Code-Beispiel).

#child1 {
	float:left;
	width: 250px;
	height: 400px;
}
#child2 {
	float:left;
	width: 350px;
	height: 250px;
}

Hallo, ich bin der container.


Ich heiße child1!



Und ich bin child2!

Die lässt sich einfach durch den altbekannten Trick lösen, unterhalb der fließenden <div>eine Weitere einzufügen, der clear: both; zugewiesen wird. Damit wird der Container gezwungen, seine untere Grenze hinter diesen Paragraphen zu verschieben, er erkennt jetzt scheinbar die Höhe der Kinder-<div> an (siehe Beispiel 2).

Hallo, ich bin der container.


Ich heiße child1!



Und ich bin child2!

So weit, so gut. Nur wird dadurch nicht nur ein überflüssiges Element in den Quellcode eingefügt, dieses Element besitzt zudem auch noch keinerlei semantische Bedeutung, es dient lediglich dazu, den Browser auszutricksen.

Dabei lässt sich der gewünschte Effekt auch ohne zusätzliches Markup erreichen, es reicht eine zusätzliche Zeile CSS. Dem Container muss bloß overflow: hidden; zugewiesen werden, so einfach.

Toll. Funktioniert mal wieder nicht in IE6 und darunter. Der alte Knacker rechnet intern mit einem Model names hasLayout, ein Zustand, der bei vielen HTML-Elementen im IE6 durch das Setzen bestimmter CSS-Eigenschaften hervorgerufen wird. Erst wenn ein Element “Layout hat” (hasLayout = true), kann es eine eigene Höhe haben.

Hier liegt der Knackpunkt. Um IE6 dazu zu bewegen, der Container-<div> ebenfalls eine Höhe größer als Null zu spendieren, reicht overflow nicht. Die Rettung bringt hier entweder die Zuweisung einer festen width (also alles außer auto), oder, falls dies aus Designgründen nicht möglich sein sollte, der Einsatz von Microsofts proprietärem CSS-Attribut zoom: 1;.

Für einen umfassenden Hack, der ältere Internet Explorer einschließt, siehe auch diesen Artikel auf positioniseverything.net.)

Will man den Container auch noch dazu bringen, sich der Breite seiner Kinder anzupassen, anstatt auf volle 100% zu gehen, fügt man noch ein display:table; ein (funktioniert mal wieder nicht in IE). Siehe hierzu Beispiel 3 und Beispiel 4!

Der Vollständige CSS-Code:

#container {
	overflow: hidden;
	display: table;
}
#child1 {
	float:left;
	width: 250px;
	height: 400px;
}
#child2 {
	float:left;
	width: 350px;
	height: 250px;
}

CSS bietet zur Positionierung von Hintergrundgrafiken die 5 Werte left, right, top, bottom und center, wobei center sowohl vertikale als auch horizontale Positionierung einschließt. Aus diesen 5 Werten lässt sich also eine Matrix mit 9 verschiedenen Positionen erstellen:

Genau wie diese Matrix lässt sich auch eine Grafik aufbauen, die 3 verschiedene Grafiken mit jeweils 3 Rollover-Stati vereint. Doch zunächst zu den einzelnen Rollover-Grafiken. Ich will auf meiner Website 3 Rollover mit jeweils verschiedenen Grafiken einbauen. Dazu lege ich drei Grafiken an, die jeweils die drei gewünschten Rollover-Stati enthalten (normal, mouseover und click):

Bild 1 hat eine Dateigröße von 8,16 KB

Bild 2 hat eine Dateigröße von 3,76 KB

Bild 3 hat eine Dateigröße von 6,18 KB, macht also insgesamt 18,1 KB.

Durch folgenden Code lässt sich nun aus jeder dieser Grafiken ein Rollover erstellen:

#meinRollover1 {
	display:block;
	width: 106px;
	height: 118px;
	background: #FFF url(rollover.gif) no-repeat left top;
}
#meinRollover1:hover {
	background: #FFF url(rollover.gif) no-repeat left center;
}
#meinRollover1:active {
	background: #FFF url(rollover.gif) no-repeat left bottom;
}

Dabei geben width und height natürlich die Dimensionen nur eines der Einzelbilder, die die verschiedenen Stati darstellen, an (Beispiel).

Nun kombiniere ich, wie in obiger Matrix, alle 9 Einzelbilder in einer einzigen Datei:

Dabei achte ich darauf, dass jedes Einzelbild auch entsprechend seiner CSS-Positionierung in der Datei platziert wird. Jedem Einzelbild wird also genau so viel Platz eingeräumt, wie das größte Einzelbild beansprucht. Ebenso platziere ich die Einzelbilder entsprechend der CSS-Matrix, das Einzelbild zum Beipspiel, das nach der CSS-Matrix sowohl vertikal als auch horizontal zentriert wird, muss also auch in der Datei ebenso zentriert werden. Dies lässt sich in Photoshop besonders leicht durch die Verwendung von Hilfslinien erreichen. Zur Verdeutlichung hier nochmal die kombinierte Grafik mit eingezeichneten Hilfslinien:

Mit folgendem Code erstelle ich nun 3 völlig voneinander unabhängige Rollover-Links, die alle nur diese einzige Datei verwenden:

a {
	display:block;
}
#meinRollover1 {
	width: 106px;
	height: 118px;
	background: #FFF url(rollover_combined.gif) no-repeat left top;
}
#meinRollover1:hover {
	background: #FFF url(rollover_combined.gif) no-repeat left center;
}
#meinRollover1:active {
	background: #FFF url(rollover_combined.gif) no-repeat left bottom;
}
#meinRollover2 {
	width: 44px;
	height: 79px;
	background: #FFF url(rollover_combined.gif) no-repeat center top;
}
#meinRollover2:hover {
	background: #FFF url(rollover_combined.gif) no-repeat center center;
}
#meinRollover2:active {
	background: #FFF url(rollover_combined.gif) no-repeat center bottom;
}
#meinRollover3 {
	width: 104px;
	height: 73px;
	background: #FFF url(rollover_combined.gif) no-repeat right top;
}
#meinRollover3:hover {
	background: #FFF url(rollover_combined.gif) no-repeat right center;
}
#meinRollover3:active {
	background: #FFF url(rollover_combined.gif) no-repeat right bottom;
}

Jedem einzelnen Rollover werden dabei die Dimensionen zugewiesen, die das tatsächliche Einzelbild beansprucht, die Positionierungwerte werden aus der CSS-Matrix übernommen.
Hier ein funktionierendes Beispiel der 3 Rollover.

Das Resultat: Die kombinierte Grafik belegt 14,6 KB, was gegenüber den Deteigrößen der drei einzelnen Grafiken (zusammen 18,1 KB) einer Reduzierung von 20% entspricht.

Sicherlich sind jedem noch die 50 Zeilen Javascript-Code bekannt, die Adobe ImageReady produziert, um Links mit grafischen Rollover zu versehen. Dabei wurde bei Mouseover über ein Grafik per Javascript der Pfad dieser Grafik durch den Pfad einer Anderen ersetzt. Die Ersatz-Grafiken müssen dabei vorher, ebenfalls per Javascript, in den Browser vorgeladen werden, damit beim Rollover keine Verzögerung auftritt. Obwohl diese Technik inzwischen veraltet ist, produziert ImageReady leider weiterhin diese Lösung.

Die Nachteile dabei sind:

• Aufspaltung der Rollover-Grafik in 2 Grafiken, dadurch müssen auch 2 HTTP-Requests abgefeuert werden um die Grafiken vom Server zu holen, was sich auf die Ladezeit der Site auswirken kann (wenn viele Rollover benutzt werden),
• 50 Zeilen Javascript zuviel,
• ImageReady bedient sich keiner externen Event-Handler, sondern platziert die Javascript-Aufrufe in den Link-Tags (mittels onmouseover, onmouseout, etc). Dies ließe sich natürlich beheben leicht beheben, doch
• der Effekt funktioniert sowieso nicht bei ausgeschaltetem Javascript (D’Oh).

Glücklicherweise gibt es eine Lösung, die ohne Javascript auskommt und dabei ohne CSS-Hacks in allen modernen Browsern funktionieren sollte.

Nehmen wir folgende Grafik:

Diese soll mit einem Rollover versehen werden, so dass sie bei Mouseover folgendes anzeigt:

Getrennt habe beide Grafiken eine Dateigröße von knapp 8 Kb und es sind 2 HTTP-Requests nötig, um beide abzurufen.

Kombinieren wir beide Grafiken in eine, indem wir die Höhe der Grafikdatei auf 200% aufziehen und die zweite Grafik unterhalb der ersten platzieren, erhalten wir folgendes:

Das Resultat: knapp 7 Kb Dateigröße, ein HTTP-Request – Ladezeit verringert, Ziel 1 erreicht.

Doch wie wird die Grafik nun eingebunden, damit nicht beide Rollover-Stati gleichzeitig zu sehen sind? Nehmen wir folgenden XHTML-Code

und fügen folgendes als CSS dazu

#meinRollover1 {
	display:block;
	width: 126px;
	height: 151px;
	background: #FFF url(rollover1.png) no-repeat top;
}

Zeile 1: Die Umstellung des Inline-Elements A auf ein Block-Level-Element bewirkt, dass wir diesem eine Höhe und Breite zuweisen können. Natürlich nehmen wir hier die Dimensionen der Grafik, als Höhe allerdings die halbe Höhe, also die ursprüngliche Höhe des Teils der Grafik, den wir anzeigen möchten. In Zeile 4 wird die Grafik dem Link dann als Hintergrundbild zugewiesen.

So weit, so gut. Wie kommt nun der Rollover-Effekt zu Stande? Glüclicherweise unterstützen alle Browser den Einsatz des Pseudolements :hover bei Links (bei anderen Elementen tut sich der IE6 immer noch schwer, ihm kann allerdings mit Einbindung der csshover.htc geholfen werden, was wiederrum dazu führt, dass das CSS-Stylesheet nicht mehr korrekt validiert).

Fügen wir also eine weitere CSS-Beschrebung ein:

#meinRollover1:hover {
	background: #FFF url(rollover1.png) no-repeat bottom;
}

Eine einzige Zeile CSS reicht hier aus, um den gewünschten Effekt zu erzeugen. Die Hintergrundgrafik wird beim :hover-Status einfach unten ausgerichtet, und das Licht geht an (Beispiel).

Natürlich gib es auch Situationen, in denen man anderen Elementen als einem Link einen grafischen Rollover zuweisen möchte. Hierbei ist, wie oben schon erwähnt, zu beachten, dass nicht alle Browser :hover bei anderen Elementen wie z.B. DIV unterstützen. Hier kann man entweder A-Elemente als Layout-Elemente verwenden, sie per Javascript mittels void(0) deaktivieren und evtl. den Cursor ändern, damit der Benutzer nicht merkt, dass es sich um einen Link handelt. Dies ist aber semantsich nicht korrekt, denn in XHTML ist ein Link ein Link und sollte so verwendet werden.

Stattdessen kann man vorerst nur die Datei csshover.htc in sein Sytlesheet einbinden

html, body {
	behavior:url("csshover.htc");
}

was allerdings dann kein valides CSS mehr ist, und darauf warten, dass zukünftige Browsergenerationen (Winke Winke, IE7) hier bessere Unterstützung für :hover bieten. IE7 wirklich schnell übernommen wird, hier ist das Problem nämlich gelöst.