CODEWITHSUNDEEP
javascriptjquery
Groen91
Groen91

Reputation: 95

Get height of dynamically changing element

This piece of code gets the height of .divone (which is responsive) and adds it as margin-top to .divtwo:

    var height = $(".divone").height();
    $('.divtwo').css({"margin-top": height + "px"});

How can I achieve that height gets updated, anytime the browser window gets resized and the height of .divone changes?

I added this line, but I it didn't work at all:

 $(window).on("resize", height)

Upvotes: 0

Views: 46

Answers (2)

connexo
connexo

Reputation: 56720

jQuery's .on(String event, Function handler) takes a minimum of two arguments: the event you want to listen to as a string, then a function to execute when the event triggers.

function recalcDivTwo() {
  var height = $('.divone').height();
  $('.divtwo').css({"margin-top": height + "px"});
}

Then add this to your document.ready handler:

$(window).on("resize", recalcDivTwo);

You can also define the handler function as an anonymous function in the call:

$(window).on("resize", function() {
  $('.divtwo').css({"margin-top": $('.divone').height() + "px"});
});

On short handler functions that serve no other purpose than that specific event handling I'd go with an anonymous, inline function definition as it also does not pollute the global namespace.

https://api.jquery.com/on/

Upvotes: 2

CaptainHere
CaptainHere

Reputation: 698

$(window).resize(func);
Var func=function(){
var height = $(".divone").height();
    $('.divtwo').css({"margin-top": height + "px"});
}

Upvotes: 1

Related Questions