Question

I have a problem setting height after the document is loaded heres code pieces:

<script type="text/javascript">
    $(document).ready(function() {
        var oldHeight = $('.gallery-block').css('height');
        var newHeight = oldHeight + 100; --> was for testing
        $('.gallery-block').css('height', '+=100');
    });
</script>

.gallery-block
{
    float: right;
    width: 100px;
    height: 120px;
    text-align: center;
    margin-top: 20px;
}

the document loads with the same width, i need it to load with height value + 100 without setting it in the css.

Answer 1

It should work as you have it.. $('.gallery-block').css('height', '+=100');
`

This functionality, though, was added in v1.6 and above..

Alternatively you can use

$('.gallery-block').css({height:'+=100'});

demo at http://jsfiddle.net/gaby/Qe7WV/

---

For pre-v1.6 versions (if you are not allowed to upgrade for some reason) you can use animate with 0 duration.

$('.gallery-block').animate({height:'+=100'}, 0);

demo at http://jsfiddle.net/gaby/Qe7WV/1/

or

use the version that accepts a function as parameter (v1.4 and after)

$('.gallery-block').css('height', function(index,value){ return parseInt(value)+100; });

demo at http://jsfiddle.net/gaby/Qe7WV/2/