CODEWITHSUNDEEP
javascripthtmlcss
Pieter
Pieter

Reputation: 389

increase height of div for each added element

I am outputting comments from my database using a while loop now I would like for each added comment that the height of a certain div increases how should I do this? I was thinking about making a for loop that counts the number of comments outputted with the while loop and then increase the css height for each counted div in the for loop. But I don't really know how to increment the height at the end.

//While loop which outputs the comments
<div class="commentwrapper">
while($rowcomments = mysqli_fetch_array($resultgetcomments)){
echo "<div class='commentdiv'>
	<p class='commentuser'> Posted by: '".$rowcomments['CommentUsername']."' on: '".$rowcomments['CommentDate']."'</p> '".$rowcomments['CommentTxt']."'</div>

for(var i = 0; i < rowcomments.length; i++){
        document.getElementById('#commentwrapper');
        commentwrapper.style.height = /* here I would like to increase the height per 250px for each outputted comment*/;

}

Upvotes: 0

Views: 703

Answers (3)

Osama
Osama

Reputation: 3040

for(var i = 0; i < rowcomments.length; i++){
var commentwrapper =  document.getElementById("#commentwrapper");
if(height===null){
var height = document.getElementById("#commentwrapper").style.height;
}
else{
height=height + 250;
}
    commentwrapper.style.height = height;
}

Upvotes: 0

Hapstyx
Hapstyx

Reputation: 127

You can use jQuerys .animate() method inside the for loop:

for(var i = 0; i < rowcomments.length; i++){
    $('#commentwrapper').animate({'height': '+=250px'});
}

Upvotes: 0

Squiggs.
Squiggs.

Reputation: 4474

CSS to the rescue. No JS necessary.

.commentwrapper {
    display: table; /* Make the container element behave like a table */
}

.commentdiv {
    display: table-cell; /* Make elements inside the container behave like table cells */
}

Upvotes: 1

Related Questions