I'm exploring ways to transform dynamic content into slides. Essentially, I have a <ul> element that is sized 300x100 pixels. As the list items within it exceed the height of the <ul>, I aim to group these overflowing items into divs, creating multiple sets based on the specified height.
The approach I am experimenting with involves floating the list items, but I'm unsure if this is the correct path or how to proceed further.
CSS:
<style>
ul {
height: 100px;
width: 300px;
}
ul li {
float: left;
}
</style
HTML:
<ul>
<li>first</li>
<li>ffgggfs</li>
<li>sffsfsf</li>
<li>jgjghjgfj</li>
<li>trtretert</li>
<li>ghhfhfhgf</li>
<li>sdfsdfsdf</li>
<li>fghjjh</li>
<li>iuyuiy</li>
<li>cvcvc</li>
<li>hgjhjg</li>
<li>tryryre</li>
<li>kkhjkhjk</li>
<li>sdfsdfsdf</li>
<li>khjkhjk</li>
<li>adfsfafsaf</li>
<li>syuuyuyu</li>
<li>sweeerre</li>
<li>last</li>
</ul>
jQuery:
<script>
var sumHeight = 0;
$('ul li').filter(function() {
var $this = $(this),
pHeight = $this.parent().height(); // parent inner height
sumHeight += $this.outerHeight(true); // + block outer height
return sumHeight < pHeight;
}).insertAfter('ul').wrapAll('<div></div>');