Loading...

Search jQuery

Search

jQuery Forum

tomturton

slideDown() - CSS3 columns

in Using jQuery • 10 years ago

I have a div with -webkit-column properties.

When I use jQuery to slideDown() the div, its height is expanded as if there are no CSS3 columns (ie. one long page).

The columns are there, but the div itself is too large.

Using jQuery v1.7.2, Google Chrome v20

1

Replies(1)

jakecigar

Re: slideDown() - CSS3 columns

10 years ago

I don’t see any problem with this code. How is yours different?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('.c3 p').slideDown()
})
</script>
<style type="text/css">
.c3 p
{
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
display: none;
}
</style>
<title>Untitled</title>
</head>
<body>
<div class="c3">
S t a r t
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit.
</p>
e n d
</div>
</body>
</html>

JΛ̊KE