Accordion Problem

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Accordion Problem

    Hallo, ich bin grade dabei wieder eine Website zu erstellen.
    Ich bin dabei auf etwas interessanten gestoßen und hab leider etwas Probleme den Code einzubaun :(

    Hier mal die Bsp Seite wie das ganze Funktionieren sollte.

    Hier das Coding der Demo von der Seite dazu:

    Quellcode

    1. var accordion = new Accordion('h3.atStart', 'div.atStart', {
    2. opacity: false,
    3. onActive: function(toggler, element){
    4. toggler.setStyle('color', '#ff3300');
    5. },
    7. onBackground: function(toggler, element){
    8. toggler.setStyle('color', '#222');
    9. }
    10. }, $('accordion'));
    13. var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Common descent');
    15. var newEl = new Element('div', {'class': 'element'}).setHTML('<p>A group of organisms is said to have common descent if they have a common ancestor. In biology, the theory of universal common descent proposes that all organisms on Earth are descended from a common ancestor or ancestral gene pool.</p><p>A theory of universal common descent based on evolutionary principles was proposed by Charles Darwin in his book The Origin of Species (1859), and later in The Descent of Man (1871). This theory is now generally accepted by biologists, and the last universal common ancestor (LUCA or LUA), that is, the most recent common ancestor of all currently living organisms, is believed to have appeared about 3.9 billion years ago. The theory of a common ancestor between all organisms is one of the principles of evolution, although for single cell organisms and viruses, single phylogeny is disputed</p>');
    17. accordion
    Alles anzeigen


    Quellcode

    1. <h3>The Mighty Accordion</h3>
    3. <div id="accordion">
    5. <h3 class="toggler atStart">History</h3>
    6. <div class="element atStart">
    7. <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>
    8. <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>
    10. <p>In 1790, Immanuel Kant (Konigsberg (Kaliningrad) 1724 - 1804), in his Kritik der Urtheilskraft, states that the analogy of animal forms implies a common original type and thus a common parent.</p>
    12. <p>Charles Darwin's grandfather, Erasmus Darwin, hypothesized in 1795 that all warm-blooded animals were descended from a single "living filament":</p>
    13. <blockquote>"...would it be too bold to imagine, that all warm-blooded animals have arisen from one living filament, which THE GREAT FIRST CAUSE endued with animality...?" (Zoonomia, 1795, section 39, "Generation")</blockquote>
    15. <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>
    16. <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."
    17. "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."
    18. "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>
    20. <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>
    22. </div>
    24. <h3 class="toggler atStart">Evidence of universal common descent</h3>
    25. <div class="element atStart">
    27. <h4>Common biochemistry and genetic code</h4>
    28. <p> All known forms of life are based on the same fundamental biochemical organisation: 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>
    30. <h4>Irrelevant differences</h4>
    32. <p> Differences which have no relevance to evolution and therefore cannot be explained by convergence, tend to be very compelling support for the universal common descent theory.</p>
    34. <p>Such evidence has come from two domains: amino acid sequences and DNA sequences. Proteins with the same 3-d structure need not have identical amino acid sequences; any irrelevant similarity between the sequences is evidence for common descent. In certain cases, there are several codons (DNA triplets) that code for the same amino acid. Thus, if two species use the same codon at the same place to specify an amino acid that can be represented by more than one codon, that is evidence for recency of a common ancestor.</p>
    35. <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Phylogenetic_tree.svg/340px-Phylogenetic_tree.svg.png" class="float-right" />
    36. <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>
    38. <h4>Phylogenetic trees</h4>
    41. <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>
    42. <div style="clear:both"></div>
    43. </div>
    45. <h3 class="toggler atStart">Examples of common descent</h3>
    46. <div class="element atStart">
    48. <h4>Artificial selection</h4>
    49. <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>
    51. <h4>Dog breeding</h4>
    53. <img src="http://upload.wikimedia.org/wikipedia/en/thumb/7/7e/IMG013biglittledogFX_wb.jpg/180px-IMG013biglittledogFX_wb.jpg" class="float-right" />
    54. <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>
    56. </div>
    58. </div>
    Alles anzeigen


    Quellcode

    1. .toggler {
    2. color: #222;
    3. margin: 0;
    4. padding: 2px 5px;
    5. background: #eee;
    6. border-bottom: 1px solid #ddd;
    7. border-right: 1px solid #ddd;
    8. border-top: 1px solid #f5f5f5;
    9. border-left: 1px solid #f5f5f5;
    10. font-size: 11px;
    11. font-weight: normal;
    12. font-family: 'Andale Mono', sans-serif;
    13. }
    15. .element {
    17. }
    19. .element p {
    20. margin: 0;
    21. padding: 4px;
    22. }
    24. .float-right {
    25. padding:10px 20px;
    26. float:right;
    27. }
    29. blockquote {
    30. text-style:italic;
    31. padding:5px 0 5px 30px;
    32. }
    Alles anzeigen



    Ich habe schon Probiert es in meine Seite einzubaun, aber leider funktionert das irgendwie nicht. Wenn ich dann drauf klicke geht nichts auf.

    Kann mir jemand weiterhelfen?

    Vielen Dank :)

  • Ja, hier mein momentaner code, ich hab nochmal angefangen und es so hinbekommen wie die demo aussieht, aber leider funktioniert das auf und zu nochimmer nicht.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    5. <html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
    6. <head>
    7. <title>website</title>
    8. <meta name="author" content="Nadine">
    10. <link rel="stylesheet" type="text/css" href="style.css">
    12. <style type="text/javascript">
    13. var accordion = new Accordion('h3.atStart', 'div.atStart', {
    14. opacity: false,
    15. onActive: function(toggler, element){
    16. toggler.setStyle('color', '#ff3300');
    17. },
    19. onBackground: function(toggler, element){
    20. toggler.setStyle('color', '#222');
    21. }
    22. }, $('accordion'));
    25. var newTog = new Element('h3', {'class': 'toggler'}).setHTML('Common descent');
    27. var newEl = new Element('div', {'class': 'element'}).setHTML('<p>Test Text</p>');
    29. accordion.addSection(newTog, newEl, 0);
    30. </style>
    32. </head>
    34. <body class="body" text="#000000" bgcolor="#BCDAA9" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    36. <table class="container">
    37. <tr><td>
    38. <div id="accordion">
    40. <h3 class="toggler atStart">Überschrift 1</h3>
    41. <div class="element atStart">
    42. Text 1
    43. </div>
    45. <h3 class="toggler atStart">Überschrift 2</h3>
    46. <div class="element atStart">
    47. Text 2
    48. </div>
    50. <h3 class="toggler atStart">Überschrift 3</h3>
    51. <div class="element atStart">
    52. Text 3
    53. </div>
    55. </div>
    57. </td></tr>
    58. </table>
    60. </body>
    61. </html>
    Alles anzeigen
    +


    Hier der css code von mir dazu:

    Quellcode

    1. .body{
    2. margin-top: 0px;
    3. margin-bottom: 0px;
    4. height: 100%;
    5. }
    7. .container{
    8. margin-left: 300px;
    9. width: 400px;
    10. height: 100%;
    11. background-color:#fff;
    12. }
    14. #content1{
    15. width: 100%;
    16. background-color:#999999;
    17. }
    19. .toggler {
    20. color: #222;
    21. margin: 0;
    22. padding: 2px 5px;
    23. background: #eee;
    24. border-bottom: 1px solid #ddd;
    25. border-right: 1px solid #ddd;
    26. border-top: 1px solid #f5f5f5;
    27. border-left: 1px solid #f5f5f5;
    28. font-size: 11px;
    29. font-weight: normal;
    30. font-family: 'Andale Mono', sans-serif;
    31. }
    33. .element {
    35. }
    37. .element p {
    38. margin: 0;
    39. padding: 4px;
    40. }
    42. .float-right {
    43. padding:10px 20px;
    44. float:right;
    45. }
    47. blockquote {
    48. text-style:italic;
    49. padding:5px 0 5px 30px;
    50. }
    Alles anzeigen


    Habe es momentan noch zeimlich unverändert gelassen, da ich es erst ändere wenn es auch funktioniert^^

    Liebe Grüße

  • Bin für heute unterwegs. Aber an deiner Stelle würde ich nochmal den Demo Code als Basis übernehmen.
    http://demos.mootools.net/Accordion

    Da sind einige Parts wie z.B. der domready Event, die du gelöscht hast.
    Am einfachsten ist es vielleicht doch, wenn du es wie in der Demo mit der mootools.js machst. Dann hast du wenigstens eine Garantie, dass es genauso funktioniert.

  • Hallo d0nut, es funktioniert jetzt :)

    Leider habe ich jetzt wieder ein kleines Problem. Ich möchte, das da wo der text steht immer ein 100%ig weiser background runter geht und das oben und unten 0px Abstand sind.
    Ich habe das schon oft gemacht, nur leider stehe ich heute wohl irgendwie auf der Leitung und komme nicht mehr davon runter. Außerdem möchte ich, dass das Logo als Bg, aber es wird nicht angezeigt (name und pfad sind richtig).




    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Dein Titel, der im Browser angezeigt wird</title>
    6. <script type="text/javascript" src="js/mootools.svn.js"></script>
    7. <script type="text/javascript">
    8. window.addEvent('domready', function(){
    9. var accordion = new Accordion('h3.atStart', 'div.atStart', {
    10. opacity: false,
    11. onActive: function(toggler, element){
    12. toggler.setStyle('color', '#000');
    13. },
    15. onBackground: function(toggler, element){
    16. toggler.setStyle('color', '#555');
    17. }
    18. }, $('accordion'));
    20. });
    21. </script>
    23. <link rel="stylesheet" type="text/css" href="css/accordion.css" />
    24. <link rel="stylesheet" type="text/css" href="css/style.css" />
    26. </head>
    27. <body class="body">
    28. <!-- Hier dein HTML Code. -->
    29. <table class="table">
    30. <tr cellpadding="0" cellspacing="0" valign="top" class="intable"><td>
    31. <!-- Damit auch alles funktioniert, brauchst du zum einen eine DIV-Box mit der id="accordion" -->
    32. <div id="accordion">
    33. <!-- Die Überschrift, die man dann anklicken muss, um das ganze zu öffnen, kommt zwischen h3 Tags mit der class="toggler atStart". Die Class ist zum einen für das Aussehen verantwortlich, aber auch für das Javascript. Also den class-Namen nicht verändern ;) -->
    34. <div class="logo"></div>
    35. <h3 class="toggler atStart">Common Descent</h3>
    36. <!-- So, der Text, der ein- und ausgeblendet wird, wird in eine DIV-Boxen mit der class="element atStart" gepackt. Die Class ist hier wieder für das Aussehen und das Javascript wichtig. Deswegen auch diese nicht ändern ;) Den Text in der DIV-Box kannst du dann beliebig ändern und formatieren. -->
    37. <div class="element atStart">
    38. Text
    39. </div>
    41. <h3 class="toggler2 atStart">History</h3>
    42. <div class="element atStart">
    43. Text
    44. </div>
    46. <h3 class="toggler3 atStart">Evidence of universal common descent</h3>
    47. <div class="element atStart">
    48. Text
    49. </div>
    51. <h3 class="toggler4 atStart">Examples of common descent</h3>
    52. <div class="element atStart">
    53. Text
    54. </div>
    56. </div>
    58. </td></tr>
    59. </table>
    60. </body>
    61. </html>
    Alles anzeigen


    According.css

    Quellcode

    1. .toggler {
    2. color: #ffffff;
    3. margin: 0;
    4. padding: 2px 5px;
    5. background: #B3E8A4;
    6. font-size: 11px;
    7. font-weight: normal;
    8. font-family: 'Andale Mono', sans-serif;
    9. margin-bottom: 5px;
    10. }
    12. .toggler2 {
    13. color: #ffffff;
    14. margin: 0;
    15. padding: 2px 5px;
    16. background: #265484;
    17. font-size: 11px;
    18. font-weight: normal;
    19. font-family: 'Andale Mono', sans-serif;
    20. margin-bottom: 5px;
    21. }
    23. .toggler3 {
    24. color: #ffffff;
    25. margin: 0;
    26. padding: 2px 5px;
    27. background: #996485;
    28. font-size: 11px;
    29. font-weight: normal;
    30. font-family: 'Andale Mono', sans-serif;
    31. margin-bottom: 5px;
    32. }
    34. .toggler4 {
    35. color: #ffffff;
    36. margin: 0;
    37. padding: 2px 5px;
    38. background: #476468;
    39. font-size: 11px;
    40. font-weight: normal;
    41. font-family: 'Andale Mono', sans-serif;
    42. margin-bottom: 5px;
    43. }
    45. .element {
    47. }
    49. .element p {
    50. margin: 0;
    51. padding: 4px;
    52. }
    54. .float-right {
    55. padding:10px 20px;
    56. float:right;
    57. }
    59. blockquote {
    60. text-style:italic;
    61. padding:5px 0 5px 30px;
    62. }
    Alles anzeigen


    style.css

    Quellcode

    1. .body {
    2. background-color: #B3E8A4;
    3. margin-top: 0px;
    4. margin-bottom: 0px;
    5. }
    7. .table {
    8. width: 500px;
    9. padding-top: 0px;
    10. margin-top: 0px;
    11. margin-bottom: 0px;
    12. margin-left:150px;
    13. }
    15. .intable {
    16. background-color: #ffffff;
    17. }
    19. .logo {
    20. width: 500px;
    21. height: 160px;
    22. background: url(images/logo.png);
    23. }
    Alles anzeigen



    lg