Mit dem neuen Theme bin ich nun auch auf jQuery umgestiegen. Für die Effekte und Möglichkeiten, die ich hier bieten möchte, ist diese schlanke Library einfach sehr gut geeignet.
Unter anderem wollte ich, dass der Leser den Sidebar im rechten Abschritt ausblenden kann. jQuery stellt eine ganze Reihe von Funktionen bereit, mit denen Markup-Bereiche aus-/eingeblendet werden können. Am bekanntesten und einfachsten ist wohl die slideToggle
-Funktion.
Es stehen eine Reihe Funktionen beriet, mit denen man die Abschnitte vertikal ausblenden kann und deshalb hatte ich bisher die Interface Elements eingebunden, diese sind im Standard von WordPress ebenfalls enthalten. Allerdings schlägt die Library mit gut 80 kByte zu buche, nicht unbedingt schlank für diesen einen Effekt. Also suchte ich nach einer anderen Lösung.
Nach Wissensnachschlag und einigen Experimenten bin ich nun auch mit der animate
-Funktion vertraut und habe ebenso gelernt, das die toggle
-Funktion genau das macht, was man mit einem Link, der zwei Aufgaben erfüllt, bekommt.
Wer also ähnliches vor hat, folgender Code führt zum Erfolg.
$("a#ToogleSidebar").click().toggle(function() {
$('#sidebar').animate({
width: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$('#sidebar').animate({
width: 'show',
opacity: 'show'
}, 'slow');
});
Das xHTML dazu könnte so aussehen. Entscheidend sind Tag a und die IDs.
<a href="#" id="ToogleSidebar" title="ein-/ausblenden">Klick mich</a>
<div id="sidebar">
. . .
</div>
Nun werden also weiter 80 kByte gespart und die Seite sollte noch schneller geworden sein. Nun bringt nur noch die Suchhilfe einige kByte mit sich. Ich hoffe, dass die Funktion des ein-/Ausblenden des Sidebars in allen Browsern funktioniert. Rückmeldungen wären toll.
Beispiel
Nach mehrmaligen Nachfragen einiger Leser habe ich ein kleines Beispiel abgelegt, was die Funktion verdeutlicht und den Markup-Aufbau darlegt. Ich hoffe, dass damit das Verständnis ein wenig besser ist. Zu finden ist das Beispiel in meiner Experimentierkiste.
Hallo Frank,
nicht nur dass das Ein- / Ausblenden im Firefox v2.0.0.6 einwandfrei funktioniert, es sieht auch noch absolut genial aus.
Viele Grüße aus dem Rheinland,
Chris
sidebar ein- und ausfahren funktioniert wunderbar. sag mal, hast du die abgerundeten ecken auch mit jquery gemacht? oder sind das grafiken? ich hab mal das jquery-corner-plugin benutzt, aber im safari wurden die ecken dann nie rund angezeigt, deine werden mir aber rund angezeigt und deswegen wollt ich wissen, wie du die ecken gemacht hast.
mfg
Alex
mir is gerad doch was aufgefallen: ist es beabsichtigt, dass auf der startseite die sidebar nicht untereinander sondern nebeneinander angezeigt wird und sich nicht ausblenden lässt?
Yup, Firefox einwandfrei und auch mit Opera 9 funktioniert es. Wirklich hübsch!
@Alex: Die Ecken sind Grafiken, alt hergebracht. Welche Funktion von jQuery kann den Rundungen beim Design erzeugen. Ich kannte nur eine andere JS-Lösung, beruht nicht auf jQuery?
Unterschied zwischen single und Startseite etc. ist gewollt.
Danke für die Rückmeldungen an alle!
Mit IE7 funktioniert es super. Nachher probiere ich zu Hause noch mit Safari und Camino.
Ich freue mich schon auf den 2.Teil deines WordPress Tutorials.
auf der jquery seite unter plugins gibts das jquery-roundcorners-canvas plugin. der entwickler sitzt hier: http://www.meerbox.nl/
yupp funktioniert. Dein neues Minus/Plus-Symbol ist logisch. Das vorherige Fähnchen hat aber eher auf sich aufmerksam gemacht.
Kann ich bestätigen.
Im Firefox, IE7 und Opera funktionierts.
die netten js-spielereinen machen einen schlanken fuss, aber sollte man eine seite unbedingt um 80kb aufblähen?
Hy Flori, du hast da sicher was falsch verstanden. Ich habe 80kByte weniger, weil ich die Bibliothek nicht benötige, sondern nur noch jQuery (21kByte).
ups… da habe ich mich doch glatt verlesen… dann ist es der weg in die richtige richtung 😉
21 kb sind schon in ordnung…
Hey Frank,
also der Button mit der Sidebar aus- und einblenden sieht jetzt hervorragend aus. Perfekte Loesung, passt wunderbar ins Design 🙂
Die Funktion klappt auch wunderbar
Alex
Einfach Klasse. NEID. Meine ersten Geh/Steh Versuche sind da noch nicht so berauschend. Lediglich das Zeigen von Fotos unter der Gallery ->
http://mobbing-gegner.de/photos/gallery/MobbingGegner/
aber nun bin ich voll motiviert. Danke!
macdet
— hartz iv muss man sich leisten können —
Klasse. Tolle Idee und gut umgesetzt. Wie überhaupt das gesamte Redesign.
Sobald Zeit ist, muss ich mir unbedingt JQuery mal näher anschauen. 2009?
Einen netten Typo hast du übrigens im Quelltext-Ausschnitt weiter oben:
> $(„a#ToogleSidebar“) und id=“ToogleSidebar“
Ein- und ausschalten heißt eigentlich „toggle“, wie in „slideToggle-Funktion“, aber Google wird sich freuen, dass der Klang ihres Namens so einen Einfluss hat 😉
Grüße aus Groningen
Peter
Hallo Peter,
zu erst einmal Glückwunsch zur kommenden DVD, toll.
Manchmal ist Google eben doch übermächtig, daran sieht man mal wieder wie G* mich eingenommen hat ;-).
Mit der Zeit ist das so eine Sache – ich versuche ja schon seit langer Zeit das Schlafen weg zu lassen, deshalb auch dieser größere Font hier. Leider werden die Zeichen trotzdem irgendwann unscharf und der Inhalt wird nicht so richtig aufgenommen.
LG aus Eisenach in den Norden.
Frank
> zu erst einmal Glückwunsch zur kommenden DVD, toll.
Danke. Ich bin sehr gespannt darauf.
Und dir einen Glückwunsch zum Redesign. Das ist hier ja eine Fundgrube an gut umgesetzten Design-Ideen geworden.
> das Schlafen weg zu lassen, deshalb auch dieser größere Font hier.
Das muss ich auch mal probieren, einfach die Schrift größer und dann bin ich nicht auf einmal nicht mehr müde 😉
Ciao
Peter
Vielen Dank für die Blumen, das nehme ich mir als reiner Hobby-„Webdesigner“ gerne an! Auch wenn wohl mein Steckenpferd das Markup/ Code bleiben wird.
Alles Gute
Frank
Ich habe hier noch ne jQuery-Demo für die interface.js, die ja auch schon mit WP kommt, gefunden. Dort wird dann
$("a#sidebartoggle").click(function() {
$("div#primary.sidebar").SlideToggleRight(500, null, 'bounceout');
return false;
});
benutzt, was also auch noch ne Möglichkeit ist. Hat aber nicht den Fade-Effekt, den wohl animate mit sich bringt.
Hy Jakob,
aufpassen, diese Funktion steht nur zur Verfügung, wenn eine weitere Bibliothek (Interface Elements) geladen wird. Auch die ist in WP enthalten. Habe ich kurz im Artikel oben angerissen, denn die hatte ich im Vorfeld im Einsatz. Bringt aber zusätzliche 80kByte mit.
Is it possible to make plugin for wordpress to do job automaticly?
Yes, I think it am possible, but not really meaningful. It is easy to integrate.
bisell alt der topic …ich weiß, aber genial dass das ding auch unter safari läuft, bisher hat dieses nämlich keines der tuts getan die ich gesehen habe! 🙂
gruß
Hallo,
habe folgendes Problem, wenn ich denn Code in WordPress einbinde und ausführe, bekomme ich die Fehlermeldung, dass $ keine funktion sei. Was mache ich den falsch? Denn Code habe ich per Trag and Drop aus der Seite genommen und im header eingefügt.
Gruß
heiko
Nichts, du nutzt eine andere Version von jQuery und die hat einen Bug in der Hinsicht. Nutze mal eine andere, eventuell die aus meinem PhotoBlogFb-Theme, im Paket zu finden.
Hallo,
ich habe mal die aktuelle jQuery per Hand eingefügt und dann tut es auch. Danke Dir.
Hallo,
ich brauche eure Hilfe. Ich versuche diese Toogle-Funktion ebenfalls zu verwenden, jedoch soll bei mir mein DIV erste nicht zu sehen sein und erst wenn ich auf „einblenden“ klicke, sollen meine Zusatzinfos angezeigt werden. Kann mir bitte jemand von euch einen Tipp geben? Muss ich hier mit addClass arbeiten? Und wenn ich das per CSS mache, muss man zweimal auf den Link „einblenden“ klicken, dass ist ja auch keine Lösung.
Vielen Dank schonmal.
MfG Steffen
nein, du musst das Ausblenden beim Laden der Seite schon realisieren.
sorgt für Ausblenden sofort. Kannst du die im aktuellen PhotoBlog-Theme ansehen, nur eben horizontal.
Hallo Frank,
danke für deine Antwort, das funktioniert auch, aber ich hbae hier denselben Effekt wie bei meinem Test mit dem CSS. Ich muss auf „hier klicken“ wenn die Seite neu geladen ist immer zweimal draufklicken, danach funktioniert es dann auch mit „Einmalklick“. Woran kann das liegen?
Das ist mein Code zur Zeit!
jQuery(document).ready(function() {
$(".sidebar").hide();
$('a#ToogleSidebar').click().toggle(function() {
$('.sidebar').animate({
height: 'hide',
opacity: 'hide',
}, 'slow');
}, function() {
$('.sidebar').animate({
height: 'show',
opacity: 'show'
}, 'slow');
return false;
});
});
Danke Dir schonmal.
Da würde ich lieber in einem JS-Forum mal anfragen, da tummeln sich wesentlich bessere Experten. Ich nutze JS nur Rudimentär.
Ich habs:
jQuery(document).ready(function() {
$('.sidebar').hide();
$('a#ToogleSidebar').click().toggle(function() {
$('.sidebar').animate({
height: 'show',
opacity: 'show'
}, 'slow');
}, function() {
$('.sidebar').animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
return false;
});
});
Hi!
Excuse me, but I’m french and I don’t speak german 🙂 I hope, no, I’m sure you understand english.
This effect is wonderful and I’m trying to apply your tutorial, but when I use the mentionned code in the sidebar.php file (I’m using WordPress too) the sidebar desappears, but the content doesn’t go bigger as it is on your website… Could you please explain me how to do this?
Thanx a lot!!
It is possible to see the problem on a site, a link?
The Format is from the stylesheet-file. jQuery slide function is only for hide the div.