CODEWITHSUNDEEP
javascriptjquery
aw3123
aw3123

Reputation: 139

Get style attribute value add 'X' and set the new value

when user clicks on the load-more button and card-wrapper has class list-view.

I wanted to get the mason style attr value and add 300px on top of it and set that value to mason div.

Issue here is i can get the mason arrt value, but newheight is returning "NaN".

Please help!!

$('.load-more').on('click', function() {

    if ($('.cards-wrapper').hasClass('list-view')) {

        setTimeout(function() {
            var currentHeight = $('.mason').attr('style');
            console.log('current' + currentHeight);

            var newHeight = parseInt(currentHeight);
            console.log('new height' + newHeight);
            $('.mason').css('height', newHeight + 300);

        }, 3000);

    }
});
<div class="mason clear-fix" style="height: 6380px;">

Upvotes: 0

Views: 247

Answers (4)

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

Try to run this. It's working. 

jQuery(document).ready(function(){
    jQuery('.load-more').on('click', function() {

    

        setTimeout(function() {
            var currentHeight = jQuery('.mason')[0].style.height;
            console.log('current' + currentHeight);

            var newHeight = parseInt(currentHeight);
            console.log('new height' + newHeight);
            jQuery('.mason').css('height', newHeight + 300);

        }, 3000);

   
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="mason clear-fix" style="height: 6380px;">

<button class="load-more"></button>

I have just used jQuery('.mason')[0].style.height; to get height value from style attribute. I hope this will work for you.

Thanks.

Upvotes: 0

Alessandro
Alessandro

Reputation: 4472

You could use the method jQuery's height() in order to get/set the height of the div, please see following example:

$('.load-more').on('click', function() {

   setTimeout(function() {
        var currentHeight = $('.mason').height()
        console.log('current' + currentHeight);

        var newHeight = parseInt(currentHeight) + 300;
        console.log('new height' + newHeight);
        $('.mason').height(newHeight + 300);

    }, 3000);
});
.mason {
  background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mason clear-fix" style="height: 100px;">
</div>
<input type="button" class="load-more" value="expand">

Note: You're also showing currentHeight in console instead of the new one:

var newHeight = parseInt(currentHeight);
console.log('new height' + newHeight);

The above code prints the currentHeight, you should do something like:

var newHeight = parseInt(currentHeight) + 300;
console.log('new height' + newHeight);

I hope it helps you, bye.

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You could use either $('.mason').height() or $('.mason').css("height") to get the height of the element, same goes for setting the new height of the element

$('.load-more').on('click', function() {


  setTimeout(function() {
    var currentHeight = $('.mason').height();
    console.log('current ' + currentHeight);

    var newHeight = parseInt(currentHeight);
    console.log('new height ' + (newHeight + 300));
    $('.mason').height((newHeight + 300));

  }, 3000);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="load-more">load more</div>
<div class="mason clear-fix" style="height: 6380px;">

Upvotes: 0

Skodsgn
Skodsgn

Reputation: 981

Get height from .mason element, not attribute style.

var currentHeight = $('.mason').height();

Upvotes: 2

Related Questions