infinite scroll
infinite scroll: if you scroll to the end of the page the script cuts of the first part and appends it at the end. if you scroll to the first page it cuts off the last part and prepends it.
by s_light
HTML
<div class="outer-page">
<div class="controllbutton" onClick="">
A Button
</div>
<div class="wrapper">
<div class="page" >
<div class="colorband left pink" ></div>
<div class="colorband right aqua" ></div>
some text on page 1
</div>
<div class="page" >
<div class="colorband left aqua" ></div>
<div class="colorband right pink" ></div>
das ist seite 2
</div>
<div class="page" >
<div class="colorband left pink" ></div>
<div class="colorband right aqua" ></div>
seite drei (3)
</div>
<div class="page" >
<div class="colorband left aqua" ></div>
<div class="colorband right pink" ></div>
und noch eine nummer 4
</div>
</div>
</div>CSS
@charset "utf-8";
/****************************************************************************************************
** **
** Cascading Style Sheet for Example side. **
** **
** Copyright (C) : 2012 Stefan Krueger **
** license : CC BY-SA 3.0 **
** http://creativecommons.org/licenses/by-sa/3.0/ **
** **
** **
****************************************************************************************************/
/*********************************************************/
/** Import Fonts **/
/*********************************************************/
@import url("../../font/Droid-Sans-fontfacekit/stylesheet.css");
@import url("../../font/overlock-fontfacekit/stylesheet.css");
/*
Now this fonts are available:
DroidSansRegular
DroidSansBold
OverlockRegular
OverlockItalic
OverlockBold
OverlockBoldItalic
OverlockBlack
OverlockBlackItalic
OverlockSCRegular
*/
/*********************************************************/
/** Main Document styling **/
/*********************************************************/
html, body
{
margin : 0 auto;
padding : 0;
height : auto;
width : 100%;
}
body
{
margin : 1em auto;
padding : 0;
font-family : DroidSansRegular, sans-serif;
font-size : 20px;
line-height : 130%;
text-align :...JavaScript
/**************************************************************************************************
** **
** javascript file for scroll experiment **
** **
** written by stefan krueger alias s-light, [email protected] http://s-light.eu **
** license : CC BY-SA 3.0 **
** http://creativecommons.org/licenses/by-sa/3.0/ **
** **
** **
** **
**************************************************************************************************/
function move2end() {
console.groupCollapsed("move first thing to end");
var scroll_position = $(document).scrollTop();
console.log("get window scroll position", scroll_position);
var height_orig = $(document).height();
console.log("get document height: ", height_orig);
var divPage = $('.wrapper>:first-child').detach()
console.log("detach first page", divPage);
var height_new = $(document).height();
console.log("get new document height: ", height_new);
var height_delta = height_orig - height_new;
console.log("calc height delta: ", height_delta);
var scroll_position_new = scroll_position - height_delta;
console.log("calc new scroll position: ", scroll_position_new);
console.log("set new scroll position: ", $(document).scrollTop(scroll_position_new));
var result = $('.wrapper').append(divPage)
console.log("append div to end", result...