Miha Šušteršič Miha Šušteršič - 1 month ago 7
jQuery Question

jQuery - set div width equal to height

I have a div that will always fill 100% of the browser height. Now I want to set its width to the same value (including screen resizing).

html:

<main>
<div id="mainCircle">
</div>
</main>


css:

body, html {
height: 100%;
margin: 0;
padding: 0;
}

main {
height: 100%;
width: 100%;
overflow: hidden;
}

#mainCircle {
height: 100%;
border-radius: 50%;
background-color: gray;
}


js:

$(document).ready(function() {
$('#mainCircle').width($('#mainCircle').height);
$(window).resize(function() {
$('#mainCircle').width($('#mainCircle').height);
})
})


If I pass in the value for
$('#mainCircle').width
as a number - for example 100px this will work, but not dynamically. What am I doing wrong?

Answer

in jQuery height() is a function, not a property

$(document).ready(function() {

    $(window).on('resize', function() {
        $('#mainCircle').width( $('#mainCircle').height() );
    }).trigger('resize');

});