Archive for the ‘jQuery’ Category

gestylter File Upload Button im IE8

19. September 2013

Ich brauchte einen komplett gestylten “Bild hochladen” Button und konnte daher das standard input type=”file” nicht verwenden. Bzw. habe ich es folgendermaßen ausgeblendet:

  1. input[type="file"]#imagefile{
  2. visibility:hidden;
  3. width:0;
  4. height:0;
  5. }

Mein gestylter Button war ein label mit for=”imagefile”, damit beim Klick auf denselben dann eh automatisch der Upload geöffnet wurde. Und da ich nach dem Upload automatisch das Formular abschicken wollte, hatte das input Element noch ein onchange Event:

  1. <input id="imagefile" type="file" name="imagefile" onchange="$('#formid').submit();" />

Damit wurde in allen normalen Browsern beim Klick auf das Label der Upload aufgerufen und nach dem Auswählen der Datei das Formular automatisch abgeschickt. Das klappte allerdings nicht im IE 8. Der wollte partout das Formular nicht abschicken, es gab keine Fehlermeldung, kein Anhaltspunkt was das Problem war.
Stellt sich raus, ein Label funktioniert nicht wie es soll im IE8, wenn das input Element auf hidden gesetzt ist. Daher habe ich width und height bei 0 gelassen, für den IE8 allerdings extra das Stylesheet geändert:

  1. input[type="file"]#imagefile{
  2. visibility:visible;
  3. }

Jetzt klappts auch mit dem Internet Explorer.

Colorbox und Datepicker: Dropdowns lassen sich nicht öffnen

26. Juli 2013

Ich hatte ein ganz merkwürdiges Problem, wenn ich in der jquery colorbox einen jquery UI datepicker verwenden wollte: im Firefox (und im IE) ließen sich die Dropdowns der Jahr und Monat selects nicht öffnen. Das ganze hat mich Stunden gekostet, bis ich im Code der Colorbox eine Funktion namens trapFocus gefunden habe, die dieses Problem verursacht. Und praktischerweise kann man der colorbox von Anfang an gleich sagen, dass sie trapFocus nicht machen soll:

  1. $.colorbox({ trapFocus: false });

Und dann klappts auch mit dem Datepicker!

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.

anpassbare jQuery Lightbox

19. April 2012

Auf der Suche nach einer Lightbox stieß ich nach kurzer Recherche auf die ColorBox. Ich brauchte eine Lightbox, deren Design 100% anpassbar ist und da war die ColorBox auf den ersten Blick die beste Alternative. Auf den zweiten Blick hat mich das Plugin sogar noch mehr überzeugt, durch Flexibilität, durchdachte Methoden und Funktionen, gute Dokumentation und hilfreiche Beispiele. Tatsächlich glaube ich, das ist eins der Plugins, die mich am positivsten bisher überhaupt überrascht haben. Mein ewiger Dank gilt dem Schöpfer dieses großartigen Plugins!

kein Rückgabe Wert bei $.ajax im Safari

13. Februar 2012

Wenn $.ajax und $.post NUR im Safari keinen Wert zurückliefern, kann es am Pfad liegen. Ich habe das ganze über http://www.domain.de/pfad/zu/ajax.php aufgerufen – das klappte im Firefox gut, im Safari nicht. Mit /pfad/zu/ajax.php klappte es dann aber!

contentflow – Bilder werden nicht angezeigt

19. Januar 2012

ContentFlow ist ein ganz nettes tool, allerdings ist die Version 1.0.2 offenbar nicht ganz ausgereift. Ich hab festgestellt, dass öfter Bilder “verschwinden”, es werden einfach nicht alle Bilder angezeigt sondern ein leeres DIV. Das Bild wird nach dem nächsten refresh wieder nromal geladen, dafür kanns sein dass ein anderes nicht mehr sichtbar ist. Das war für mich natürlich untragbar, aber nach kurzer Recherche habe ich festgestellt, dass eine alte Version gut funktioniert:

ContentFlow 1.0.0

Transparente PNGs haben im IE7/IE8 plötzlich einen schwarzen Rand

21. Dezember 2011

Dass der Internet Explorer 6 mit Transparenzen nicht so gut klarkommt, ist mir schon lange klar. Aber heute war ich sehr erstaunt, als meine PNGs im IE8 auf einmal schwarze Ränder hatten.

Offenbar liegt das an jquery… sobald man mit transparenzen oder hide/show arbeitet, kann das passieren. Ich hatte das Problem bisher nur bei Projekten, wo es eh schon stressig war, deshalb hatte ich nie wirklich Zeit, das Problem genauer zu recherchieren und eine praktikable Lösung zu finden. Ich habe mir bisher damit beholfen, die Bilder doch als jpg abzuspeichern oder die PNGs im 8-bit-Modus zu speichern. Oder, wenn das beides nichts gebracht hat, mir Alternativen zu den jquery Funktionen erlaubt.

IE7 und jQuery

15. November 2011

Ich weiß ja, dass IE immer gerne rumzickt. Aber das war doch mal wieder ein Highlight. Ich hatte ein Formular erstellt mit diversen Formularfeldern:

  1. <div class="label">Marke:</div>
  2. <select name="marke" id="marke"><option value=""></option><option value="m1">Marke1</option><option value="m2">Marke2</option></select>
  3. <div class="label">Geschäft:</div>
  4. <input type="text" name="geschaeft" id="sf_geschaeft" value="" />
  5. <div class="label">Ort:</div>
  6. <select name="ort" class="sf_ort" id="sf_ort"><option value=""></option><option value='1'>Salzburg</option><option value='2'>Innsbruck</option></select>

Die ausgewählten Werte dieser Felder woltle ich dann mittels jQuery auslesen.

  1. shopname = $('#sf_geschaeft').val();
  2. brand = $('#marke option:selected').val();
  3. ort = $('#sf_ort option:selected').val();

Hat bei “marke” auch geklappt, aber bei Ort wollte IE7 dann plötzlich nicht mehr: “das Objekt unterstützt die Eigenschaft oder Methode nicht”. WTF? Es sind zwei Selects, warum liest jQuery eins und das andere nicht? Zuerst hatte ich die Vermutung, dass IE7 irgendwie nicht damit klarkommt, dass Ort den gleichen Klassennamen wie ID hat – aber auch nach dem Ändern dieses Zustands wollte IE7 mir den Ort einfach nicht auslesen.

Nach einer relativ langen Recherche bin ich auf die Seite jQuery Fallen im Internet Explorer gestoßen, die mir zweifellos noch mehr Suche erspart hat. Offenbar ist IE7 eine weitaus launischere Diva als ich dachte. Hin und wieder – und völlig willkürlich, wie es scheint – möchte die Diva, dass man die Variablen vorher definiert. Ich hätt’s beinah gar nicht erst probiert, weils mir so absurd erschien. Dann hab ichs glücklicherweise doch versucht und – siehe da! – auf einmal motzt auch der IE7 nicht mehr:

  1. var ort;
  2. shopname = $('#sf_geschaeft').val();
  3. brand = $('#marke option:selected').val();
  4. ort = $('#sf_ort option:selected').val();

Ich bin noch nicht sicher, ob ich lachen oder weinen soll über dieses merkwürdige Verhalten… Aber wer immer noch IE7 nutzt is eigentlich eh selber schuld…

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. }

jquery lightbox – Höhe im IE

28. März 2011

So hübsch die jquery lightbox auch ist, bei mir wollte sie mit dem Standard Stylesheet im Internet Explorer nicht die richtige Höhe annehmen. Kleiner CSS Fix für das Problem:

  1. #jquery-overlay {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. z-index: 90;
  6. width: 100%;
  7. height: 500px;
  8. background-color: #000;
  9. filter:alpha(opacity=60);
  10. moz-opacity: 0.6;
  11. opacity: 0.6;
  12. }
  13. body >#jquery-overlay {
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. }
open sidebar