javascript - Get the last div in a row of floating divs

Question

I have a number of divs floating in several rows. The divs contain text-previews and a link to slide down the full content (see http://jsfiddle.net/yDcKu/ for an example).

What happens now: When you slide down the content-div it opens right after the connected preview. What I want to happen: Open the content-div after the last div in the row.

I assume the could be done by:
1. find out which div is the last one in the row of the activated preview,
2. add an id to this div and
3. append the content-div to this div.

I have a solution for steps 2 und 3 using jQuery but no guess how to do the first step. I can manage to get the document width and the x- and y-value of each div but I have no idea how to find out which div has the highest x- as well the highest y-value and as well is in the row of the activated preview-div.

Any idea anyone? Thanks

Answer 1

Here is an example that does what you want. I simplified your code, so you don't have to manually ID every entry and preview.

http://jsfiddle.net/jqmPc/1/

It's a little complicated. Let me know if you have questions.

Basically, when the window is resized, the script goes through and finds the first preview in each row by finding the preview with the same left offset as the very first one. It then adds a class last to the entry before (previous row) and class first to this preview. I do css clear: left on both of these so that everything wraps normally when the entries open.

I made your code generic, without IDs:

<div class="preview">
    <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

This makes you not have to write the same code over and over.

The open/close script:

 $('.trigger').click(function() {
    $('.openEntry').slideUp(800); // Close the open entry
    var preview = $(this).closest('.preview');  // Grab the parent of the link

    // Now, clone the entry and stick it after the "last" item on this row:
    preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});

// Use "on()" here, because the "openEntry" is dynamically added 
// (and it's good practice anyway)
$('body').on('click', '.close', function() {
    // Close and remove the cloned entry
    $('.openEntry').slideUp(800).remove();
});

This could be simplified a bit I'm sure, especially if you were willing to reformat your html a little more, by putting the entry inside of the preview element (but still hidden). Here is a slightly simpler version, with the html rearranged:

http://jsfiddle.net/jqmPc/2/

(I also color the first and last element on the line so you can see what is going on)