I need assistance in reducing the height of a div within an ajax response that has a class called .shorten-post, but I am unsure how to accomplish this task.
I specifically want to decrease the height only for those within the ajax response, not throughout the entire document.
Below is the script I am currently using to handle ajax requests:
var page = 1;
$(window).scroll(function() {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
page++;
loadMoreData(page);
}
});
function loadMoreData(page){
$.ajax(
{
url: '?page=' + page,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(profcontent)
{
if(profcontent == ""){
$('.ajax-load').html("No more records found");
return;
}
$('.ajax-load').hide();
$(profcontent).filter('.shorten-post').each(function(){
if ($(this).height() > 100) {
$(this).height(50).css({ 'overflow': 'hidden'});
$(this).siblings('.toggle-shorten-post').show();
}});
$(profcontent).insertBefore("#post-data");
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
EDIT
Here is a brief overview of the code related to my profcontent:
<div id="tu_mainpost_<?php echo($current_post['slug_unique']); ?>" class="tu-post">
<div class="tu-post-header">
</div>
<div class="tu-post-image alt-grid shorten-post">
<div class="row">
<img class="img-responsive" src="<?php echo(base_url('assets/img/uploads/' . $current_post['source_img'])); ?>" style="width: 100%; height: inherit;">
</div>
<div class="row">
<div class="col-md-12 tu-main-description" style="margin: 10px 0px;">
<div class="tu-main-description">
<p class="wordbreak"><?php echo nl2br($current_post['description']); ?></p>
</div>
</div>
</div>
</div>
</div>