CODEWITHSUNDEEP
javascriptjquerycssajaxfacebook
Aniket Singh
Aniket Singh

Reputation: 877

how to make comment area autoscroll when comments are much

I have some post on which user can comment but sometime when there are more than 5 comments for e.g 25 comments on a single post then it makes my page very heavy and long

This is how my post comment system look like

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

Now when i click on view previous comment it fetches all comments which take all the space of the page

How can i put these extra comments into scrollable div like facebook and linkedin does

here is the jquery part

$(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;
});
});

Upvotes: 1

Views: 123

Answers (2)

Ceylan Mumun Kocabaş
Ceylan Mumun Kocabaş

Reputation: 527

Set CSS property max-height to the container <div> that holds the comments and it should at least partially solve your problem.

Upvotes: 2

amirpaia
amirpaia

Reputation: 376

It's a CSS question in my opinion.

You can create a div as a placeholder of all comments and set fix height to it, for example 300px. And set overflow-x:hidden in CSS;

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

Upvotes: 1

Related Questions