Archive for the ‘JavaScript’ Category.

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

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

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

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

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

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

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

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…

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

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>

div content mit javascript scrollen

Designer sind das Böse. Wieder und wieder und wieder kriege ich Vorlagen von Designern/Grafikern für Webseiten und kann mich dann des Eindrucks nicht erwehren, dass die Damen und Herren Designer noch nie in ihrem Leben im Internet waren. Scrollbars sind ein essentieller Bestandteil einer Webseite und ich weiß, der "scheußliche graue Balken" schmerzt das Designerherz, aber Scrollbars sind eine Gegebenheit, an der man nicht rumwerkeln sollte.

Selbstverständlich muss ich genau das trotzdem regelmäßig machen. Wen interessiert Barrierefreiheit, wen interessiert es, ob die User Javascript aktiviert haben oder nicht? Neue Wege zu scrollen müssen her, da ansonsten das ästhetische Empfinden der Designerschaft erheblich gestört würde. Nun gut, ich hab mich damit abgefunden. Mach ich halt Javascript Scrollbars.

Und genau deshalb bin ich heut zufällig auf ein simples aber geniales Javascript gestoßen: Scroll div content with Javascript

Das hat mir ne Menge Arbeit und Sucherei erspart, herzlichen Dank.