StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>you don't need so much code : just make one displayResult function that will call itself over and over :</p> <pre><code>var scrollParam = { scrollPos : 0, // current pos scrollIncr : 370, // incr in px each call loopScrollAfter : 700 // set scrollPos to >0 if above that number delay : 3000, // std scroll delay whichIsOnTop : 0, // index of the topmost item (button) pauseDelay : 1000, // added delay if someone clicks pauseRequired : 0 }; // current required click delay var mainItem = document.getElementById("adimg_holder"); function displayResult() { mainItem.style.bottom=scrollParam.scrollPos +"px"; scrollParam.scrollPos += scrollParam.scrollIncr; if (scrollParam.scrollPos>scrollParam.loopScrollAfter) scrollParam.scrollPos=0; setBackgroundPosition("button1",0); setBackgroundPosition("button2",1); setBackgroundPosition("button3",2); scrollParam.whichIsOnTop = (scrollParam.whichIsOnTop + 1) % 3; // now setup the next call, taking into account if a pause is required var requiredDelay = scrollParam.delay; if (scrollParam.pauseRequired >0) { requiredDelay += scrollParam.pauseRequired; scrollParam.pauseRequired=0; } setTimeout(displayResult, requiredDelay); } var setBackgroundPosition(itemName, index ) { document.getElementById(itemName).style.backgroundPosition=topOrBottom(index ); }; // returns "top" for the right index (==scrollParam.whichIsOnTop) and "bottom" for the others var topOrBottom(thisIndex) { return (thisIndex == scrollParam.whichIsOnTop) ? "top" : "bottom"; }; // in the button click handler you should use : scrollParam.pauseRequired += scrollParam.pauseDelay; // to launch the scroll, just call : displayResult(); // in the loaded() event handler for example. </code></pre> <p>Rq : you can change easily the parameters to have a smoother scrolling if you like.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload