jQuery und die horizontale Slide-Funktion

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 16 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

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

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

80 Kommentare

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

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

  3. 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?

  5. @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!

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

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

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

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

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

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

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

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

  23. 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ß

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

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

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

  31. 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;
    });
    });

  32. 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!!

Kommentare sind geschlossen.