2016-05-05 12 views
1

Ich habe einige Post, auf die Benutzer kommentieren kann, aber manchmal, wenn es mehr als 5 Kommentare für zB 25 Kommentare auf einem einzigen Post dann macht es meine Seite sehr schwer und langwie Kommentarbereich autoscroll wenn Kommentare sind viel

Dies ist, wie mein Beitrag Kommentar System aussehen

Post 1 
Comment for post 1 //if comments are more than 3 
<button class="view_comments" data-id="1">View previous comments</button> 
it will show 2 comments by default and a button above this to fetch all comments of this post 

Post 2 
comment for post 2 

Jetzt, als ich auf der vorherigen Kommentar Ansicht klicken holt sie alle Kommentare, die

den ganzen Raum von der Seite nehmen

Wie kann ich diese zusätzlichen Kommentare setzen in scrollbare div wie Facebook und linkedin tut

hier ist der jquery Teil

$(function() { 
    $("body").on("click", ".view_comments", function() 
{ 

var ID = $(this).attr("id"); 

$.ajax({ 
type: "POST", 
url: "https://www.example.com/ajax/viewajax.php", 
data: "post_id="+ ID, 
cache: false, 
success: function(html){ 
$("#view_comments"+ID).prepend(html); 
$("#view"+ID).remove(); 
$("#two_comments"+ID).remove(); 
} 
}); 

return false; 
}); 
}); 
+2

Legen Sie einfach eine Höhe Eigenschaft auf dem Container Div für die Kommentare und das ist alles. (Max-Höhe) –

+1

@ CeylanMumunKocabaş danke maximale Höhe arbeitete, schreiben Sie es als Antwort, so kann ich –

+0

auch auf den anderen Vorschlag über Überlauf-x sehen, wird es nützlich sein. –

Antwort

2

Set CSS-Eigenschaft max-height zum Container <div>, die Kommentare und es sollte zumindest teilweise lösen Ihr Problem hält.

1

Es ist eine CSS Frage meiner Meinung nach.

Sie können ein div als Platzhalter für alle Kommentare erstellen und eine feste Höhe festlegen, z. B. 300px. Und setze overflow-x: versteckt in CSS;

<div id="comment_placeholder" style="height: 300px; overflow-x: hidden;"> 
    <!-- append your comments here by jQuery --> 
</div>