jQuery idTabs bei Seitenwechsel speichern

Aug 04

MartinEntwicklung
2 Comments

In letzter Zeit beschäftige ich mich wieder verstärkt mit JavaScript, bzw. jQuery. Heute habe ich auf Basis von idTabs (@BissyDesign – Danke für den Tipp ;-) ) ein Horizontales Menü beflügelt, dessen Untermenüpunkte nun bei klick auf einen Obermenüpunkt ohne Seitenreload wechseln. Lange Rede kurzer Sinn:

und so sieht es nach dem klick auf “Nachrichten” aus:

Leider hat die Sache mit idTabs einen Haken, und zwar springt das Menü nach einem Seitenreload wieder zum ersten Tab zurück und bleibt nicht beim gewählten. Doch dafür habe ich eine ganz einfache Lösung gefunden.

Als erstes müssen wir das jQuery Cookie Plugin einbinden: http://plugins.jquery.com/project/cookie
Nächster Schritt ist die Modifikation des idTabs Plugins, man suche folgende Stelle im Code (im Unkomprimierten Zeile 95):

$(id).show();
return s.change; //Option for changing url

und ändere dies zu:

$(id).show();
// write to cookie
$.cookie('PAGENAME_menu', id.split('#')[1], { expires: 1 });
return s.change; //Option for changing url

(PAGENAME_menu ist der Cookie Name, welcher an die Gegebenheiten angepasst werden muss).

Anschließend muss noch der Funktionsaufruf von idTabs Modifiziert werden:

$("#menu ul").idTabs();

zu

id = $.cookie("PAGENAME_menu");
if(id == null) { id = 0; } // failback if no cookie is availible
$("#menu ul").idTabs(id);

Nun wird bei jedem Tabwelchsel der aktuelle Tab in einen Cookie geschrieben. Beim neu laden der Seite wird dieser ausgelesen und dessen Wert (der letzte Tab) an idTabs als default Tab übergeben. Es muss lediglich beachtet werden, das keiner der Tabs das Attribut “class=’selected’” hat, da unser Hack Trick sonst nicht funktioniert.

jQuery Element Blinken lassen

Aug 03

MartinEntwicklung
1 Comment

Blinkende Gifs, man sieht sie nicht mehr allzu oft, aber dennoch sind sie manchmal brauchbar, um dem Benutzer etwas zu signalisieren. Leider kann man diese schlecht handhaben, denn ein mal erstellt, müsste man bei einer Änderung wieder von vorne beginnen.

Warum also nicht JavaScript dazu verwenden? Mit dieser kleinen Funktion kann man ein Element blinken lassen. Und zwar wird es erst versteckt und dann wieder eingeblendet (jQuery muss natürlich vorhanden sein):

function blink(elm, msec, speed) {
  $(elm).hide();
  $(elm).fadeIn(speed);
  window.setTimeout("blink('" + elm + "', " + msec + ", '" + speed + "')", msec);
}

elm – sagt welches Element blinken soll, z.B. “#messageIcon”
msec – die Anzahl der Milisekunden, bis die Funktion erneut aufgerufen wird. Hier sollte allerdings beachtet werden, das der Effekt auch eine gewisse Zeit benötigt, und der Nutzer durch schnelle Zeiten gestört werden könnte.
speed – gibt die Geschwindigkeit an, entweder “fast” oder “slow”.

jQuery – Mehrere Elemente verbergen

Mai 15

MartinEntwicklung
2 Comments

Jeder der mehrere Elemente auf ein mal mittels jQuery verstecken will, die gleich benannt wurden, wird früher oder später feststellen müssen, das der Selektor immer das erste gefundene Element verwendet.

<div id='test'>Test</div>
<div id='test'>Test 2</div>
<div id='test'>Test 3</div>

Um dies zu umgehen habe ich mir folgende 2 Funktionen geschrieben, welche alle Elemente die auf den 1. Parameter zutreffen nacheinander abarbeiten. Hierzu hole ich mir alle zutreffende Elemente via “$(name).get()”, anschließend kann ich diesen Array mittels “$.each()” durchlaufen (das jQuery Pendant zu foreach() unter PHP). Da ich nun den Index des Elementes habe kann ich nun das entsprechende Element verbergen.

function hideAll(name, speed) {
  elm = $(name).get();
  $.each(elm, function(index, value) {
    $(name, [index]).hide(speed);
  });
}

Und hier noch eine zum Wieder ein faden (sanftes einblenden) der Elemente:

function fadeInAll(name, speed) {
  elm = $(name).get();
  $.each(elm, function(index, value) {
    $(name, [index]).fadeIn(speed);
  });
}

Als 2. Parameter wird immer der Speed übergeben in der die Animation ablaufen soll, diese sind die jQuery typischen wie “slow” und “fast”.

Noch mal zu unserem obigen Beispiel, sollen nun alle 3 div’s ausgeblendet werden so benötigen wir lediglich folgenden Code:

hideAll('#test', 'slow');

und zum wieder einblenden selbstverständlich:

fadeInAll('#test', 'slow');

JavaScript und str_replace()

Mai 05

MartinEntwicklung
No Comments

Unter JavaScript gibt es leider keine so tolle str_replace() Funktion wie unter PHP. Hier das JavaScript Pendant dazu:

// hier unser Text
string = 'Test and Test';
// nun ersetzen wir es
new = string.split('and').join('und');
// und geben das ersetzte aus
document.write(new);

Wer gar nicht mehr von der PHP Funktion str_replace los kommt, kann sich auch seine eigene Funktion schreiben:

function str_replace(search, replace, string) {
  return string.split(search).join(replace);
}