Friday 13 September 2013

jquery columnizer and display:none

jquery columnizer and display:none

I'm using jquery plugin columnizer to split a div with text into two
columns. It doesn't work properly when the div has property display:none,
the same if the parent div has display:none. I know this behaviour is not
surprising: the div is hidden so the plugin is not able to count
width/height properly. But maybe there could be a way to solve it, knowing
that the parent div can be toggled?
HTML
<div class="button">
</div>
<div class="parent" style="display:none">
<div class="child">
<h1>Title</h1>
<p>Text text text text text text text text text text text text text</p>
<p>Text text text text text text text text text text text text text</p>
<p>Text text text text text text text text text text text text text</p>
</div>
</div>
jQuery
$('.button').click(function() {
$('.parent').slideToggle(700);
});
$('.child').columnize({columns:3});

No comments:

Post a Comment