Archiv

Artikel Tagged ‘JavaScript’

jQuery: Cross-Browser Mouse-Over-Sound bei Bildern

22. September 2010

Heute möchte ich etwas aus der Entwickler-Küche plaudern …

Es geht um die Anforderung eines meiner Kunden, der in seinem Online-Shop einen Sound-Effekt haben wollte, wenn der Besucher mit der Maus über die Header-Grafik (Bildchen) fährt. Der Ton sollte aber wieder stoppen, wenn der Cursor, der Mauszeiger die Grafik wieder verlässt. Das natürlich endlos wiederholbar :-) .

Nun grundsätzlich sollte man solche Sound-Effekte, wenn überhaupt, nur sparsam verwenden. Neben dem generellen Nerveffekt, denke ich auch an den Mitarbeiter im Großraum-Büro, der möglicherweise nicht so scharf drauf ist, dass  Kollegen und Chefs mitbekommen, wo er sich im Internet rumtreibt ;-) .

Im vorliegenden Fall war eine solche Anforderung aber durchaus legitim. Es geht nämlich um einen Online-Shop für Tontechniker, Tonmeister, Theater, Radio, Film und Fernsehen. Dort werden professionell aufgenommene Töne an Sound-Profis verkauft. Na ich denke ein Link zum Shop mit einem solchen Soundeffekt-Bild sagt mehr als 1000 Worte.

Hier ist der Link : http://www.your-sounds.com

Einfach mal mit dem Mauszeiger über das Header-Bild (Brücke mit Mikro) fahren …

Mehr…

Open Source, Web 2.0 ,

Cross Browser – JavaScript zur Iframe-Höhenanpassung

4. Juni 2010

Vor einigen Wochen bekam ich den Auftrag eine Forensoftware in ein Internet-Portal einzubetten. Dies geschieht sinnvollerweise mit einem Iframe.

Nun eigentlich kein Problem, aber der Teufel steckt im Detail …

Automatische Breitenanpassung ist einfach: Der iFrame bekommt das Attrribut ‘width=”100%”‘

Die Anpassung der Höhe ist aber schwieriger. Man muss bedenken, dass sich die Höhe des Fensters bei der Arbeit mit der im Iframe eingebetteten Applikation permanent ändert. Bei einem Forum : Die Fensterhöhe der Forenübersicht wird sicher unterschiedlich zur Ansicht eines beliebigen Artikels sein. Und bei verschiedenen Artikeln ist die Höhe sicher auch jedesmal anders.

Eine Antwort darauf ist die Angabe eine festen Höhe im Iframe. Also zum Beispiel mit ‘height=”500px”‘. Passt diese Größe nicht, dann werden durch die Default-Voreinstellung ’scrolling=”auto”‘ automatisch Scrollbars (Bildlaufleisten in deutsch) erzeugt. Schön ist etwas anderes ;-)

Was also tun ? Die andere Antwort ist ein JavaScript-Event an den Iframe zu “hängen”. Dieser wird bei jeder Größenänderung des eingebetteten Applikations aktiviert und kann dazu benutzt werden, die Größe des Iframes entsprechend zu ändern.

Klingt doch gut, nicht wahr ? Leider ist es nicht so ganz einfach, weil das Document Object Model (DOM) des Iframes auf jedem Browser anders ist. (DOM : damit kann man jedes Element einer HTML-Seite von z.B. JavaScript adressieren und ändern; z.B. auch die Höhe des Iframes)

Nun nachdem ich durch diese Hölle der Inkompatibilitäten gegangen bin, ist ein Script entstanden, das ich mit der Welt teilen möchte. Hoffe damit einigen Web-Entwicklern dieser Welt einige graue Haare zu ersparen ;-)

Mehr…

Allgemeines, Open Source, Web 2.0 , ,