Issue
I'm creating an html page and want to switch to scrolling and floating of the page. So within the body or a div I want a list of items. Every item should go under the previous unless the end of the div is touched, then it should go on the higher part and so on. So if there is to many to display it should give a horizontal sroll bar. Basically if you turn the screen 90 degrees you get what i want.
Schematically the items should go like this:
1 4 7 10
2 5 8 11
3 6 9 12
I've really no clue where I should start with this one. I don't know how to call this so searching for it is difficult.
I think I need to split up my problem in 2
- ordering the items so they go in the flow like in the scheme.
- scrolling horizontally.
Some direction in what css to use would be much appreciated.
Solution
Must say, quite proud of this one
Example 1: http://jsfiddle.net/SinisterSystems/LZqxm/4/ (100 items, small box)
Example 2: http://jsfiddle.net/SinisterSystems/LZqxm/5/ (1000 items, large box)
All dynamically arranged, so any width/height
div
will work. Also, only limit on data would be around 78,400,000 items. (Which HTML would die from anyway).
HTML:
<div id="ourWrap">
<div id="expander">
<ul id="data">
<li>1</li>
<li>2</li>
...
<li>14</li>
<li>15</li>
</ul>
</div>
</div>
CSS:
#ourWrap {
height:100px;
width:200px;
border:1px solid #000;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
}
ul {
display:table-cell;
}
li {
list-style:none;
}
jQuery:
$(function() {
var dataRemap = [];
var $cHeight = $('#data li:first-child').height();
var $wHeight = $('#ourWrap').height();
var colHeight = $wHeight/$cHeight;
$( "li" ).each(function( index ) {
dataRemap.push($(this).text());
});
$('#data').remove();
var ul;
$.each(dataRemap, function (index, value) {
if(index % colHeight === 0) {
$('#expander').append(ul);
ul = $('<ul>');
}
var li = $('<li>').append(value);
ul.append(li);
});
$('#expander').append(ul);
});
Example 1: http://jsfiddle.net/SinisterSystems/LZqxm/4/
Example 2: http://jsfiddle.net/SinisterSystems/LZqxm/5/
So, what exactly is going on?
Took your single list of data, and backtracked into an array so JS can manipulate it easier.
Then I emptied the existing items in the ul
.
Based on an index
value of our array
, and comparing the height of the div
to the height
of a li
item, found out the total items that will fit into the div
based on it's current height
.
Then we used a quick script to append a new ul
to the container for every modulus
it encountered based on that equation.
I told you this is not typically easy lol
Answered By - Nicholas Hazel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.