Archiv

Artikel Tagged ‘JavaScript’

Extensions für Google Chrome / Chromium

Ich schreibe derzeit einige Extensions für den Google Browser und finde das ein ganzes Stück einfacher als bei Firefox. Bin zwar nach wie vor Firefox-Nutzer und schreibe auch Extensions für diesen Browser, aber hier gebührt Google wirklich Lob. Das ist sehr gut gelöst.

Hintergrund für meine Extension-Entwicklung ist das Projekt 2ndspring. Letztlich geht es um ein Entwicklung für das Tablet um ältere Mitbürger mit einer vereinfachten Bedienoberfläche den Einstieg in das Netz der Netze möglichst einfach und intuitiv zu gestalten. Dabei nutzen wir natürlich Browser-Technologie als Basis und haben uns hier für den Google-Browser entschieden. Diese Entscheidung ist maßgeblich bestimmt durch 2 Dinge

  • Chrome gibt es auch als App für das iPad
  • Wir werden Telefonie und Video-Conferencing im Browser anbieten und nutzen daher WebRTC („WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs.“)

Ziel unserer Entwicklung ist eine Web-Applikation, die im Kioskmode betrieben wird. Der Anwender am Tablet sieht also eine Seite ohne Browser-Rahmen und Navigation im Vollbild-Modus. Damit er aber während des Surfens wieder zurück zu seinem Heimathafen, der 2ndspring-Startseite, findet, benötigt er als Overlay eine unaufdringliche, aber permanent verfügbare Navigation über jeder besuchten Seite. Dazu soll die 2ndspring-Extension sich bei jedem Seitenaufruf einklinken und diese Navi drüberlegen (inject html auf gut Neudeutsch).

Nun aber genug Hintergrund. Ich beschreibe jetzt einfach kurz die Komponenten einer solchen Extension und biete dann zum Schluss einen Link um sich den Source-Code herunterzuladen. Mehr…

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

22. September 2010 8 Kommentare

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…

KategorienOpen Source, Web 2.0 Tags: ,

Cross Browser – JavaScript zur Iframe-Höhenanpassung

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…