JavaScript: Calculating a value from a CSS property in a <DIV> to another <DIV>

Question

I'm a noob so this is probably basic stuff, but I have tried to solve this by searching the web without any luck. Any help is much appreciated!

What I need to do is: To move a floating down X px after the page has been rendered, where X is the height of another . I have tested the CSS manually, adding X px to the "Top:" property and it works fine, the problem is doing it to six instances after the page has been rendered.

(the reason I need to do this is that I have no control over the output that comes from a database, otherwise I would have rearranged the order to

The solution can make use of JavaScript and/or jQuery, even mootools is loaded according to the initial script statements.

I included code from the last div with an ID selector, I dont know if this is relevant, I just got the feeling it was after surfing the web for two days.

Many thanks!

<div id="blogwrap1"> <--! Wraps all blog entries for one page-->

 <div class="blogwrap2"> <--! Same as above, just a second wrap-->

<--! ======================This section i repeated 6 times ======================-->

  <div class="entry"> <--! Wraps 1 blog entry-->

   <div class="entry-title"></div>

   <div class="entry-body">

    <div class="links"></div> <--! Here I need to add HEIGHT from "entry-tags" to TOP property -->

   </div>

   <div class="entry-footer">

    <div class="entry-footer-line">

     <div class="entry-tags"></div> <--! Get HEIGHT property -->

    </div>
   </div>
  </div>
 </div>
</div>

<--! ======================================================================-->

UPPDATE !

I have put a package here with html/CSS etc for testing.

move_div.zip (64,5kb)

One thing I probably was not clear about is that the height of the "entry-tags" should be added to the "top" property of the "links" class (it should not replace the value). What I'm trying to do is to float the div relatively at the same position when the "entry-tags" changes it height depending on how many tags/rows of tags is entered. Hope that made sense. Thanks!

Answer 1

Irrelevant, but:

If you've got Mootools and jQuery loaded simultaneously you might want to rectify that. The $ operator has different meanings in each of them, so scripts written for one may not work. Try to use one or the other.

That said, here it is in jquery, assuming that .entry-tags and .links are not within any other positioned elements:

var pos = $('.entry-tags:first').position();
$('.links:first').css('top', pos.top);

=========== Substantial Edit, above code left in for posterity and clarity ==============

Having seen your clarified question:

$('.entry').each(function(){
    var height = $(this).children('.entry-tags').height();
    $(this).children('.links').css('top', height);
});

If you want .links to be positioned relative to "entry" you can make sure that entry has "position: relative" declared. Positioned elements (absolute and relative both) have their position set in relation to their first positioned parent.

Answer 2

Is this the line you are looking for?

$('div#move_me_down').css('top', $('div#the_one_that_we_need_the_height_from').height()+'px');

Answer 3

I solved this with help of previous answers. They didn't work out of the box, but pointed me in the right direction. Thank you very much! The following code now work as intended:

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(function(){ 
     jQuery('.entry').each(function(){
     var extra = jQuery(this).find('.entry-tags').height();
     var total = 44 + extra;
     jQuery(this).find('.linkr-bm').css('top', total + 'px');
     }); 
    });
});