Put Div into another if page view ends

Question

Hey guys,

So what I want is to have some tables like this

<ul>
<li>Some Text, Links whatever</li>
</ul>

ordered by the page view. So if the page ends (on the bottom) in the view I wanna have a new table on the right of the first like this:

<div class="left_1 table">
    <ul>
    <li>First Some Text, Links whatever</li>
    </ul>
</div>
<div class="left_2 table">
    <ul>
    <li>Second Some Text, Links whatever</li>
    </ul>
</div>

The CSS I think will be like this:

.table {
     float:left;
}

and so on. The full process I wanna realise with Jquery. I try it so say it in my syntax:

$('li').each(function () {
      if($this.isOutofBottomView) {
            $this.putIn.next('li');
      } else {
            // do nothing
      }
});

Thanks, I hope you know what I'm asking for :)

Answer 1

I think I sort of understand. It doesn't help that you're using unordered lists and calling them tables though, or your seemingly inconsistent use of "page views".

It sounds like instead of wanting to list things vertically, you're trying to list them vertically to the bottom of the viewport (the current viewable area without the need for a scrollbar) and then place each subsequent series of links on the right side of the last. Is this correct?

Answer 2

This will answer a lot of your questions about horizontal scrolling websites utilizing jQuery as well as some alternatives in the comments.

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/