Jul/100
Mit jQuery eine CSS Klasse einem Objekt hinzufügen / entfernen
Dynamisch einem Objekt eine CSS Klasse - class="klasse" mit jQuery hinzufügen oder entfernen.
$("#objekt").addClass("klasse"); // hinzufügen
$("#objekt").removeClass("klasse"); // entfernen
$("#objekt").toggleClass("klasse"); // je nach dem ob vorhanden wird hinzugefügt oder entfernt
Jan/100
jQuery 1.4 – schneller, größer, besser – JavaScript Framework
Vor kurzem ist nun die neue Version von jQuery erschienen. Aktuell liegt sie in 1.4 vor. jQuery ist wohl eines der populärsten JavaScript Frameworks die es momentan gibt. Seit dem ersten Release sind nun 4 Jahre vergangen und es hat sich wieder einmal viel getan. So sind über 200 Bugs gefixed worden und einiges wurde für die Performance gemacht. Das hat leider zu folge das die Dateigröße auf 156 KB gestiegen ist. Daher sollte man für den Produktiven Einsatz immer die komprimierte Version nutzen.
Für die neue Version gibt es eine neue Seite auf der man mehr erfährt.
.css() soll ca. doppelt so schnell sein wie in jQuery 1.3.2, aber auch .html() ist nun ca. dreimal so schnell. Auf der bereits veröffentlichten neuen API-Site für jQuery 1.4 sind sämtliche Funktionen der neuen Version wie bspw. ".index()" oder ".unwrap()" enthalten.
Ich werde die neue Version auf jeden Fall in nächster Zeit testen und auch einsetzen. Erfahrungen schreibe ich dann in einem extra Artikel.
Aug/090
Wordpress: jQuery im Template / Theme einbinden
Wer sein Theme mit ein paar netten Effekten aufhübschen will, kann das schon in Wordpress integrierte jQuery benutzen.
Ich möchte euch heute kurz zeigen wie man jQuery am besten ohne großen Aufwand einbindet.
Ab Wordpress 2.2 ist jQuery von Haus aus dabei und muss nicht mehr extra im Theme hinterlegt werden sondern über die Wordpress eigene Funktion eingebunden werden. Dazu schreibst du in der header.php einfach folgenden PHP Code:
<?php
wp_enqueue_script('jquery');
?>
So das war auch schon alles.
Würde euch ein kleines Plugin helfen, welches per Knopfdruck jQuery einbindet?
via rene-design
Aug/090
jQuery: Das nächste Element ansprechen
Unser Ziel ist es, bei einem Hover das nächste Element einzublenden. Wie das mit jQuery realisiert werden kann, möchte ich hier einmal kurz erläutern.
Die HTML Struktur
<a href="#1" title="1">Link</a> <div class="box">Beschreibung 1</div> <a href="#2" title="2">Link 2</a> <div class="box">Beschreibung 2</div> <a href="#3" title="3">Link 3</a> <div class="box">Beschreibung 3</div>
Nach jedem a Element gibt es ein DIV mit der Klasse "box", diese ist per CSS standardmässig auf "display: none;". Ziel ist es nun bei einem Hover auf das a Element, die folgende DIV Box anzuzeigen.
Dazu setzen wir jQuery mit einem kleinen Codeschnipsel ein.
Das JavaScript
$(document).ready(function(){
$('a').hover(function(){
$(this).next("div").fadeIn("slow");
}, function(){
$(this).next("div").fadeOut("slow");
});
});
Sobald die Maus über das a Element bewegt wird, wird die nächste DIV Box mit dem Befehl fadein eingeblendet. Beim verlassen wird sie wieder ausgeblendet.