1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Text aufklappen

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von anndra, 12. August 2011.

  1. anndra

    anndra Grünschnabel

    Hallo,
    ich habe aus einer Bleiwüste erstmal Abschnitte mit aufklappbarem Text gemacht. Wenn man auf die Überschrift klickt, erscheint der Text, klickt man auf die nächste Überschrift, klappt sich der nächste Text auf und der eben gelesene zu. Das funktioniert gut.

    Jetzt würde ich aber gerne unter der Überchrift jeweils die ersten Zeilen anzeigen und dann mit einem Link wie "weiterlesen" den gesamten Absatz anzeigen. So wie ich es gelöst habe, bleibt dann natürlich der Link "weiterlesen" stehen, was blöd aussieht. Wie kann ich das verschönern? Geht das überhaupt mit html? Danke für Hilfe.

    Hier der derzeitige Code:
    HTML:
    1. <p><strong>Ueberschrift<strong></p>
    2. Erste Textzeilen blablabla <a href ="/tester/#" onclick="aufklappen('menue1')">weiterlesen</a><br />
    3. <div id="menue1" style="display: none;" >noch viel mehr Text blablabla blablabla.</div>
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

  3. anndra

    anndra Grünschnabel

    Danke, spicelab. Ohne JavaScript wäre es mir lieber, hat noch jemand eine Idee?
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    http://www.cssplay.co.uk/menu/showme-more.html basiert auf reinem CSS.

    Nachteil gegenüber der JS-Methode: Bei einem willkürlichen / unkontrollierten Mausklick wird der Text wieder versteckt.
     
    Zuletzt bearbeitet: 13. August 2011
  5. anndra

    anndra Grünschnabel

    Danke allen für die Tipps. Ich habe jetzt dieses hier:

    http://www.cssplay.co.uk/menu/more

    angepasst. Mein Code sieht so aus:

    HTML:
    1. <style type="text/css">
    2.  
    3. .holder {width:600px; margin:5px; padding:1em; border:1px solid #ddd;}
    4. .holder h2 {text-align:left;}
    5. a.hid {color:#000; text-decoration:none;}
    6. a.hid em {display:none; color: #000000; text-decoration:none;}
    7. a.hid:hover {text-decoration:none;}
    8. a.hid:active, a.hid:focus {background:#fff; text-decoration:none;}
    9. a.hid:active span, a.hid:focus span {display:none; text-decoration:none;}
    10. a.hid:active em, a.hid:focus em {display:block; width:100%; font-style:normal; cursor:default; text-decoration:none;}
    11. .clear {clear:both;}
    12.  
    13.  
    14.  
    15.  
    16. <div class="holder">
    17. <h2>Überschrift<h2>
    18. <p>kurze Einleitung </p>
    19. <p><a class="hid" href="more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span>weiterlesen</span>
    20. <em>weiterer Text blablabla</em></a></p></div>

    Ergebnis: Läuft super im Firefox.
    - In Opera zeigt es den em-Teil mit Underline, wie kriege ich das weg?
    - Im IE klappt es den em-Text immer gleich zurück. Ich finde nicht den Javascript-Code, der das offenbar verhindert, hilft mir jemand?
    - In Chrome sowie im Safari klappt weder der Original-Code noch mein angepasster. Was kann ich tun? Wenn es nicht anders geht, muss ich es eben so einrichten, dass in diesen Browsern der komplette Text steht, also nix auf- oder zugeklappt wird. Aber wie mache ich das?

    Danke allen!
    Anndra
     
  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Für die Browserkompatibilität bzgl. des Mausklickverhaltens kommt hier nur die empfohlene JS-Variante in Frage, die genau aus diesem Grund vom Autor entwickelt wurde.
     
  7. anndra

    anndra Grünschnabel

    @spicelab, nenn mich blind, ich finde diese nicht******! :eek:
     
  8. SpiceLab

    SpiceLab ZENmechanic Premium-User

  9. anndra

    anndra Grünschnabel

    Ich schätze, ich muss Code aus dem Quelltext kopieren. Ich finde ihn nicht, ehrlich! Es geht nicht um Faulheit, ich arbeite seit Tagen an dem Ding und werde es auch verstehen... aber hier stehe ich schlichtweg auf dem Schlauch. Bitte den Code nennen oder wenigsten die Zeile im Quelltext...
     
  10. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Die relevanten Bausteine sind in der Tat im Quellcode der Demo-Seiten zusammenzusuchen, wenn, wie im ersten Beispiel, kein direkter Download zur Verfügung bereitsteht.

    • Show me some more...again
    • Download: Download more_again.zip
    • jQuery - show me some more
    • "Komprimierter" Quellcode:
    Code (HTML5):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    4. <title> stu nicholls dot com | various - jQuery - more and less </title>
    5. <meta name="Author" content="Stu Nicholls" />
    6.  
    7. <style type="text/css">
    8. .show {cursor:pointer; color:#c00; display:block; text-align:right;}
    9. .hidden img {float:left; padding:10px 10px 10px 0;}
    10. p.jfy {text-align:justify;}
    11.  
    12. <script src="http://code.jquery.com/jquery-latest.js"></script>
    13.  
    14. <script type="text/javascript">
    15.  
    16. /* ================================================================
    17. This copyright notice must be untouched at all times.
    18. Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
    19. =================================================================== */
    20. $(document).ready(function(){
    21.  
    22. $(".hidden").hide();
    23. $(".show").html("show ....");
    24.  
    25. $(".show").click(function() {
    26. if (this.className.indexOf('clicked') != -1 ) {
    27.         $(this).prev().slideUp(500);
    28.         $(this).removeClass('clicked')
    29.         $(this).html("show ....");
    30.         }
    31.         else {
    32.         $(this).addClass('clicked')
    33.         $(this).prev().slideDown(500);
    34.         $(this).html("... hide");
    35.         }
    36. });
    37.  
    38. });
    39.  
    40. </head>
    41.  
    42. <body id="www-stunicholls-com">
    43.  
    44.  
    45. <h2>Alice's Adventures in Wonderland</h2>
    46. <p class="bold">by Lewis Carroll</p>
    47. <p class="bold">Down the Rabbit-Hole</p>
    48.  
    49. <p class="jfy">ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?'</p>
    50. <div class="hidden">
    51.     <img src="more/rabbit.jpg" alt="rabbit" title="" />
    52.     <p class="jfy">So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
    53.     <p class="jfy">There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but, when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.</p>
    54. </div>
    55. <i class="show"></i>
    56.  
    57. <hr />
    58.  
    59. <h2>Through the Looking Glass</h2>
    60.  
    61. <p class="bold">by Lewis Carroll</p>
    62.  
    63. <p class="bold">Looking Glass House</p>
    64.  
    65. <p class="jfy">One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.</p>
    66. <div class="hidden">
    67.     <img src="more/glass.jpg" alt="rabbit" title="" />
    68.     <p class="jfy">The way Dinah washed her children's faces was this: first she held the poor thing down by its ear with one paw, and then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr -- no doubt feeling that it was all meant for its good.</p>
    69.     <p class="jfy">But the black kitten had been finished with earlier in the afternoon, and so, while Alice was sitting curled up in a corner of the great arm-chair, half talking to herself and half asleep, the kitten had been having a grand game of romps with the ball of worsted Alice had been trying to wind up, and had been rolling it up and down till it had all come undone again; and there it was, spread over the hearth-rug, all knots and tangles, with the kitten running after its own tail in the middle.</p>
    70.  
    71. </div>
    72. <i class="show"></i>
    73.  
    74.  
    75. </body>
    76. </html>
     
  11. anndra

    anndra Grünschnabel

    Fantastisch, ich habs hinbekommen und es sieht super aus! 1000 Dank nochmal!
     
  12. sabrina11

    sabrina11 Grünschnabel

    Hallo!

    Der Beitrag ist zwar schon sehr alt, aber vielleicht habe ich ja Glück und mir kann trotzdem jemand helfen :)
    Wo kann ich in dem Code die Schriftgröße ändern?
    Ich dachte hier:

    <style type="text/css">
    .show {cursor:pointer; color:#c00; display:block; text-align:right;}
    .hidden img {float:left; padding:10px 10px 10px 0;}
    p.jfy {text-align:justify;}
    </style>

    Aber leider ist das nicht so.
    Hat jemand eine Idee?

    LG
    Sabrina
     
  13. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Von den drei Zeilen dürfte die Mittlere wegfallen, weil img eine Grafikdatei im Dokument einbindet.

    Bleiben Zeile 1 oder 2, oder beides, weil sich darin schon die beiden Schriftformatierungen text-align (Textausrichtung) und color (Schrift-/Textfarbe) wiederfinden.

    Schriftgröße "1.2em" ist von mir hier frei gewählt:
    Code (CSS):
    1. .show {cursor:pointer; color:#c00; display:block; text-align:right;font-size:1.2em;}
    2. .hidden img {float:left; padding:10px 10px 10px 0;}
    3. p.jfy {text-align:justify;font-size:1.2em;}
    Da diese drei Regelblöcke (gruppierte CSS-Eigenschaften) aber im Bezug zu CSS-Klassen stehen (zu erkennen am vorangestellten Punkt), im HTML-Code aber auch Elemente existieren, die keine dieser Klasse mittels des class-Attributs besitzen, werden sie bei der Formatierung auch nicht berücksichtigt.

    Der Einfachheit halber kann die Schriftgröße global für den Dokumentkörper <body> festgelegt werden, damit sie die bislang ausgeschlossenen Elemente einschliesst:
    Code (CSS):
    1. body {font-size:1.2em;}
    2. .show {cursor:pointer; color:#c00; display:block; text-align:right;}
    3. .hidden img {float:left; padding:10px 10px 10px 0;}
    4. p.jfy {text-align:justify;}
    Fiddle-Demo: https://jsfiddle.net/SpiceLab/18tu3tb5/

    [edit]Gefiddelt[/edit]
     
    Zuletzt bearbeitet: 22. Dezember 2016
  14. sabrina11

    sabrina11 Grünschnabel

    Guten Morgen!

    Das ist super Danke schön!!!
    Könntest Du mir noch zeigen, wie man die Überschrift verkleinert? Sorry, bin ein absoluter Anfänger und versuche durch Vorlagen in die Materie einzublicken :)

    Viele Grüße
     
  15. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Naja, wie font-size grundsätzlich angewendet wird, habe ich gestern ja schon kurz erläutert und demonstriert.

    Wenn das eine oder andere Element eine individuelle / spezielle Schriftgröße erhalten soll, wird die CSS-Eigenschaft auf dieses Element angewendet.

    Das CSS lautet dann eben so:
    Code (CSS):
    1. body {font-size:1.2em;}
    2. h2 {font-size:1em;} /* Wert ist von mir frei gewählt */
    3. .show {cursor:pointer; color:#c00; display:block; text-align:right;}
    4. .hidden img {float:left; padding:10px 10px 10px 0;}
    5. p.jfy {text-align:justify;}
    Fiddle-Demo: https://jsfiddle.net/SpiceLab/q8nmezwj/
    Anstatt in Vorlagen Dritter das Verständnis für (zum Teil komplexe Zusammenhänge) in CSS zu erlangen, solltest Du die Grundlagen anhand von öffentlichen Dokumentationen lernen, die kommentiert und mit nachvollziehbaren Beispielen ausgestattet sind.

    Zum Beispiel https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/font-size
     
Die Seite wird geladen...