JQuery - How to get element height value and use it in another element through css code?

Question

I want to get the height (or width .. it doesn't matter) from element A and use this height to set css to element B ... like

 $('#element_B').css({ 'top','element_A_height' }) 

A small example here. I know that javascript is not even close to something that works, I just tried to explain what I would like to do.

http://jsfiddle.net/cJdXg/

I have no idea how to achieve this .. any ideas?

Answer 1

Here is an example of what you want to achieve: http://jsfiddle.net/cJdXg/2/

HTML:

 <div id="BoxeeBox">Lorem ipsum dolor. #boxeeBox</div> <div id="emptyBox1">#emptyBox1</div> <div id="emptyBox2">#emptyBox2</div> 

JavaScript:

 var BoxeeBox = $('#BoxeeBox'); /* cache the selector */ $('#emptyBox1').css({ width: BoxeeBox.width() }); $('#emptyBox2').css({ height: BoxeeBox.height() }); 

CSS

 div { background: #b6d754; color: #ffffff; padding: 10px; margin: 5px; float: left; clear: both; border-radius:10px; } 

Answer 2

Why do you need the following:

http://api.jquery.com/height/

Example:

 var elementAheight = $('#elementA').height(); 

however, if element A has fields, you can give us this:

http://api.jquery.com/outerHeight/

Example:

 var elementAoutheight = $('#elementA').outerHeight(); 

Hope this helps!

Answer 3

looked like these functions and examples of the functions below, this could help u

http://api.jquery.com/height/

http://api.jquery.com/width/

Answer 4

 $('#element_B').css("top", $("#element_a").css("top")); 

But I suggest caching it first and reusing it for another case

 var topVal = $("#element_a").css("top"); $('#element_B').css("top", topVal); $('#element_C').css("top", topVal); 

Answer 5

it should be something like

 $("#elemA").height( $("#elemB").height() );