Ähnliche Beiträge
- Daten aus WordPress an JavaScript übergeben #2
- WordPress Nutzer Daten in Übersichten der Artikel und Usern verwenden
- Erste und letzte Seite in Seiten-Strukturen von WordPress erkennen
- Einschränken der Daten-typen im WordPress Upload
- Trenne Logik von der Ausgabe, mittels Hooks in WordPress
- Optionen aus WordPress an JavaScripts übergeben #1
Journal
- Daten aus WordPress an JavaScript übergeben #2
- Projekt Five Speed
- WordPress Nutzer Daten in Übersichten der Artikel und Usern verwenden
- Minimum WordPress als Framework
- Back of a Webpage: bueltge.de
Projekte
- Beautiful Web Type Combinations
- Experimente
- Generator für hCard/vCard
- HTML Lorem impsum DE
- Image2base64 Generator
- md5/.htpasswd Generator
- Mehrsprachigkeit mit WordPress
- WordPress Entwicklung
- WordPress im Unternehmen
- WP Basis Theme
- WP Engineer
- WP Plugin Sicherheit
Nutze die Feeds
Abonniere die neusten Artikel via RSS-Feed oder Atom und verfolge die Kommentare ebenso via RSS-Feed oder Atom-Feed
Themen
Sidebar
ein-/ausblenden
jQuery und die horizontale Slide-Funktion
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.
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.
Das Weblog wird angetrieben von
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.
12. Dezember 2010 um 12:50
Hallo Frank,
Seit Monaten verfolge ich Deinen Blog, auch wenn ich bisher noch keine Kommentare abgab. Naja.
Ich kann nur sagen, Danke für Deine Hilfe und Ideen.
Jetzt endlich habe ich mein Blog auf Holderlein.de soweit fertig. Bestimmt gibt es noch kleine Dinge, die ich ändern möchte.
Dazu gehört auch die Sliding-Funktion der Kommentare.
Ich möchte, das die Kommentare selbst, beim Aufruf der Seite versteckt sind, die Kommentarhilfe und die -Regeln (wie bei Dir) jedoch ersichtlich sind.
Nach langem Suchen fand ich Deinen Artikel. Aber irgendwie klappt gar nichts.
Wenn ich den Link anklicke, wandert die Seite nach oben....
Weiter gesucht und das gefunden:
<div class="toggle_icon"Kommentare verstecken/anzeigen
Insoweit klappt das Ein-/Ausklappen. Nur würde ich gerne ein Kreuz vor dem Text haben, damit erkenntlich ist, das es ich um eine Funktion handelt (Wie bei Dir).
Keine Ahnung, wie ich das hinbekommen soll.
Ich besitze in meinem Theme ein Shortcode mit dem Accordion-Effekt.
Das klapp in den Beitragen ganz gut. Nur würde ich diesen Shortcode im Quellcode nutzen (für Anzeige/Verstecken der Kommentarliste). Bei meinen kläglichen Versuchen mit
echo do_shortcodekam ich nur zu dem Ergebnis, das ich den Titel anklickte und das Kreuz auf zu minus wurde. Nichts wurde versteckt bzw. Angezeigt.Hier der Code, den in meiner functions.php ist:
// [accordion]function add_accordion( $atts, $content = null) {
extract(shortcode_atts(array(
'bg_color' => ''
), $atts));
$content = str_replace("", "", $content);
$content = str_replace("", "", $content);
return ''.do_shortcode($content).'';
}
add_shortcode('accordion', 'add_accordion');
function add_title( $atts, $content = null) {
extract(shortcode_atts(array(
'color' => ''
), $atts));
return ''.do_shortcode($content).'';
}
add_shortcode('acctitle', 'add_title');
function add_text( $atts, $content = null) {
extract(shortcode_atts(array(
'color' => ''
), $atts));
return ''.$content.'';
}
add_shortcode('acctext', 'add_text');
Hier nun der Code, den ich Testweise verwendete:
echo do_shortcode('[accordion] [acctitle]Why have an ARDS Network?[/acctitle] [acctext]At this time, there is no specific treatment for ARDS, and therapy is only supportive, in the hope that the patient will spontaneously recover. Unfortunately, there is disagreement about what constitutes the best support. The development of effective treatments, both supportive and curative, for ARDS is essential. Reaching this goal has been difficult, in part because it requires the study of large numbers of patients in rigorously conducted complex clinical trials.[/acctext] [/accordion] ');Ich habe Dir meine Header.php, functions.php und comments.php zum download angeboten. Vielleicht kannst Du mir helfen.
Vielen Dank schon einmal.
Timm
13. Dezember 2010 um 10:55
@Timm: der Effekt wird via CSS erreicht; ich gebe mit JS jeweils eine andere Klasse, je nach dem, ob ein- oder ausgefahren ist und diese Klasse stellt dann das entsprechende Icon dar.
13. Dezember 2010 um 23:48
So richtig habe ich das noch nicht verstanden. Wie kann nach dem Klick ein anderes CSS verwendet werden?
Ich habe jetzt eine Lösung gefunden. Wie findest du sie. Oder was kann ich verbessern?
Vielen Dank.
Timm
16. Dezember 2010 um 14:54
Hallo Frank,
habe jetzt alles anders gelöst. Sieht ganz ok aus.
Ansonsten vielen Dank für die des Slidings.
WennDu Verbesserungsvorschläge haben solltest, ... jederzeit herzlich willkommen.
26. April 2011 um 16:09
Hi, erstmal hast du da ne richtig gute Seite. Tolle Erklärungen. Ich habe dein beispiel zum tooglen ausprobiert, der text tooglet auch. Das Problem ist das meine Seite nicht breiter wird wie hier bei der auf der Seite. Wie geht das ? Kannst du mir da vielleicht per mail helfen? mfg
Sven
26. April 2011 um 16:56
Hi,
ich bin gerade dabei ein toogle script für meine Comments zu schreiben. Habe deins ein wenig abgewandelt. hier ein link zum schauen:
http://www.photo-folio.de/panorama/Einblenden funktioniert. Es wird auch der text einblenden gezeigt. Ausblenden nur dann wenn ich 2 mal klicke. Der text wird korrekt angeteigt. hast du ne diee wie ich das sauber hinbekomme?
Ich danke dir im voraus
13. September 2011 um 12:04
Ich suche schon seit Stunden nach diesem horizontalem Slider!
Und nun habe ich es gefunden. Danke und es wird gleich eingebaut
9. Februar 2012 um 20:53
Ein sehr schönes Tutorial!
Nur leider scheint es mit der WordPress 3.3.1-eigenen jQuery Bibliothek (Version 1.7.1)
Einbindung in functions.php oder / header.php des betreffendes Themes:
wp_enqueue_script('jquery');NICHT zu klappen, sondern nur mit der im Beispiel erwähnten Google-Bibliothek.
Im Übrigen müssen bei der jQuery Biblo die Dollarzeichen bei $(...) durch jQuery(...) ersetzt werden.
13. Februar 2012 um 15:23
@Sebastian: $muss nicht ersetzt werden, es muss nur bekannt gemacht werden; ansonsten weis jQuery davon nix. 1.7.1 muss ebenso klappen. Hier noch einige Tipps zu jQuery und WP.