Abonniere die neusten Artikel via RSS-Feed oder Atom und verfolge die Kommentare ebenso via RSS-Feed oder Atom-Feed
Anzeige
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.
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.
Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.
händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.
Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.
xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>
Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.
E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.
Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.
Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.
Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.
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.
Das Weblog wird angetrieben von WordPress und aktuell gibt es 886 Beiträge, 16217 Kommentare in 14 Kategorien und 448 Tags.
Das Blog wird liebevoll mit xHTML & CSS in Handarbeit gestaltet.
Design und Code ist unter Copyright
© 2001 - 2010 bueltge.de [by:ltge.de]
12. September 2007 um 15:37
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
12. September 2007 um 15:42
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
12. September 2007 um 15:44
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?
12. September 2007 um 15:45
Yup, Firefox einwandfrei und auch mit Opera 9 funktioniert es. Wirklich hübsch!
12. September 2007 um 15:52
@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!
12. September 2007 um 15:55
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.
12. September 2007 um 15:56
auf der jquery seite unter plugins gibts das jquery-roundcorners-canvas plugin. der entwickler sitzt hier:
http://www.meerbox.nl/12. September 2007 um 15:58
yupp funktioniert. Dein neues Minus/Plus-Symbol ist logisch. Das vorherige Fähnchen hat aber eher auf sich aufmerksam gemacht.
12. September 2007 um 16:10
Kann ich bestätigen.
Im Firefox, IE7 und Opera funktionierts.
12. September 2007 um 17:18
die netten js-spielereinen machen einen schlanken fuss, aber sollte man eine seite unbedingt um 80kb aufblähen?
12. September 2007 um 17:33
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).
12. September 2007 um 18:09
ups... da habe ich mich doch glatt verlesen... dann ist es der weg in die richtige richtung
21 kb sind schon in ordnung...
13. September 2007 um 02:40
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
13. September 2007 um 15:44
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 --
25. September 2007 um 12:12
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
25. September 2007 um 13:27
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
25. September 2007 um 13:35
> 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
25. September 2007 um 13:40
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
25. September 2007 um 15:39
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.
25. September 2007 um 19:50
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.
16. Oktober 2007 um 19:38
Is it possible to make plugin for wordpress to do job automaticly?
16. Oktober 2007 um 20:18
Yes, I think it am possible, but not really meaningful. It is easy to integrate.
23. Oktober 2007 um 09:20
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ß
27. Dezember 2007 um 22:10
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. Dezember 2007 um 23:12
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.
28. Dezember 2007 um 23:40
Hallo,
ich habe mal die aktuelle jQuery per Hand eingefügt und dann tut es auch. Danke Dir.
8. Januar 2008 um 15:58
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
8. Januar 2008 um 16:02
nein, du musst das Ausblenden beim Laden der Seite schon realisieren.
$(document).ready(function() { $("#sidebar").hide();sorgt für Ausblenden sofort. Kannst du die im aktuellen PhotoBlog-Theme ansehen, nur eben horizontal.
9. Januar 2008 um 09:38
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.
9. Januar 2008 um 09:42
Da würde ich lieber in einem JS-Forum mal anfragen, da tummeln sich wesentlich bessere Experten. Ich nutze JS nur Rudimentär.
9. Januar 2008 um 10:22
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;
});
});
27. März 2008 um 07:18
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!!
28. März 2008 um 11:19
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.
2. November 2008 um 15:46
braucht jquery dafür ein plugin oder hat sich etwas verändert ?
weil bei mir reagiert der überhaupt nicht. Der macht also garnichts wenn ich diese Funktion einbaue
2. November 2008 um 16:25
@Einste1n: dazu benötigt jQuery kein Plugin. Es ist in erster Linie eine Markup-Frage, denn die Container müssen fleibel sein, sonst nützt das ausblenden nichts.
2. November 2008 um 16:29
okay, was heißt denn "flexibel" ?
2. November 2008 um 16:34
Es hesit, dass die Bereiche keine fixen Werte haben, es muss sich ja verändern können, wenn ein Bereich durch JS verborgen wird.
2. November 2008 um 16:39
okay danke ... dann werde ich mal etwas umbauen müssen
15. November 2008 um 21:52
gefaellt mir gut. ich benutze allerdings mygallery (wildbits.de). falls dieses plugin aktiv funktioniert die slidefunction nicht. vielleicht benutzt mygallery eine aehnliche javascript funktion mit gleichem Namen, was die die jquery funktion deaktiviert? any ideas?
16. November 2008 um 13:12
@Bjoern: myGallery lädt eine eigene Libary, dass kann und sollte man aus meiner Sicht ändern. Ebenfalls bietet jQuery einen spez. Syntax, um diverse Probleme zu vermeiden.
12. März 2009 um 17:12
hello!
i love this jQuery horizontal slide function... im working on a new web site, my first and i would like to implement that..
i was wondering, as a novice is there possible to make some working example for this function?
or at least can yo please post a complete working markup of a code?
div structure with css? is that possible
i've downloaded this site put the code you previously posted there on the page but its still not working...am i missing something?
thx! .-)
13. März 2009 um 15:04
@mario: maybe i find time for this
I will see for just minutes and i write a example, i write a comment here, when i have ready.
14. März 2009 um 21:44
thank you Frank!
i can wait there is no hurry...
31. März 2009 um 15:28
@mario: you can find a small example here: test/jquery_horizontal_slide.php
I hope, this is enough for understanding.
Best regards
4. April 2009 um 10:44
hi,
js meldete bei mir immer nen $-fehler. liess sich beheben indem $ gegen jQuery geändert wird, also bspw.
$("a#ToogleSidebar").click().toggle(function() { gegen
jQuery("a#ToogleSidebar").click().toggle(function() {
viel spass und gruss,
thomas
4. April 2009 um 11:25
ebenfalls funktionsfähig ($ zur not gegen jQuery tauschen):
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('#slickbox').hide();
// shows the slickbox on clicking the noted link
$('a#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('a#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});
// toggles the slickbox on clicking the noted link
$('a#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
http://www.learningjquery.com/2006/09/slicker-show-and-hide7. April 2009 um 00:53
hallo hier mein code warum muss ich beim ersten mal doppelt auf klick mich klicken ??
7. April 2009 um 09:02
Code muss maskiert werden oder nutze meine Quicktags für Code, sonst kommt hier nichts an.
7. April 2009 um 11:21
noch ein versuch
hier der code
kann man da auch bounce reinbringen? oder eine andere snimation ?
7. April 2009 um 12:30
Im Grunde kann man alles machen, das ist ja der Hintergrund. Hast du dir die Demo angesehen? Alle weiteren Funktion von jQuery kann man einbinden. Ich habe mich in dem Fall nur für
animateentschieden.7. April 2009 um 13:51
aber warum muss ich am anfang 2 * klicken
7. April 2009 um 14:07
@hups: du blendest in der ersten Zeile den Sidebar aus, hier ist mein Scriptcode.
7. April 2009 um 23:39
aso ich wollte einfach nur deinen code so haben das das togglefeld beim starten zu ist
könntest du mir das sagen
8. April 2009 um 09:06
die erste Funktion wird via click aufgerufen, sie muss direkt beim laden der Seite geladen werden, also dort wo hide gestartet wird.
jQuery('a#ToogleSidebar').click().toggle(function() {zu
jQuery('a#ToogleSidebar').toggle(function() {sollte gehen
11. April 2009 um 10:30
geht immer noch nicht ist immer offen am anfang soll aber zu sein beim start
17. April 2009 um 14:13
Frank thank you very much for the working example!
best regards...
25. Dezember 2009 um 19:50
vielen Dank für deine Beispiele ... hab es heute nochmal probiert und es funktioniert. Allerdings sieht das noch etwas bescheiden da die Schrift im ausblenden zerpresst wird =)
naja ich hoffe ich bekomme das noch hin. Wird noch viel arbeit wenn ich die komplette Seite auf jquery bekommen will. Wer sehens will :
spielwiese.einste1n.de > entwicklungsversion
einste1n.de > mootool original
kennt jemand auch nen gutes deutschsprachiges Forum wo man sich erkundigen kann, falls ich irgendwo feststecke ?
mfg
Einste1n
20. Januar 2010 um 20:06
Hmm, ich hab den Code 1 zu 1 so kopiert und in ein WordPress Template einfügt, wo außer ein paar divs sonst kein Code vorhanden ist.
Sieht auch genau so aus wie auf der Beispielseite, nur funktioniert es nicht.
Fehlermeldung lautet:
Fehler: $("a#ToogleSidebar") is null
Quelldatei:
http://127.0.0.1/beispiel/#Zeile: 58
20. Januar 2010 um 20:34
Grummel, hat sich erledigt...
Das beißt sich wohl mit dem lightbox plugin.
23. April 2010 um 01:09
...nu such' ich schon seit Stunden, weil ich es alleine rauskriegen wollte...
Hallo Frank,
in welche Datei muß ich den den code ablegen???????????????
sorry, bin echt noch ein Greenhorn
Gruß, Simone
23. April 2010 um 07:14
@Simone: der js-code muss in ein js-file und geladen werden, dass file muss dann im head oder footer geladen werden. Aber das Amrkup und das CSS müssen dazu passen, ansonsten funktioniert das nicht.
23. Juni 2010 um 17:34
Hallo Frank,
der Effekt ist echt cool. Ich habe schon einige Zeit rumprobiert, aber leider krieg ich es nicht hin den auf meiner Seite zum laufen zu bringen. Was muss ich tun, um den Effekt für alle Artikel auf meinem Blog zum laufen zu bringen?
- Andy
24. Juni 2010 um 09:57
@Andy: hast du dir die Demo angesehen; schaue in den Source dazu; es ist ein Zusammenspiel von JS und CSS.
24. Juni 2010 um 10:12
@Frank: Ja, ich habe mir alles angesehen. Ich kenne mich nicht so gut mit JS aus. Wie schwer wäre es, daraus ein WordPress Plugin zu machen?
24. Juni 2010 um 11:03
@Andy: das geht gar nicht, da ich das CSS des Themes nicht beeinflussen kann; ich muss jedes Theme kennen. Nur wenn der Sidebar nicht statisch ist, dann kann ich den via JS ausblenden, da ich ja quasi die CSS Eigenschaften ändere.
24. Juni 2010 um 13:14
@Frank: Wenn ich das jetzt richtig verstanden habe, muss ich:
1. HTML Code in der single.php von WordPress einfügen - für die "Klick mich" Funktion.
2. Im style.css etwas einfügen. (Voraussetzung für alles ist, dass die Sidebar nicht statisch ist).
3. Eine extra .js Datei irgendwo auf meinem Server haben.
Ist das richtig?
24. Juni 2010 um 13:32
@Andy: punkt 3, man muss jQuery als Framework haben und ein eigenes JS bauen, was diese Funktion von jQuery nutzt; hast du die Demo angesehen, den Quellcode?
24. Juni 2010 um 13:45
@Frank: Ja, ich habe mir die Demo und den Quellcode angesehen. Soweit ich weis, habe ich jQuery, und nutze die Funktionen. Wie baue ich das eigene .js ein?
24. Juni 2010 um 14:01
@Andy: das muss in den Quellcode, wenn es sich um WordPress handelt, dann setzt man es am besten via Funktion ab, heißt das Script in eine Datei oder Funktion und in der functions.php aufrufen. Dies ist komplex und von diversen Randbedingungen abhängig um es so klar zu erklären.
Solltest du das in deinem Theme einbauen wollen, dann muss der content und der Sidebar seine Breite verlieren, denn aktuell sind die statisch breit, in px. Im klassischen Fall ist der content daher 100% und der Sidebar in px statisch und via JS wird dann der sidebar ausgeblendet.
24. Juni 2010 um 14:13
@Frank: Danke. Dann scheint mir die Sache zu schwer zu werden. Wie lange würde ein Pro wie Du für das hinzufügen der Ein- und Ausblendfunktion brauchen?
24. Juni 2010 um 14:57
@Andy: schwer zu sagen, weil die Umstellung auf 100% im content in der Regel so einiges im CSS nach sich zieht.