Develop Reference

jQuery Navigation Carousel

I'm trying to make a carousel-like navigation and subnavigation.
This script works almost as I expected:
https://jsfiddle.net/xpvt214o/23270/
Here is how it should work:
If the navigation overflows, make next arrow visible.
If we scroll right, make the left arrow visible.
Hide both arrows if the navigation does not overflow.
In the first script I have a few problems:
1) Prev and next arrows from both navs work for first nav
2) When I scroll right and really get to the end of the navigation, I need to click the next arrow once more before it hides.
To make appropriate arrows work with their navigations I wrap my main code in a function and replace $('.go-left') to nav.find('.go-left') and same for the right arrow. Here's the code:
https://jsfiddle.net/0z5u4vyt/5/
The arrows are supposed to work but they don't. Please, I need your help!

in your javascript code var prevArrow = nav.find('.go-left'); and var nextArrow = nav.find('.go-right'); don't get value so change your code to
var prevArrow = nav.siblings('.go-left');
var nextArrow = nav.siblings('.go-right');
function navCarousel(el) {
var nav = el;
var navFirstItem = nav.find('li:first-child');
var navLastItem = nav.find('li:last-child');
var prevArrow = nav.siblings('.go-left');
var nextArrow = nav.siblings('.go-right');
function checkNavOverflow() {
if (nav.prop('scrollWidth') > nav.width() &&
(nav.find('ul').width() - navLastItem.offset().left) < 51) {
nextArrow.css('display', 'block');
} else {
nextArrow.css('display', 'none');
}
if (navFirstItem.offset().left < 15) {
prevArrow.css('display', 'block');
} else {
prevArrow.css('display', 'none');
}
}
checkNavOverflow();
$(window).on('resize', function() {
checkNavOverflow();
// console.log(nav.find('ul').width() - navLastItem.offset().left);
});
prevArrow.click(function() {
var pos = nav.scrollLeft() - 200;
nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
});
nextArrow.click(function() {
var pos = nav.scrollLeft() + 200;
nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
});
}
navCarousel($('.category-navigation .category-navigation-container'));
navCarousel($('.subcategory-navigation .subcategory-navigation-container'));
body {
background: #20262e;
padding: 0;
margin: 0;
font-family: Helvetica;
}
.category-navigation, .subcategory-navigation {
background-color: #fff;
position: relative;
border-bottom: 1px solid grey;
}
.category-navigation-container, .subcategory-navigation-container {
overflow: hidden;
}
.category-navigation ul, .subcategory-navigation ul {
list-style: none;
display: flex;
white-space: nowrap;
}
.category-navigation ul li, .subcategory-navigation ul li {
padding: 20px;
}
.category-navigation .go-left, .subcategory-navigation .go-left, .category-navigation .go-right, .subcategory-navigation .go-right {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 20px;
height: 20px;
background-color: grey;
z-index: 9;
border-radius: 50%;
padding: 10px;
text-align: center;
}
.category-navigation .go-left, .subcategory-navigation .go-left {
left: 0;
}
.category-navigation .go-right, .subcategory-navigation .go-right {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-navigation">
<div class="go-left">←</div>
<div class="category-navigation-container">
<ul>
<li>Category Item 1</li>
<li>Category Item 2</li>
<li>Category Item 3</li>
<li>Category Item 4</li>
<li>Category Item 5</li>
<li>Category Item 6</li>
<li>Category Item 7</li>
<li>Category Item 8</li>
<li>Category Item 9</li>
</ul>
</div>
<div class="go-right">→</div>
</div>
<div class="subcategory-navigation dropdown">
<div class="go-left">←</div>
<div class="subcategory-navigation-container">
<ul>
<li>
<a href="#">
<div>Subitem 1</div>
</a>
</li>
</ul>
</div>
<div class="go-right">→</div>
</div>

How to get updated top position of scrolled up div?

http://codepen.io/leongaban/pen/YNBgqE
After you scroll the #tickers-col how do you get the correct updated top position of the div?
From the log no matter how far up the column goes, it still displays the original y position of the div:
colPos Object {x: 8, y: 8}
const tickersCol = document.getElementById("tickers-col");
// https://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
function getPos(el) {
for (var lx=0, ly=0;
el != null;
lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
return {x: lx,y: ly};
}
function mouseHover() {
const colPos = getPos(tickersCol);
console.log('colPos', colPos)
}
.container {
position: fixed;
font-family: Arial;
}
#tickers-col {
overflow-y: auto;
height: 400px;
}
li {
margin-bottom: 10px;
list-style: none;
padding: 5px 10px;
width: 120px;
color: white;
background: salmon;
border-radius: 4px;
cursor: pointer;
}
<div class="container">
<div id="tickers-col">
<ul>
<li onmouseenter="mouseHover()">aaa</li>
<li onmouseenter="mouseHover()">bbb</li>
<li onmouseenter="mouseHover()">ccc</li>
<li onmouseenter="mouseHover()">ddd</li>
<li onmouseenter="mouseHover()">eee</li>
<li onmouseenter="mouseHover()">fff</li>
<li onmouseenter="mouseHover()">ggg</li>
<li onmouseenter="mouseHover()">hhh</li>
<li onmouseenter="mouseHover()">iii</li>
<li onmouseenter="mouseHover()">jjj</li>
<li onmouseenter="mouseHover()">kkk</li>
<li onmouseenter="mouseHover()">lll</li>
<li onmouseenter="mouseHover()">mmm</li>
<li onmouseenter="mouseHover()">nnn</li>
<li onmouseenter="mouseHover()">ooo</li>
<li onmouseenter="mouseHover()">ppp</li>
<li onmouseenter="mouseHover()">qqq</li>
<li onmouseenter="mouseHover()">rrr</li>
<li onmouseenter="mouseHover()">sss</li>
<li onmouseenter="mouseHover()">ttt</li>
<li onmouseenter="mouseHover()">uuu</li>
<li onmouseenter="mouseHover()">vvv</li>
<li onmouseenter="mouseHover()">www</li>
<li onmouseenter="mouseHover()">yyy</li>
<li onmouseenter="mouseHover()">xxx</li>
<li onmouseenter="mouseHover()">zzz</li>
</ul>
</div>
</div>
Found the getPos function from here: Get the position of a div/span tag

So, I really don't understand what exactly you are trying to do but by definition the offsetTop property of an element will return the top position (in pixels) relative to the top of the offsetParent element.
So no matter how long you scroll, if the top distance between the element you are inspecting and it's parent does't change, your top value will not change.
Maybe the property you are looking for is scrollTop;
const getPos = (el) => {
for (var lx=0, ly=0;
el != null;
lx += el.offsetLeft, ly += el.scrollTop, el = el.offsetParent);
return { x:lx, y:ly };
}

Try the code blow.
Scroll and then hover on one of the divs, you can see the y-coordinate is getting updated.
const tickersCol = document.getElementById("tickers-col");
const getPos = (el) => {
for (var lx=0, ly=0;
el != null;
lx += el.offsetLeft, ly += el.scrollTop, el = el.offsetParent);
return { x:lx, y:ly };
}
function mouseHover() {
const colPos = getPos(tickersCol);
console.log('colPos', colPos)
}
.container {
position: fixed;
font-family: Arial;
}
#tickers-col {
overflow-y: auto;
height: 400px;
}
li {
margin-bottom: 10px;
list-style: none;
padding: 5px 10px;
width: 120px;
color: white;
background: salmon;
border-radius: 4px;
cursor: pointer;
}
<div class="container">
<div id="tickers-col">
<ul>
<li onmouseenter="mouseHover()">aaa</li>
<li onmouseenter="mouseHover()">bbb</li>
<li onmouseenter="mouseHover()">ccc</li>
<li onmouseenter="mouseHover()">ddd</li>
<li onmouseenter="mouseHover()">eee</li>
<li onmouseenter="mouseHover()">fff</li>
<li onmouseenter="mouseHover()">ggg</li>
<li onmouseenter="mouseHover()">hhh</li>
<li onmouseenter="mouseHover()">iii</li>
<li onmouseenter="mouseHover()">jjj</li>
<li onmouseenter="mouseHover()">kkk</li>
<li onmouseenter="mouseHover()">lll</li>
<li onmouseenter="mouseHover()">mmm</li>
<li onmouseenter="mouseHover()">nnn</li>
</ul>
</div>
</div>
Let me know if this is what you wanted.

After you scroll the #tickers-col how do you get the correct updated top position of the div?
div itself isn't moving when scrolling, instead only its direct children are moving.
So top position is : #ticker-col's offsetTop - ul's scrollTop , and your js code should look like this:
(function(){
var tc = document.querySelector("#tickers-col");
tc.addEventListener("scroll",function(){
console.log("colPos:", { x : tc.parentNode.offsetLeft,
y : tc.parentNode.offsetTop - tc.scrollTop,
});
});
})();
.container {
position: fixed;
font-family: Arial;
}
#tickers-col {
overflow-y: auto;
height: 400px;
}
li {
margin-bottom: 10px;
list-style: none;
padding: 5px 10px;
width: 120px;
color: white;
background: salmon;
border-radius: 4px;
cursor: pointer;
}
<div class="container">
<div id="tickers-col">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
<li>iii</li>
<li>jjj</li>
<li>kkk</li>
<li>lll</li>
<li>mmm</li>
<li>nnn</li>
<li>ooo</li>
<li>ppp</li>
<li>qqq</li>
<li>rrr</li>
<li>sss</li>
<li>ttt</li>
<li>uuu</li>
<li>vvv</li>
<li>www</li>
<li>yyy</li>
<li>xxx</li>
<li>zzz</li>
</ul>
</div>
</div>
P.S.
onmouseenter="mouseHover()"
this thing looks ugly, if you need to set the same function for some number of elements > 2 as event listener the better approach would be like so
var collection =
Array.prototype.slice.call(
document.querySelectorAll('mycssselector')
).forEach(function(el){
el.addEventListener("myevent",/*callback*/function(){});
});

Detect data change from different DOM element

TL;DR: Detect item change from the actual <ul> list and persist the data
Howdy everyone?
I'm currently doing a Trello-like based web-application using PHP as a backend and jQueryUI as a front-end.
The front-end part is made using sortable(), by defining three UL elements. One is a container / wrapper with the id Nav and the other two are actual boards that hold the items.
Case scenarios are simple:
You can reorder boards
You can move order of items inside the single board
You can move item from one board to another
The included code supports all three of them but the data should persist to the back-end powered database (I'm currently on SQLite since the project is in early phase).
Problem
The method setSortAction currently detects all three use case but once you move the item from one board to another the order of the list can't be properly detected (since they are in incremented value).
Getting the bodyContent like this: action=updateMenuItemListings&record=2&record=1&record=3
by moving the second item to the first place in the board is fine, and I can persist that change through the POST request on back-end and then onto the database.
What happens when you move the first item from the second board on the first board? You'd get value of bodyContent similar to this:
action=updateMenuItemListings&record=1&record=2&record=1&record=3
As you can see the record with value 1 duplicates.
That means I can't detect the item moved is from the second board and I have duplicate items in the order of the board.
How would you go about designing this? Can it be done by the given code or have I totally missed the logic that one should apply in this scenario?
Thank you.
$(function() {
var debugMode = true;
$("ul.droptrue").sortable({
connectWith: "ul"
});
//Set common sort settings for all lists
$(".sortable").sortable({
opacity: 0.6,
cursor: 'move'
});
//Function used to configure update calls for each sort
function setSortAction(selector, updatePage, updateAction, itemLabel) {
$(selector).sortable({
update: function() {
var itemList = $(this).sortable(
"serialize", {
attribute: "id",
key: itemLabel
});
//Create POST request to persist the update
var bodyContent = "action=" + updateAction + "&" + itemList;
if (debugMode) {
alert("DEBUG: bodyContent = \n" + bodyContent);
}
//$.post(updatePage, bodyContent, function (postResult)
//{ alert(postResult); });
}
});
}
//Set sort update action for top level and second level
setSortAction(".navLevel1",
"reorder.php",
"updateMenuListings",
"record");
setSortAction(".navLevel2",
"reorder.php",
"updateMenuItemListings",
"record");
});
#import url( 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
#sortable_1,
#sortable_2,
#sortable_3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable_1 li,
#sortable_2 li,
#sortable_3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="Nav" class="sortable navLevel1">
<ul id="sortable_1" class="droptrue navLevel2">
<li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Classes</li>
<li id="item_1" class="ui-state-default">Some class</li>
<li id="item_2" class="ui-state-default">Another one!</li>
<li id="item_3" class="ui-state-default">Yep, thats enough</li>
</ul>
<ul id="sortable_2" class="droptrue navLevel2">
<li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Presentation</li>
<li id="item_1" class="ui-state-default">Tom</li>
<li id="item_2" class="ui-state-default">Jessica</li>
<li id="item_3" class="ui-state-default">Kevin</li>
</ul>
</ul>
<br style="clear:both">

Unlike classes HTML ID's should be unique, in this way you can identify which items are from which columns.
Knowing for example that column one has 4 slots and column two has 6 would mean that a request array of 7,3,9,3,2,5,6,1,4,8,10 gets split into 4 and 6 hence
Column one: 7, 3, 9, 10,
Column two: 2, 5, 6, 1, 4, 8
$(function() {
var debugMode = true;
$("ul.droptrue").sortable({
connectWith: "ul"
});
//Set common sort settings for all lists
$(".sortable").sortable({
opacity: 0.6,
cursor: 'move'
});
//Function used to configure update calls for each sort
function setSortAction(selector, updatePage, updateAction, itemLabel) {
$(selector).sortable({
update: function() {
var itemList = $(this).sortable(
"serialize", {
attribute: "id",
key: itemLabel
});
//Create POST request to persist the update
var bodyContent = "action=" + updateAction + "&" + itemList;
if (debugMode) {
$('#report').text("DEBUG: bodyContent = \n" + bodyContent);
}
//$.post(updatePage, bodyContent, function (postResult)
//{ alert(postResult); });
}
});
}
//Set sort update action for top level and second level
setSortAction(".navLevel1",
"reorder.php",
"updateMenuListings",
"record");
setSortAction(".navLevel2",
"reorder.php",
"updateMenuItemListings",
"record");
});
#import url( 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
#sortable_1,
#sortable_2,
#sortable_3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable_1 li,
#sortable_2 li,
#sortable_3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
table {
font-size: 1em;
}
.ui-draggable,
.ui-droppable {
background-position: top;
}
#report {
position: fixed;
font-size: 0.5em;
bottom: 2em;
left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="Nav" class="sortable navLevel1">
<ul id="sortable_1" class="droptrue navLevel2">
<li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Classes</li>
<li id="item_1" class="ui-state-default">Some class</li>
<li id="item_2" class="ui-state-default">Another one!</li>
<li id="item_3" class="ui-state-default">Yep, thats enough</li>
</ul>
<ul id="sortable_2" class="droptrue navLevel2">
<li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Presentation</li>
<li id="item_4" class="ui-state-default">Tom</li>
<li id="item_5" class="ui-state-default">Jessica</li>
<li id="item_6" class="ui-state-default">Kevin</li>
</ul>
</ul>
<div id="report"></div>
<br style="clear:both">

Accessible jQuery toggles odd behaviour

I'm setting up a reusable jQuery toggle function (for my employer) to enable show/hide of content (eg FAQs), to improve accessibility over existing inline onClick bindings.
In JSFiddle everything is fast and fluid, but when I transfer to the preview server an odd behaviour becomes apparent. Clicking the button works as normal, but on clicking the button's link text there's a noticeable delay before anything happens.
Is there anything within the script that might be causing the delay? Or anything which is an obvious candidate for conflicts of some kind?
Anyway, here's the code (based on Mike Raynham's accessible toggles):
http://jsfiddle.net/internet_man/9yKKM/2/
html:
<div class="buttons">
<ul>
<li><strong class="_toggle type noscript">This is the first toggle</strong>
<ul class="_toggle-this show-hide">
<li><strong>Option One</strong></li>
<li><strong>Option Two</strong></li>
<li><strong>Option Three</strong></li>
</ul>
</li>
<li class="bad-break"><strong class="_toggle type noscript">This is the second toggle (a bit longer than the first)</strong>
<ul class="_toggle-this show-hide">
<li><strong>Option One</strong></li>
<li><strong>Option Two</strong></li>
</ul>
</li>
<li class="bad-break"><strong class="_toggle type noscript">This is the third toggle (also somewhat longer)</strong>
<ul class="_toggle-this show-hide">
<li><strong>Option One</strong></li>
<li><strong>Option Two</strong></li>
</ul>
</li>
</ul>
</div>
Script:
var create_name = function(text) {
var name = text.toLowerCase();
name = name.replace(/^\s+|\s+jQuery|[^a-z0-9&\s-]/g, '');
name = name.replace(/&/g, 'and');
name = name.replace(/\s/g, '-');
name = name.replace(/(-)+\1/g, "jQuery1");
return name;
};
var add_link = function() {
var name = create_name(jQuery(this).text());
jQuery(this).next('.toggle-this').attr('name', name);
jQuery(this).html('' + jQuery(this).html() + '');
};
var toggle = function(event) {
event.preventDefault();
jQuery(this).toggleClass('expanded').nextAll('.toggle-this').slideToggle(100);
jQuery('.toggle-this').not(jQuery(this).siblings()).slideUp(100);
jQuery('.toggle').not(jQuery(this)).removeClass('expanded');
};
var remove_focus = function() {
jQuery(this).blur();
};
jQuery(function (){
jQuery('._toggle').removeClass('_toggle, noscript').addClass('toggle');
jQuery('._toggle-this').removeClass('_toggle-this').addClass('toggle-this');
jQuery('._expanded').removeClass('_expanded').addClass('expanded');
jQuery('.toggle:not(.expanded)').nextAll('.toggle-this').hide();
jQuery('.toggle').each(add_link);
jQuery('.toggle').click(toggle);
jQuery('.toggle a').mouseup(remove_focus);
});
CSS:
body
{
font-size:62.5%;
color:#666;
font-family:arial,Helvetica,sans-serif;
}
a
{
color:#462170;
}
ul
{
list-style-type:none;
margin-left:0;
padding-left:0;
}
strong
{
font-weight:normal;
}
div.buttons
{
width:462px;
line-height:2.2em;
margin:1.5em 0;
}
.buttons li > strong
{
font-size:1.9em;
}
.toggle, .buttons .type.noscript
{
display:block;
font-size:1.9em;
height:65px;
background:url(http://oi48.tinypic.com/dy6xf.jpg) 0 -85px no-repeat;
padding:20px 0 0 90px;
text-decoration:none;
color:#462170;
cursor:pointer;
cursor:hand;
}
.toggle a
{
text-decoration:none;
}
.toggle strong
{
display:block;
height:65px;
border:1px dotted red;
}
.toggle:hover, .toggle:focus
{
background-position:0 0;
}
.buttons .show-hide
{
border-bottom:6px solid white;
}
.buttons .show-hide li
{
margin-left:12px;
border-bottom: 2px solid white;
border-top:2px solid white;
font-size:1em;
}
.buttons .show-hide a
{
display:block;
height:15px;
text-decoration:none;
color:#462170;
background:#f1f1f1 url(http://oi46.tinypic.com/6iedtw.jpg) 5px 14px no-repeat;
padding:12px 0 15px 58px;
}
.buttons .show-hide a:hover, .connection-buttons .show-hide a:focus
{
text-decoration:underline;
color:black;
background-color:#ece8f0;
background-position:5px -41px;
}
li.bad-break a
{
padding-right:30%;
}
Notes:
Scripts on -- ._toggle becomes .toggle, ._toggle-this becomes .toggle-this, .noscript is removed and a link is inserted around (in this case) the strong element of class toggle, pointing to the next '.toggle-this' element.
Scripts off -- No toggle created but it's styled as though the accordions are expanded.

I want to show list items as 2 or more columns (dynamic alignment)

I am able to do the list using float:left; like this
But I would like to show it like this (as 2 or more columns)
How can I do that?
#sandeep gave good solution. Unfortunately does not work in IE(need ie7 and above).
any help?

For this, you can use the column-count property:
div#multicolumn1 {
-moz-column-count: 2;
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 3;
column-gap: 50%;
}
Check this jsFiddle.
Note: It does not work in IE.
For IE, you can use this JavaScript: CSS3 - Multi Column Layout Demonstration

This works just fine cross-browser, no JS required. You just limit the width of your columns.
<style>
ul.col {width:60px;float:left;margin:0 5px 0 0;padding:0;}
ul.col li {width:50px;background:#999;list-style-type:none;margin:0 0 5px 0;padding:5px;}
</style>
<ul class="col">
<li>1(li)</li>
<li>2(li)</li>
<li>3(li)</li>
<li>4(li)</li>
<li>5(li)</li>
</ul>
<ul class="col">
<li>6(li)</li>
<li>7(li)</li>
<li>8(li)</li>
<li>9(li)</li>
<li>10(li)</li>
</ul>
If you are stuck with them all in one UL on page load, you can split them out with jQuery to create the same results:
<script>
$(function(){ //on document ready
var perCol = 5;
var $ul = $('ul.col');
var rows = Math.ceil($ul.find('li').length/perCol);
for(var i=1;i<=rows;i++){
$ul.after('<ul class="col"></ul>');
}
for(var i=1;i<=rows;i++){
$ul.find('li:lt('+(perCol)+')').appendTo('ul.col:eq('+(i)+')');
}
$ul.remove();
});
</script>

As long as your list items are a fixed width, like in your examples, couldn't you just do something like in this fiddle? http://jsfiddle.net/swNYE/1/
And wherever your list gets spit out, simply apply the "left" class to the first half, and the "right" class to the second half. If you're dynamically adding content through Javascript, then you'd simply run through the li's each time something is added, and apply the new correct class.
HTML:
<ul>
<li class="left">1</li>
<li class="left">2</li>
<li class="left">3</li>
<li class="left">4</li>
<li class="right">5</li>
<li class="right">6</li>
<li class="right">7</li>
<li class="right">8</li>
</ul>
CSS:
li {
width: 100px;
}
li.left {
float: left;
clear: left;
}
li.right {
margin-left: 100px;
}

Below is a columnizer, takes as argument the number of columns.
Call: $(elem).columnize(3)
http://jsfiddle.net/Bdsj9/28/
Tested in IE6 from wine in Ubuntu 10.04: works (looks better if you increase the width in the stylesheet I borrowed from #micha -- thanks, btw)
(function($) {
$.fn.decolumnize = function() {
this.children().map(function(index, el) {
var oldPos = null;
var posClass = null;
if($(el).attr("class") && (posClass = $(el).attr("class").match(/orig\-readorder\-[0-9]+/))) {
oldPos = parseInt(posClass[0].replace("orig-readorder-", ""));
$(el).removeClass(posClass[0]);
}
return {
elm: el,
pos: oldPos ? oldPos : index
}
}).sort(function(a,b) {
return a.pos > b.pos ? 1 : -1;
}).map(function(index, ob) {
return ob.elm;
}).appendTo(this);
return this.children().css("float", "left").css("clear", "none");
};
$.fn.columnize = function(numcols) {
var numItems = this.children().length;
var divisor = Math.ceil(numItems / numcols);
var indexOfFinal = null;
this.decolumnize();
var resorted = this.children().map(function(index, el) {
return {
position: (index % divisor) + (index / numItems),
elm: el,
isFinal: index == numItems - 1,
origPos: index
};
}).sort(function(a, b) {
return a.position > b.position ? 1 : -1;
});
return resorted.map(function(index, ob) {
if (indexOfFinal) {
/** TODO: fix redundancy **/
if ((index - indexOfFinal - 1) % (numcols - 1) == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
} else {
/** TODO: fix redundancy **/
if (index % numcols == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
}
if (ob.isFinal) indexOfFinal = index;
$(ob.elm).addClass("orig-readorder-" + ob.origPos);
return ob.elm;
}).appendTo(this);
};
})(jQuery);
What it does is first calculate the sortorder, because with just styling this will not work. To calculate the sortorder you need to know the number of columns up front. This you can use as a divisor to introduce a 'clear: left'.
Also, using the number of list items and the number of columns you need to estimate a number of rows. This can be used as a divisor to sort the items based on the remainer between their index and the number of rows.
To granulate the sortation, the original index is also taken into account...
After the last orginal item has been placed, the number of columns needs to be reduced by 1. That's why I store the isFinal-boolean. I'm sure this could be done more elegantly with some smart computation, though.
Then introduce the 'clear: left's at the right place and store the original position in a class so you can resort in a later stage (for instance when inserting or removing a list item dynamically)
Best!

I found a way to do this in IE too. (using clear)
html:
<div class="left child">1</div>
<div class="child">5</div>
<div class="left child">2</div>
<div class="child">6</div>
<div class="left child">3</div>
<div class="child">7</div>
<div class="left child">4</div>
<div class="child">8</div>
css:
.child {
height:20px;
width: 20px;
text-align: center;
border: 1px solid #CCC;
background-color: #EEE;
color: #000;
padding: 5px;
float: left;
margin: 5px;
}
.left {
clear: left;
}
See http://jsfiddle.net/pMbtk/31/

SEE MY NEW ANSWER--MUCH BETTER THAN THIS
If you are dealing with fixed width items, then this pure css solution that works in IE7+. The example is http://jsfiddle.net/VVMnq/33/. This would require you to know some things about the html you are working with (where the new column is to start). Here is column 2 longer, just to see how it handles it: http://jsfiddle.net/VVMnq/42/
HTML
<ul class="TwoColumn">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="column2">6</li>
<li class="column2">7</li>
<li class="column2">8</li>
<li class="column2">9</li>
<li class="column2">10</li>
</ul>
CSS
.TwoColumn {
width: 20px;
padding-left: 22px; /* width plus borders of li's */
}
.TwoColumn li {
display: block;
width: 100%;
padding: 0;
margin: 0 -22px 0 -22px; /* width of ul plus borders on li's */
float: left;
clear: left;
border: 1px solid blue;
}
.TwoColumn .column2 {
float: none; /* this could be set to float: left and it seemed to work also */
clear: none;
margin: 0 -11px 0 0; /* this should be half of margins for column 1 li's */
}

The CSS:
ul.parent li {
float: left;
}
Using jquery:
$('.parent>li:odd').css("clear", "both");
<ul class="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Please take a look at http://api.jquery.com/even-selector/ and http://api.jquery.com/odd-selector/

NEW ANSWER that is totally different from the first. This assumes the height is always 5 high (which from comments on jblasco's solution made by anglimas, that is the requirement). The solution here is pure css (though if the number of elements is unknown, then some javascript would be required to "count" and set a class called first to indicate which element is in the first row).
The solution works in IE7+, and will accommodate any number of columns.
See http://jsfiddle.net/VVMnq/107/.
HTML
<ul class="MultiColumn">
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="first">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
CSS
.MultiColumn {
overflow: auto;
background-color: yellow;
padding:0 10px 10px 0;
float: left;
}
.MultiColumn li {
display: block;
width: 20px;
height: 20px;
padding: 0;
margin: 10px 0px 10px 10px ;
background-color: cyan;
float: left;
}
.MultiColumn li.first {
top: 0px;
}
.MultiColumn li.first + li {
margin: 40px 0 0 -20px;
}
.MultiColumn li.first + li + li {
margin: 70px 0 0 -20px;
}
.MultiColumn li.first + li + li + li {
margin: 100px 0 0 -20px;
}
.MultiColumn li.first + li + li + li + li {
margin: 130px 0 0 -20px;
}

http://jsfiddle.net/rlemon/Y5ZvA/3/
​
you can try this.. I haven't tested it with ie yet.
ul {
width:60px; height: 60px;
}
ul li{
float:left;
width:20px;
list-style:none;
}
ul, ul li {
-moz-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-3.061616997868383e-16,
M12=1,
M21=1,
M22=3.061616997868383e-16,
SizingMethod='auto expand');
}
​