How to use a jQuery variable in CSS property

Question

I having the following jQuery which finds the height of a responsive image:

        $(document).ready( function() { //Fires when DOM is loaded
            getImageSizes();
            $(window).resize(function() { //Fires when window is resized
                getImageSizes();
            });
        });
        function getImageSizes() {
            $("#slideshow img").each(function() {
                var $height = $(this);
                console.log( $height.height() );

            });

        }

And my goal is to use the $height variable to specify the height of a div with the ID of slideshow.

I assume I can use this:

$('#slideshow').css({'height': $height + 'px;'});

However it is not working (no height is specified).

I included the above line like so:

        $(document).ready( function() { //Fires when DOM is loaded
            getImageSizes();
            $(window).resize(function() { //Fires when window is resized
                getImageSizes();
            });
        });
        function getImageSizes() {
            $("#slideshow img").each(function() {
                var $height = $(this);
                console.log( $height.height() );

                $('#slideshow').css({'height': $height + 'px;'});
            });

        }

Is there something I am missing?

Answer 1

You are logging $height.height(), but then only using $height in the CSS.

If you named your variables better, it would be easier :p

var $height = $(this).height();
$("#slideshow").css({"height":$height+"px"});

Or my preference:

document.getElementById('slideshow').style.height = this.height+"px";