Archive for the ‘JavaScript’ Category

iPhone und iPad daran hindern, den Bildschirmschoner / Schlafmodus anzumachen

30. April 2014

Problem: ich habe eine Webseite, die es erfordert, dass die Nutzer 5 Minuten einer Animation zusehen und dabei möglichst nichts anderes tun und eben auch nicht den Bildschirm berühren. Das klappt am Desktop soweit auch gut, aber in der mobilen Version macht das natürlich Probleme. Wenn User eingestellt haben, dass sich der Screensaver / Ruhemodus / Automatische Sperre zu früh einstellt, dann ist vor Ablauf der Zeit natürlich Sense. Der Kunde wollte das Feature aber unbedingt haben und offen gesagt hielt ich es für unmöglich, daran etwas ändern zu können. Aber: es stellt sich raus, mit einem fiesen kleinen Javascript Trick kann man iphone und ipad tatsächlich austricksen! Die Lösung: man täuscht einen regelmäßigen Redirect vor, den man dnan aber vor seiner Ausführung wieder stoppt. Konkret sieht das ganze so aus:

  1. iosSleepPreventInterval = setInterval(function () {
  2. window.location.href = the_path;
  3. window.setTimeout(function () {
  4. window.stop()
  5. }, 0);
  6. }, 30000);

Danke, wie schon so oft, an Stackoverflow für diesen netten Trick!

jQuery: Javascript Link, der sich in neuem Tab öffnet (target=_blank)

16. Januar 2013

Eigentlich ist das kein großes Problem. Ich habe ein div, und beim Klick auf das gesamte DIV soll sich in einem neuen Tab eine bestimmte Seite öffnen. Weil in dem DIV aber weitere Links sind (sinnlos, ich weiß) und weil ich generell keinen Link draus machen möchte, stellt sich natürlich die Frage, wie man das DIV entsprechend verlinken kann. window.open macht in einigen Browsern keinen neuen Tab sondern tatsächlich ein neues Fenster auf (nicht Sinn der Sache), diverse Hacks mit dem simulieren eines Link-Klicks gehen nicht in Chrome.
Die Lösung: Man simuliert ein Formular mit einem target _blank, und das macht sogar Chrome mit!

  1. <div onclick="blankLink('http://www.ophidia.net');"> ... </div>

und via Javascript passiert dann folgendes:

  1. function blankLink(page){
  2.     $('body').append('<form id="blankform" action="'+page+'" target="_blank"></form>');
  3.     $('#blankform').submit();
  4.     $('#blankform').remove();
  5. }

Klappt – zumindest nach meinen bisherigen Tests – überall.

jwplayer und OVA plugin

23. Februar 2012

Okay das hat mich sinnloserweise eine Menge Zeit und den letzten Rest an Nerven gekostet.

Vorgabe:

Videos kommen von vimeo, die müssen in einem eigenen Player abgespielt werden. Ihnen muss ein Werbevideo vorgeschaltet werden, die URL zu diesem Werbevideo enthält eine 10stellige Zufallszahl, weswegen die Konfiguration des ganzen nicht über ein config.xml file erfolgen darf sondern inline passieren muss. Vorgabe war ebenfalls, mit der Javascript API zu arbeiten anstatt das ganze schlichtweg über das <embed> Tag einzubauen.

Problem:

Die Doku ist mies. Ganz ehrlich, einfach mies. Man sucht Stunden und findet jede Menge Beispiele für Konfigurationen mit dem <embed> Tag, gleichzeitig aber fast keine Beispiele der javascript Einbindung. Hinzu kam, dass ich nach dem Kauf des jwplayers im zugehörigen Forum um Hilfe bat und dabei auf völliges Unverständnis und Desinteresse stieß. Der entsprechende Helfer war schien meinen Ausführungen kaum folgen zu können (Drogen?), verlangte einen Link, gab dann der URL des Werbevideos die Schuld und schließlich, als auch er mir folgen konnte, der ultimative Tipp: “poste doch im OVA Plugin Forum“. Ich möchte betonen dass es bis zu diesem Ratschlag immerhin 3 Tage gedauert hat…

Lösung:

Im OVA Plugin Forum war man auf einmal extrem schnell mit den Antworten, sehr hilfsbereit und hilfreich, kompetent und freundlich und binnen kürzester Zeit habe ich mit deren Hilfe das ganze zum Laufen gebracht. Hier mal ein fertiges Beispielscript, vielleicht hilft es anderen dabei, nicht denselben Hürden zu begegnen wie ich:

  1. <div id="container">Loading...</div><script type="text/javascript">
  2. jwplayer('container').setup({
  3.     'width': 500,
  4.     'height': 300,
  5.     'file': 'http://player.vimeo.com/external/123456.sd.mp4?s=858afaac8eebccc7acb544e998799a3d',
  6.     'skin': 'jwplayer/bekle.zip',
  7.     'plugins': {
  8.        'jwplayer/ova-jw.swf': {
  9.                     'ads': {
  10.                        'notice': { 'textStyle': 'smalltext' },
  11.                        'filterOnLinearAdMimeTypes': false,
  12.                        'schedule': [
  13.                              {
  14.                                   'zone': '47',
  15.                                   'position': 'pre-roll',
  16.                                   'server': {
  17.                                       'type': 'direct',
  18.                                     'tag': 'http://www.adververdomain.de/video?[<?php echo rand(1000000000, 9999999999); ?>]'
  19.                                   }
  20.                              },
  21.                              {
  22.                                   'zone': '48',
  23.                                   'position': 'auto:bottom',
  24.                                   'width': 320,
  25.                                   'height': 80,
  26.                                   'startTime': '00:00:02',
  27.                                   'duration': '5'
  28.                              }
  29.                         ]
  30.                     }   
  31.        },
  32.        'sharing-3': {
  33.            'link': '<?php echo $_SERVER['PHP_SELF']; ?>'
  34.        },
  35.        'fbit-1': {
  36.            'link': '<?php echo $_SERVER['PHP_SELF']; ?>'
  37.        },
  38.        'plugins': {
  39.            'gapro-2': {}
  40.         }
  41.     },
  42.     'modes': [
  43.         {type: 'flash', src: 'jwplayer/player.swf'},
  44.         {type: 'html5'},
  45.         {type: 'download'}
  46.     ]
  47. });
  48. </script>

Danke nochmal für die kompetente Hilfe im OVA Plugin Forum!

OVA mit JW Embedder

26. Januar 2012

Es hat mich wirklich VIEL Recherche gekostet um herauszufinden, wie man den JW Player mit dem OVA Plugin verwendet, so man den JW Embedder benutzen will. Und hier die einfache Lösung:

  1. jwplayer("container").setup({
  2. 'flashplayer': "player.swf",
  3. 'width': 700,
  4. 'height': 400,
  5. 'file': 'video.mp4',
  6. 'plugins': {
  7. 'ova-trial': true
  8. },
  9. config: 'config.xml'
  10. });

So einfach… wenn mans mal weiß…

jquery waterwheel carousel

12. Oktober 2011

Ich brauchte ein jquery plugin, das mir diverse bilder in rotiert. Das jquery waterwheel carousel war schon ziemlich perfekt für meine Zwecke und ich kann es eigentlich nur jedem empfehlen. Ich musste für meine Zwecke noch zwei kleine Änderungen machen:

1. das carousel verarbeitet nur images, ich brauchte allerdings unbedingt dieselbe Funktionalität für divs (mit Bildern als Hintergrundbild).

Lösung: im Quellcode wird direkt nach Bildern gesucht. Man muss also überall nur nach .find(‘img’) suchen und dies durch .find(‘div’) bzw. find(‘div.klassenname’) ersetzen. Das ganze funktionierte dann zuerst nicht mehr in Chrome, das lag an der preload Funktion. Da es sich um Hintergrundbilder handelt und ich nicht weiß, wie man die vorlädt, habe ich das ganze einfach auskommentiert:

  1. function preload(callback) {
  2. callback();
  3. }

Das wars schon. Dann spielt auch Chrome das Spiel mit.

2. das carousel kann immer nur um ein item weiterscrollen, ich brauchte aber die Möglichkeit, mit jedem Klick um 3 Items weiterzuscrollen.

Die Pfeile werden mit einer Funktion namens moveOnce belegt. Um nun nicht ein Item weiterzuscrollen sondern drei, habe ich mir eine neue Funktion moveThrice geschrieben:

  1. function moveThrice(direction) {
  2. var currentCenterIndex = data.currentCenterItem.data().index;
  3. if ((currentCenterIndex < 3 && direction === true) || (currentCenterIndex > (data.totalItems-3) && direction === false)) {
  4. clearTimeout(data.autoPlayTimer);
  5. if (options.edgeReaction === 'reset') {
  6. rotateCarousel(!direction,data.totalItems-1);
  7. } else if (options.edgeReaction === 'reverse' && options.autoPlay !== 0) {
  8. rotateCarousel(!direction,3);
  9. options.autoPlay *= -1;
  10. }else{
  11. if(direction == true){
  12. new_number = currentCenterIndex;
  13. }else{
  14. new_number = data.totalItems - currentCenterIndex - 1;
  15. }
  16. rotateCarousel(direction, new_number);
  17. }
  18. } else {
  19. rotateCarousel(direction,3);
  20. }
  21. }

jsTree – Node öffnen

04. Januar 2011

Nachdem ich letztens open_all benutzt habe, weil ich das mit dem Öffnen einzelner Nodes nicht hinbekommen habe, musste ichs heute nochmal recherchieren und habe jetzt die Lösung um einen Ast meines Trees zu öffnen:

  1. $("#treenav").jstree("open_node", $("#Inhalte"));

Inhalte ist die ID des Listenelements, das ich öffnen möchte.

tinymce popup: Scrollbars anzeigen

29. November 2010

Ich habe ein kleines Plugin für tinyMCE geschrieben und hatte das Problem, dass das Popup Fenster nicht ausreichte, die Scrollbars allerdings fehlten. Nach kurzer Recherche das Ergebnis:

  1. ed.addCommand("mceimageEditor", function() {
  2. Screenw = Math.round(screen.width * 8/10);
  3. Screenh = Math.round(screen.height * 8/10);
  4. ed.windowManager.open({
  5. file: url + "/imageEditor.php?eid=1",
  6. width: Screenw,
  7. height: Screenh,
  8. scrollbars: "yes"
  9. });
  10. });

innerHTML und IE8

13. Oktober 2010

Großer Gott. Ich hab dereinst mal ein Plugin für tinyMCE geschrieben, so ne kleine Bildverwaltung, wo man Bilder uploaden, beschneiden, verkleinern etc. kann. Und jetzt stell ich fest, dass das ganze im IE8 nicht mehr funktioniert. Warum? Weil IE8 ein Problem mit innerhtml hat…

Beschrieben wird das ganze hier.

Meine Lösung, und es ist keine gute Lösung, aber ich hatte wenig Zeit: behelfsmäßig jquery einbauen und anstatt innerHTML zu nutzen das entsprechende div über jquery einbauen. Das ganze ist jetzt eine grauenvolle Mischung aus javascript und jquery Syntax aber irgendwie klappts.

Vorher:

  1. par = document.createElement("p");
  2. par.innerHTML = "<div style= 'clear:both;' >" + akt_src + "</div>";
  3. par.innerHTML+= "<a href=''>test</a>...";
  4. td = document.createElement("td");
  5. td.appendChild(par);

Nachher:

  1. par = "<div style='clear:both;'>"+akt_src+"</div>";
  2. par += "<a href=''>test</a>...";
  3. td = document.createElement("td");
  4. $(par).appendTo(td);

Unglaublich aber wahr, so klappts. Für den Moment muss es reichen. Bis ich mal die Zeit kriege, das komplett in jquery zu übertragen.

Frames… sie wollen einfach nicht sterben…

06. Oktober 2010

Es gibt ein uraltes Projekt, an dem ich hin und wieder noch was ändern muss. Dieses Projekt wurde mit Frames und Tabellen aufgebaut, damals noch state-of-the-art, heute ein grausames Ärgernis. Das Problem: Ich musste vom Content Frame (mainFrame) aus per Javascript eine Funktion in der Navigation Links ansprechen. Aber im linken Frame (leftFrame) gab es nochmal ein frameset mit 2 weiteren Frames, das ganze kann man sich in etwa so vorstellen:

Ich musste also aus einem Frame heraus ein Frame in einem anderen Frame ansprechen und dort eine Funktion aufrufen.

In leftBottom.php habe ich die Funktion doOverlay definiert:

  1. function doOverlay(){
  2. //blablabla...
  3. }

und in mainFrame.php rufe ich dies folgendermaßen auf:

  1. parent.leftFrame.leftBottom.doOverlay();

elRTE Javascript Fehlermeldung im IE

24. September 2010

Ich war sehr erstaunt, dass elRTE bei mir eine JavaScript Fehlermeldung erzeugte – allerdings nur im IE und das auch nur manchmal. Nach einigem Herumprobieren stieß ich dann auf das Problem: Wenn kein Inhalt drinsteht, dann entsteht diese Fehlermeldung.

  1. <div class="editor">Das ist ein Test!</div>

funktioniert, aber

  1. <div class="editor"></div>

erzeugt die Fehlermeldung. In meinem Fall brauchte ich elRTE, um eine WYSIWYG Eingabe in einem User Interface zu ermöglichen. Da kann es auch vorkommen, dass das Editor Feld leer bleibt, also musste ich mir etwas einfallen lassen.

Die Lösung: Ich prüfe, ob mein editor einen Inhalt hat und wenn nicht, schreibe ich statt nichts ein leerse Div hinein. Das sieht keiner und die Fehlermeldung bleibt weg:

  1. <div class="editor"><div></div></div>
open sidebar