javascript - CSS column-count elements jumping across columns -
i'm trying dynamic amount of elements show across 5 elements using css3 column-count
, when expand list item heights on hover, causes jumping (an element going next column).
you can see behavior here
i'm assuming it's because column-count
uses height calculate item goes or something...how can have work intended?
if try increase height of <ol>
, become 4 columns or 3 columns because elements fill first column, start 2nd column, , on.
in short, css3 columns not right solution trying do. (if understand correctly, want hovered element overflow parent container going outside box. however, css3 columns designed such overflow continue @ top of next column, , there's no way i'm aware of change behavior).
i recommend using different approach achieve ui you're after, such using jquery insert wrappers around each column.
however, if you're set on using column-count, may able hack doing this:
jsfiddle:
css:
ol li:nth-child(5n) { padding-bottom: 40px; }
jquery:
function togglepadding(li, status) { var index = li.index(); var target = (index % 5 === 4) ? li : li.siblings().eq(index + 3 - (index % 5)); target.stop(true).animate({ "padding-bottom": (status === "on") ? "40px" : 0 }); } $('a.song').each(function () { var origwidth = $(this).width(); var origheight = $(this).height(); $(this).hover(function () { togglepadding($(this).parent(), "off"); $(this).stop(true).animate({ width: origwidth * 2, height: origheight * 2 }) }, function () { $(this).stop(true).animate({ width: origwidth, height: origheight }); togglepadding($(this).parent(), "on"); }); $(this).clone(true).attr({ "class": "song-detail" }).css({ "z-index": 1, "background-color": "#ccc" }).appendto('ol').wrap("<li></li>"); });
this rough demo , need cleaned production. strategy add 40px padding "buffer" after every 5th element (the end of column). when element hovered, find sibling @ end of column , animate padding 0.
but can see if run mouse on several elements in succession, boxes shudder 1 box temporarily jumps next column. css3 column-count wants balance columns.
so recommend using different approach, feel free play , see if can working.
**edit: 1 way without column-count**
since you're using jquery, have wrap every x elements in <div class="col">
, , use divs columns.
jsfiddle: http://jsfiddle.net/qhtvh/
jquery:
var container; var = 0; var numcols = 5; var colcount = math.ceil($('.songs a').length / numcols); $('.songs a').each(function () { if (i % colcount === 0) { container = $('<div class="col"></div>').appendto(".songs"); } $(this).appendto(container); i++; });
css:
.songs .col { max-width: 18%; overflow: hidden; display: inline-block; vertical-align: top; margin: 0 5px; } .songs { display: block; margin: 10px 10px; background-color: #eee; width: 200px; height: 40px; cursor: pointer; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; }
html:
<section class="songs"> <a class="song" data-src="songs/titanic.mp3" style="width: 187px;">titanic</a> <a class="song" data-src="songs/titanic.mp3" style="width: 187px;">titanic2</a> etc... </section>
Comments
Post a Comment