Hallo,
also dieser accordion effect auf der wordpress-deutschland.org ist doch mit moo.fx gemacht...
ihr habt den code zum aufrufen in die header geschrieben damit ruft ihr
moo.fx.s, moo.fx.pack.js und stretch.js auf das wars doch oder...
in der stretch.js ist die funktion beschrieben....
in der style.css das aussehen...
so jetzt kann man doch das ganze z.B. in einer statischen seite innerhalb von wordpress aufrufen oder? aber wie...
irgendwas funktioniert nicht was mache ich falsch habe mir euren quellcode immer wieder angeschaut ich kriegs nicht hin??
danke für eure hilfe
Verstehe euer Accordion auf der Home nicht
-
-
- Gerade eben
- Anzeige
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
- ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
- ✔️ Deutsche Server & DSGVO-konform
- ✔️ Persönlicher Support (kein 0815-Ticket-System)
-
Ich würde dafür nicht mootools nehmen sondern jQuery und dieses jQuery Accordion: UI/API/1.7/Accordion - jQuery JavaScript Library Das sollte sich deutlich einfacher integrieren lassen.
-
mh komme denoch nicht klar
hallo,
danke für die schnelle rückmeldung...allerdings mache ich irgendwo einen fehlerwenn ich z.B.
MooTools Demos: Accordiondas beispiel hier in wordpress nachvollziehen möchte setze ich mootools.js und demo.js in die header.php (dann habe ich die daten in meine style.css) übernommen
jetzt öffne ich mir eine neue statische seite und für genau den gleichen code aus wie in dem demo welche ich von der seite die ich oben genannt hatte runtergeladen habe ein (oder darf der code nur in die php dateien)...
das design sieht gleich aus aber die funtion geht nciht....
ich glaube nicht das ich mit jquery einfach klar komme...
vielleicht kann man mir ein wenig mehr unter die arme greifen...
danke
stefan -
Ich hoffe mal nicht, das du den Code in den Editor für den Seiteninhalt eingegeben hast! Dort geht das nicht.
Das muß schon in der PHP gemacht werden und du mußt dich auch dort um das Befüllen den Anteile selbst kümmern mit WordPress Template Tags. -
ich habs so gemacht
das habe ich in die header.php eingetragen:
PHP<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/mootools.js"></script> <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts/demo.js"></script>das hier in meine style.css
Code
Alles anzeigen#accordion { margin:20px 0px; } h3.toggler { cursor: pointer; border: 1px solid #f5f5f5; border-right-color: #ddd; border-bottom-color: #ddd; font-family: 'Andale Mono', sans-serif; font-size: 12px; background: #D2E0E6; color: #528CE0; margin: 0 0 4px 0; padding: 3px 5px 1px; } div.element p, div.element h4 { margin:0px; padding:4px; } blockquote { padding:5px 20px; }und dann wollte ich das ganze über eine statische seite und dem html-editor von wp aufrufen mit...
Code
Alles anzeigen<div id="accordion"> <h3 class="toggler">History</h3> <div class="element"> <h4>Common ancestor</h4> <p>The first suggestion that all organisms may have had a common ancestor and diverged through random variation and natural selection was made in 1745 by the French mathematician and scientist Pierre-Louis Moreau de Maupertuis (1698-1759) in his work Venus physique. Specifically:</p> <blockquote>"Could one not say that, in the fortuitous combinations of the productions of nature, as there must be some characterized by a certain relation of fitness which are able to subsist, it is not to be wondered at that this fitness is present in all the species that are currently in existence? Chance, one would say, produced an innumerable multitude of individuals; a small number found themselves constructed in such a manner that the parts of the animal were able to satisfy its needs; in another infinitely greater number, there was neither fitness nor order: all of these latter have perished. Animals lacking a mouth could not live; others lacking reproductive organs could not perpetuate themselves... The species we see today are but the smallest part of what blind destiny has produced..."</blockquote> <h4>The Origin of Species</h4> <p>In 1859, Charles Darwin's The Origin of Species was published. The views about common descent expressed therein vary between suggesting that there was a single "first creature" to allowing that there may have been more than one. Here are the relevant quotations from the Conclusion:</p> <blockquote>"[P]robably all of the organic beings which have ever lived on this earth have descended from some one primordial form, into which life was first breathed."<br />"The whole history of the world, as at present known, ... will hereafter be recognised as a mere fragment of time, compared with the ages which have elapsed since the first creature, the progenitor of innumerable extinct and living descendants, was created."<br />"When I view all beings not as special creations, but as the lineal descendants of some few beings which lived long before the first bed of the Silurian system was deposited, they seem to me to become ennobled."</blockquote> <p>The famous closing sentence describes the "grandeur in this view of life, with its several powers, having been originally breathed into a few forms or into one." The phrase "one form" here seems to hark back to the phrase "some few beings"; in any case, the choice of words is remarkable for its consistency with recent ideas about there having been a single ancestral "genetic pool".</p> </div> <h3 class="toggler">Evidence of universal common descent</h3> <div class="element"> <h4>Common biochemistry and genetic code</h4> <p>All known forms of life are based on the same fundamental biochemical organization: genetic information encoded in DNA, transcribed into RNA, through the effect of protein- and RNA-enzymes, then translated into proteins by (highly similar) ribosomes, with ATP, NADH and others as energy currencies, etc. Furthermore, the genetic code (the "translation table" according to which DNA information is translated into proteins) is nearly identical for all known lifeforms, from bacteria to humans, with minor local differences. The universality of this code is generally regarded by biologists as definitive evidence in favor of the theory of universal common descent. Analysis of the small differences in the genetic code has also provided support for universal common descent.[2]</p> <img src="images/phylogenetic_tree.png" width="340" height="230" align="right" alt="" /> <p>The universality of many aspects of cellular life is often pointed to as supportive evidence to the more compelling evidence listed above. These similarities include the energy carrier ATP, and the fact that all amino acids found in proteins are left-handed. It is possible that these similarities resulted because of the laws of physics and chemistry, rather than universal common descent and therefore resulted in convergent evolution.</p> <h4>Phylogenetic trees</h4> <p>Another important piece of evidence is that it is possible to construct detailed phylogenetic trees mapping out the proposed divisions and common ancestors of species, and no matter what method is used, morphological (based on appearance, embryology, etc) or molecular (based on mutation rates and relative similarities of important, conserved genes), still get extremely similar results. If there were no common ancestor, these different methods should give wildly different results, thus the phylogenetic tree is strong evidence of common descent.</p> </div> <h3 class="toggler">Examples of common descent</h3> <div class="element"> <h4>Artificial selection</h4> <p>Artificial selection offers remarkable examples of the amount of diversity that can exist between individuals sharing a late common ancestor. To perform artificial selection, one begins with a particular species (following examples include wolves and wild cabbage) and then, at every generation, only allow certain individuals to reproduce, based on the degree to which they exhibit certain desirable characteristics. In time, it is expected that these characteristics become increasingly well-developed in successive generations. Many examples of artificial selection, like the ones below, occurred without the guidance of modern scientific insight.</p> <img src="images/biglittledog.jpg" width="180" height="151" align="right" alt="" /> <h4>Dog breeding</h4> <p>An obvious example of the power of artificial selection is the diversity found in various breed in domesticated dogs. The various breeds of dogs all share common ancestry (being all ultimately descended from wolves) but were domesticated by humans and then selectively bred in order to enhance various features such as coat color and length or body size. To see the wide range of difference between the many breeds of dogs compare the Chihuahua, Great Dane, Basset Hound, Pug, and Poodle. Also compare this enormous diversity with the relative uniformity of wild wolves.</p> </div> </div>und ich sehe den text die blauen balken nur sind sie aufgeklappt und es funktioniert nichts....
stefan
-
WordPress akzeptiert keine <div> im Text (egal ob TinyMCE oder HTML Editor), diese werden in <p> umgewandelt. Das funktiniert nur, wenn du:
- den visuellen komplett für alle Zeiten deaktivierts.
- wpautop filter deaktivierts.
Sonst kannst du da nur in die Theme PHP Dateien einbetten. -
auch im template geht es nicht
mh...das kann schon alles so sein wie du es sagst dafür habe ich vielleicht doch zu wenig ahnung....
allerdings wenn ich den folgenden div-code in eine template php datei einbinde z.B. in die index.php damit ich das ganze auf der ersten seite habe passiert da auch nichts die funktion geht einfach nciht...
ich muss doch da was falsch machen obwohl diese ganze vorgehensweise ja aus dem mootools demo stammt....und ich benutze das default theme zum testn..
stefan
-
hat keiner eine idee wo mein fehler liegt?
mh habe im grunde alles gemacht wie in dem accordion beispiel von mootools aber es geht einfach nicht was mache ich falsch???
-
Hast du java-scripts in deinem Browser zugelassen?
-
ja
hi ja habe auch alles aktiviert....vielleicht vergesse ich was einzubinden...hier auf der homepage ist doch auch son mootools accordion kann denn da mir keiner mal ne kurze anleitung geben....
ich muss ein fehler beim einbinden machen..
stefan -
Ich würde dafür nicht mootools nehmen sondern jQuery und dieses jQuery Accordion: UI/API/1.7/Accordion - jQuery JavaScript Library Das sollte sich deutlich einfacher integrieren lassen.
hi, ich habe das selbe Problem, ... ich habe es allerdings mit jquery gemacht und direkt im template (in der php) niedergeschrieben, aber es funktioniert bei mir auchnicht (WP 2.7)
ich habe auf der Seite dort einen Beitrag gefunden wo sich einer beschwert, dass es bei ihm in der 2.6.x WP Version funktioniert, in der 2.7 aber nichtmehr. Irgendwann hatte er das Problem für 2.7 gelöst, hatte aber leider nicht dazugeschrieben wie er das gemacht hat.
ich habe auch alle Anweisungen aus der DOC von jquery genaustens befolgt (mehrmals, sogar auf mehreren komplett unterschiedlichen Wordpress-seiten von mir)
irgendwie fehlt bestimmt eine ganz kleine Datei oder eine kleine Zeile Code wo wir Anfänger vergessen oder wo nicht gut documentiert wurde
:cry:nachtrag:
die index.html die mitgeliefert wird funktioniert auf dem Server (statische Seite) einwandfrei, wenn ich jetzt aber alles 1:1 (bzw. für die CSS angepasst) nun in mein template übernehmen (header-informationen etc) geht es eben nichtmehr!
Das habe ich übrigens an sehr komplexen sowie an 1-Seiten-templates getestet. -
hmm okay... ich hab das jetzt auf folgende weise hinbekommen:
Ich habe die Democode von
UI/API/1.7.1/Accordion - jQuery JavaScript Library
genommen und bei mir verbaut.
Also dass ich alle JS Daten extern erstmal lade. So funktioniert das im Moment!Ich würd jetzt aber gern meine Artikel in diesem Accordion-Style laden.
Hat da jemand ne idee?
Darf ruhig auf die neusten 3 oder 5 beschränkt sein. Wichtig is nur dass es sauber drin ist, Header und Content dynamisch geladen wird etc.
Bin um jede Idee sehr dankbar! -
keiner eine Idee?
:-?
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!