14

I have been working on two column website, whereby when you scroll: column A goes up and column B goes down. I implemented an infinite scroll but what I am wondering is: is it possible to clone/append one column onto the other e.g. at a certain length of scrolling:

Once scrolled out of view:

  • Column A boxes will move onto the end of column B
  • Column B boxes will move onto the end of column A

Technically still infinite but looping the boxes from column to column - spilling one into the other and back again.

Is this approach bad, or, is it better to just use endless scroll on each column? What is tripping me up, as I am new to JS and jQuery, is the logic, and what is the best approach to achieve this.

movement of columns example

*Image just for example, the amount of boxes could be a lot higher e.g. 10 in each column.

My code so far: http://jsfiddle.net/djsbaker/vqUq7/1/

My current attempt at clone/append:

var ele = document.getElementById("box");
var arr = jQuery.makeArray(ele);
var data = (ele)[0];

$(window).scroll(function() {  
  if ( $(window).scrollTop() >= 1000) {
    $(data).clone().appendTo('body');
  } else {
    ..
  }
});
ssuperczynski
  • 2,473
  • 2
  • 37
  • 57
DBUK
  • 1,363
  • 1
  • 23
  • 41
  • I at least removed that messy jquery from your code.... http://jsfiddle.net/oceog/KPHgv/ – zb' Jan 24 '13 at 11:23
  • not really understand what you trying to do, If I scroll to the top of page, you want to append collumn A to the to of collumn B ? and if i scroll to the bottom ? – zb' Jan 24 '13 at 11:40
  • @eicto Sorry about that, I was having a nightmare getting the jQuery to work with Prototype :( – DBUK Jan 24 '13 at 11:58
  • The top of Left column moving over onto the bottom of the right column, and the top of the right column moving onto the bottom of the left column. So I guess the opposite, or it might be fine with one direction. I am unsure, the logic hurts my head. Also, the columns are reversed :S – DBUK Jan 24 '13 at 12:02
  • top of the right collumn ? – zb' Jan 24 '13 at 12:25
  • Ya, both at the same time I think, the logic hurts my head. So, the top of left and bottom of right swap over onto the next column, on a certain amount of scroll, then same again with the new top and bottom. – DBUK Jan 24 '13 at 13:18
  • http://jsfiddle.net/oceog/KPHgv/9/ want this when scrolling to bottom ? – zb' Jan 24 '13 at 13:21
  • I think so, it definitely moves across onto the next column, it seems to be repeating the div that moves across multiple times before it moves back into the first column: http://jsfiddle.net/xkcbu/ – DBUK Jan 24 '13 at 13:43
  • I not understand you, that correct or not ? – zb' Jan 24 '13 at 14:30
  • Definitely the right path, both are swapping to the other, but they seem to repeat the div in each column several times, if you change the first div in the first column to a different background color and watch the path it takes it seems to appear 3 times once swapped across. – DBUK Jan 24 '13 at 14:45
  • Ahh, I think the scrollTop each time one is removed/appended/cloned makes it jump to the top, so it will look like each box is repeated several times but in reality the page is jumping up each time :S – DBUK Jan 24 '13 at 15:48
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/23332/discussion-between-eicto-and-dbuk) – zb' Jan 24 '13 at 18:47
  • 1
    The [pater noster](http://www.youtube.com/watch?v=0siUw7UUycc) of scrolling! – tobiv Jan 28 '13 at 10:03
  • 1
    This is a very cool idea. I guess you just need to keep moving the columns once you hit either end of the scroll. It would be a bad idea to continuously append and extend the length, and unnecessary. – Cris Stringfellow Jan 28 '13 at 10:52
  • Ya, definitely don't want to extend the length / create duplicate content. The ideal would be that while the user scrolls the columns spill into each other out of view. – DBUK Jan 28 '13 at 11:26
  • Why not a scrolling Orobus? A grid, if you will, where the content moves around like a chain; all parts changing places on scrolling. – PHearst Jan 28 '13 at 20:31
  • That sounds cool, probs a question in its own right. – DBUK Jan 28 '13 at 21:46

1 Answers1

7

Infinite scrolling. Done : the Fiddle http://jsfiddle.net/PgMUP/14/

You had set everything up.

The code (neatened up a little) :

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);
var ul = '#up-left'; 
var dr = '#down-right'; 
function crisscross() {
    $(ul).css('bottom', '-' + window.scrollY + 'px');
    $(dr).css('bottom', '-' + window.scrollY + 'px');
    var ulc = $(ul).children();
    var drc = $(dr).children();
    var corners = [ulc.first(),ulc.last(),drc.last(),drc.first()];
    if (window.scrollY > half_way ) {
        $(window).scrollTop(half_way - child_height);
        corners[2].appendTo(ul);    
        corners[0].prependTo(dr);
    } else if (window.scrollY < half_way - child_height) {
        $(window).scrollTop(half_way);
        corners[1].appendTo(dr);
        corners[3].prependTo(ul);
    }
}
$(window).scroll(crisscross);

It works as your diagram suggests. The flicker is caused because browser reflow is triggered. A better method, instead of detaching and then inserting the divs, I believe would be simply to swap the attributes between two divs. Say whatever you have in there, the images, the text, the colors, the css classes, just swap that across with a big all purpose swap function. Then, since the containers themselves will remain fixed.

I adding containing divs and swapping the inner div out, so the size structure of the columns was preserved, but this did not work.

Cris Stringfellow
  • 3,582
  • 23
  • 44
  • You're assuming that the height and number of boxes doesn't change (OP: “The amount of boxes could be a lot higher e.g. 10 in each column”). – PHearst Jan 28 '13 at 13:34
  • Not really. They can change fine. You just need to update the difference between 1500 and 1000 to be the height of the boxes. I'll put that in, thanks. – Cris Stringfellow Jan 28 '13 at 13:35
  • Uhmmm.. im missing that box one is being transfered to the right... all im seeing is the greenbox, but the question is to move it to the right so red should show up at the right one aswell – Ladineko Jan 28 '13 at 14:06
  • Thanks for this. Currently playing around in the fiddle. How evil would it be if it went both directions? – DBUK Jan 28 '13 at 15:08
  • @DBUK I agree. I made it that way. How I roll. – Cris Stringfellow Jan 28 '13 at 16:26
  • haha, awesome. Sorry, I think I am a fiddle behind (which is a bit of a dodgy sentence...) – DBUK Jan 28 '13 at 16:29
  • Yes it is twitchy. I'm up to 4 now, still no joy with the twitch. – Cris Stringfellow Jan 28 '13 at 16:40
  • Could it be to do with both columns being at different levels to each other? Am playing with a div with no height which expands on the swap but it aint working too great. – DBUK Jan 28 '13 at 16:52
  • You could be right. Perhaps you could make getting rid of the twitching a later challenge? I think you would get some answers for it if you showed the fiddle and asked it as a question. – Cris Stringfellow Jan 28 '13 at 17:26
  • Sounds like a good plan. I think you have nailed the column spill, mucho thanks. – DBUK Jan 29 '13 at 09:28
  • This is a winner for me, I will just wait to see if Lim H (the bounty person) is happy, as its his 100 rep. – DBUK Jan 29 '13 at 09:49
  • I'm still learning JavaScript and I find the effect really cool and the code is elegant :D It's useful too. Not just the code but the approach as well. Up,down,left,right works great but is there a way to shorten the code with mod 4? It'd be beneficial if someone wants to port this type of effect to three.js... – Lim H. Jan 29 '13 at 13:14
  • Well, the effect was your idea. I think we all find it a pretty cool idea. You had everything set up, I just added 2 or 3 lines. That's it. I will see if I can shorten the code. – Cris Stringfellow Jan 29 '13 at 13:23
  • It wasn't my idea. I didn't even set anything up. But I'm actually having a use case for it atm. Not too urgent, but it can definitely improve the feel of one of my projects. – Lim H. Jan 29 '13 at 14:25
  • I think its turned out great, thanks again cris. I learnt a lot from it. Going to play around with the flicker, might open a question for it like you recommended. – DBUK Jan 29 '13 at 14:37