Read More Funktion

  • Ich würde gerne für einige zu große Einträge in meiner Seite (Gästebuch, was auch immer) eine Weiterlesen (Read More) Funktion erstellen.
    Dabei bin ich mir aber bei ein paar Sachen unsicher, auch was das Vorgehen angeht.


    Ich würde das ganze schon gerne mit so einem kleinem Effekt machen, also müsste man das ganze ja auch schon mit JS machen. Könnte man das ganze eigentlich auch irgendwie über PHP realisieren? Mit Effekt dann ja warscheinlich nicht, wenn JS nicht eingeschaltet ist? Dabei frage ich mich dann ja jetzt auch, ob ich das ganze dann wirklich mit JS machen sollte oder nicht, weil wenn JS ja dann nicht aktiviert ist, müsste man den Eintrag dann ja entweder komplett anzeigen oder man kann den Rest halt nicht anzeigen?


    So einen kleinen Teil habe ich auch schon einmal mit JS realisiert: https://jsfiddle.net/46muwz4t/2/
    Nur würde ich das ganze dann ja auch nicht bei jedem Eintrag aus der DB manuell machen müssen. Da fängt auch eigentlich schon eines der Probleme an, wenn ich das ganze dann wirklich mit JS & natürlich PHP erstellen will. Die Einträge kommen ja aus der DB und ich gehe diese ja in einer foreach Schleife durch. Wie könnte ich da prüfen, ob JS aktiviert ist? Wenn nicht, würde ich den Eintrag ja dann ganz anzeigen. So eine Lösung habe ich bei Stackoverflow gefunden:

    JavaScript
    <script type="text/javascript">
    	$(document).ready(function(){
       	$.get("js.php");
     	});
    </script>


    PHP
    <?php
       session_start();
       $_SESSION['js'] = true;
    ?>


    Dann könnte ich das ja dann beim Einfügen der Einträge überprüfen, ob die Session existiert und dann so eine Funktion hier aufrufen: ?


    aber ich brauche dann ja auch noch den Rest des Strings. Wie kann ich denn dann nachher anzeigen?
    Man müsste dann ja auch zudem einen <div> um die entsprechenden ausklappbaren Teile legen und davor dann jeweils natürlich auch noch den link setzen, wie macht man das? Das würde man dann warscheinlich wieder mit Javascript machen bzw. jQuery?


    So ein kleiner Teil, wie man das ganze auch nur mit PHP realisieren könnte ist mir auch wohl eingefallen aber dann müsste man ja auch warscheinlich mit diesem Link irgendwie die Daten mitgeben oder das müsste dann jeweils eine Form sein, die dann abgeschickt wird?


    Ja, wie kann man das ganze am besten realisieren? Mit PHP oder mit Javascript oder findet ihr meinen Ansatz oben mit JS & PHP so okay?
    Das ganze hier habe ich übrigens in den PHP Thread gestellt, weil es ja eigentlich auch eher ein PHP Problem ist. Wenn ich die Einträge aus der DB holen will, muss ich ja mit PHP arbeiten um dann auch den String aufzuteilen bzw. dieses auch für jeden Eintrag zu machen, obwohl mir grade einfällt, das man ja auch eine JS Funktion erstellen könnte? 8| ... ?


    Puuuh, ich habe grad echt keine Ahnung mehr. (Bittet um Hilfe) :S

  • Ich würde da in der Art so vorgehen, als erstes die Artikel aus der Db laden. Dann hast du vermutlich ein Array mit lauter Artikeln.
    Dann würde ich einen Teil des Arrays abschneiden und in einen sichtbaren Bereich schieben und den Rest unsichtbar machen.



    PHP
    $text .= "\t". '<article>' ."\n\t\t";
    $text .= '<p class="sichtbar">' . "\n\t\t\t";
    $text .= substr($artikel['text'],0,600);
    $text .= '<span class="flex show">';
    $text .= 'Read More...';
    $text .= '</span>' . "\n\t\t\t";
    $text .= '</p>' . "\n\t\t";
    $text .= '<p class="hidden">'. $artikel['text'] . '</p>' . "\n\t";
    $text .= '</article>' . "\n\n";


    Und mit einer JS/jQuery Funktion auf die .show Klasse einen Event Handler legen:


  • Man läd dann halt voll viel zeug was evtl. niemand sehen will. Schlau wäre es das ganze über AJAX nachzuladen um die übertragenen Daten möglichst gering zu halten.. Du baust einfach einen mehr lesen link ein, der zum Artikel führt. Mit JS schaust du ob der Link getriggert wird, dann lädst du den Beitrag nach und blendest ihn ein.

  • wolf
    Könntest du das ein wenig spezifizieren?
    Ich weiß ehrlich gesagt nicht, wie du das genau meinst. Meinst du, das ich nur einen Teil des Textes eines Feldes aus der DB laden soll? Geht das überhaupt?


    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


    Wäre denn mein Ansatz wie oben so okay?
    Ich würde dann ja eine Session setzen, um damit dann im PHP Teil zu oprüfen, ob JS auch wirklich vom Client her aktiviert ist und wenn nicht dann halt den ganzen Text ohne Kürzung anzeigen und natürlich dann auch ohne so einen Read More / Weiterlesen Button oder Link.


    Dann nutze ich die auch o.g Funktion um jeden Eintrag so aufzuteilen oder wie ich das jetzt bei Wolf verstanden habe, das ich dann nur (irgendwie) einen gewissen Teil des Eintrages mit PHP lade und dann den Rest mit ajax asynchron nachladen, damit man den Traffic möglichst gering hält, nur wie macht man sowas? Dann müsste man ja auch noch einen div um die jeweiligen Bereiche legen und das wäre es dann ja, zumindest so vom Ansatz her?

  • Also du brauchst zwei Felder in der DB (`preview`,`residual`) bzw ('vorschau`,`rest`)
    In das erste schreibst du immer die ersten 150 Zeichen oder den ersten Absatz oder so und den Rest eben in die zweite spalte. Dann kannst du via AJAX mit der ID der Zeile dir den Rest holen


    Hier hab ich mal gespielt.. http://codepen.io/wolf-w/full/wBLEdQ


    Das PHP Script sieht so aus:

  • Naja, wenn dann würde man die ID ja auf jeden Fall so mitübergeben und das dann nicht so alles manuell mit switch-case testen, ansonsten wird das ganze ja unfassbar überfüllt und da hätte ich auch keine Lust drauf. :D
    Ich denke aber mal, das es nur ein Beispiel ist? ;)


    Würdest du da dann eine extra Tabelle für machen, mit einer Referenz auf die alte, wo dann der rest Text drin steht oder würdest du dann die Tabelle (eintrag heißt die bei mir) um ein Feld erweitern, das dann residual heißt und das andere Feld in preview oder was auch immer umbennen?


    Deine kleine Spielerei sieht ja auch sehr nett aus aber das dann der button verschwindet wollte ich nicht unbedingt. Im Grunde ist mein kleines JS Skript dafür ja auch schon fertig. Das habe ich ja auch oben schon verlinkt (jsfiddle). Das war allerdings nur ein kleiner Test.

  • DU holst ja die Daten aus der DB und nicht aus dem Code..


    Einfach zur Tabelle hinzufügen und so nennen wie du halt Bock hast, wichtig ist nur das in der einen spalte der Anfang ist und in der anderen spalte der Rest. Wenn du den ganzen Artikel anzeigen willst, musst du halt beide Spalten auslesen..


    Es wäre ja auch super schwer dafür zu sorgen das der Button nicht verschwindet gell? :D
    Du musst aber aufpassen das bei einem 2. read more klick nicht wieder AJAX greift, sondern das geladene wieder angezeigt wird.. (in meinem JS findet man auch eine Sperre: )

    JavaScript
    if(gecklickterLink.hasClasss('loaded'){ return; }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!