How to use a jQuery variable in CSS property


Tags: jquery,html,css,responsive-design

Problem :

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?



Solution :

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";

    CSS Howto..

    How to ensure dynamic CSS is loaded first before AJAX content?

    How to add my custom css class to a html element

    Dialogs are showing at the bottom of the page

    How to change tooltip style in jQuery vmap?

    How do you set a div's location to be centered when we don't know the screen size?

    How to style webpage with percentages

    How can I have a CSS hover affect a different tag?

    How to not lose the css while appending html to an element?

    how to get rid of the border-bottom by css?

    CSS: Formatting blocks. Strange height behaviour or how to adjust height by content inside th block

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How to hide and fade div using jquery and css

    How to embed css to HTML in laravel?

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    How to design a full width bar with HTML and CSS [closed]

    How to hide header on scroll down, show on scroll up like linkedin menu

    How to change css content hover effect background color css php in this situation?

    How can CSS have a significantly negative effect on page paint time in a specific area of a web page?

    How to use getElementId on and ID's Element

    How to prevent image moving when resizing window

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    How to use CSS on autocomplete textbox selected values

    CSS: How to position an to the middle of the parent element [closed]

    How to add space after border in css

    How to set a timer for CSS animation-timing-function?

    How do I align a dropdown menu below a
    ?

    How can I set css for a class in a class?

    How to Make a materialize CSS button's width same as col s12?

    How to scale div from jquery css

    How to apply customized css to SSRS report