StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery rearrange DOM elements
text
Body
copied!<p>I'm a little confused why this is not working how it's supposed to.</p> <p>I have a list of <code><div></code>s that wrap around based on the size of the page. But clicking the div it <code>.animate()</code> the width of the clicked div and animates the divs after it closer together and stacks them.</p> <p>This all works except the last stacked div, despite having plenty of room still gets knocked down to the next row.</p> <p>please see my code on jsfiddle: <a href="http://jsfiddle.net/ZHYRq/2/" rel="nofollow">http://jsfiddle.net/ZHYRq/2/</a></p> <pre><code>$.each($('.employee-box'), function(i, el) { $(el).addClass("top-" + (Math.round($(el).offset().top))); return $(el).css('position', 'relative').attr('data-left', Math.round($(el).offset().left)); }); $('.employee-image').hover(function(e) { var $employee; $employee = $(e.target).parents('.employee-box'); if (e.type === 'mouseenter') { return $($employee.find('a.bio')).addClass('highlight'); } else { return $($employee.find('a.bio')).removeClass('highlight'); } }); $('.employee-image, a.bio').click(function(e) { var $employee, is_expanded, speed; speed = 150; $employee = $(e.target).parents('.employee-box'); is_expanded = $employee.hasClass('bio-expanded'); if ($('.bio-expanded').length > 0) { $.when(collapse_previous_bio(speed)).then(function() { if (!is_expanded) { return expand_bio_box($employee, speed); } }); } else { expand_bio_box($employee, speed); } return false; }); var collapse_previous_bio = function(speed) { var klass; klass = "." + $('.bio-expanded').attr('class').match(/top-\d{1,5}/)[0]; $('.bio-expanded .bio-block').fadeOut(speed, function() { $('.bio-expanded').animate({ width: "185px" }, speed); $(klass).animate({ left: '0px' }, speed); $('.bio-expanded').removeClass('bio-expanded'); }); }; var expand_bio_box = function($employee, speed) { var curr_left, klass; klass = "." + $employee.attr('class').match(/top-\d{1,5}/)[0]; curr_left = parseInt($employee.data('left')); // comment out the $.when block and un-comment out the collapse_others() to see the other elements collapse as they should $.when(collapse_others(klass, curr_left)).then(function() { $employee.animate({ width: "392px" }, speed, function() { $employee.find('.bio-block').fadeIn(speed); $employee.addClass('bio-expanded'); }); }); // collapse_others(klass, curr_left) }; var collapse_others = function(klass, curr_left) { var left_pos; left_pos = 0; $.each($(klass), function(i, el) { var el_left; el_left = parseInt($(el).data('left')); $(el).css({ zIndex: 100 - i }); if (el_left > curr_left) { $(el).animate({ left: "-" + left_pos + "px" }, 100); left_pos += 100; } }); }; </code></pre> <p>I'm not sure what is wrong here. Any thoughts?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload