StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is how you can achieve this behavior: <a href="http://jsfiddle.net/PcZsT/12/" rel="nofollow">http://jsfiddle.net/PcZsT/12/</a></p> <p>Here is the JavaScript:</p> <pre><code>function timedText() { setTimeout(function() { displayResult(); },2000); setTimeout(function() { displayResult1(); },6000); setTimeout(function() { displayResult2(); },14000); setTimeout(function() { timedText(); },15000); } (function change() { setTimeout(function() { timedText(); },1000); }()); var locked = false; function button1Handler() { moveTop(); lockFor(3); } function button2Handler() { moveBottom(); lockFor(3); } function lockFor(seconds) { locked = true; setTimeout(function () { locked = false; }, seconds * 1000); } function displayResult() { if (locked) return; moveTop(); } function moveTop() { document.getElementById("adimg_holder").style.bottom="0px"; document.getElementById("button1").style.backgroundPosition="bottom"; document.getElementById("button2").style.backgroundPosition="top"; document.getElementById("button3").style.backgroundPosition="top"; } function displayResult1() { if (locked) return; moveMiddle(); } function moveMiddle() { document.getElementById("adimg_holder").style.bottom="370px"; document.getElementById("button1").style.backgroundPosition="top"; document.getElementById("button2").style.backgroundPosition="bottom"; document.getElementById("button3").style.backgroundPosition="top"; } function displayResult2() { if (locked) return; moveBottom(); } function moveBottom() { document.getElementById("adimg_holder").style.bottom="739px"; document.getElementById("button1").style.backgroundPosition="top"; document.getElementById("button2").style.backgroundPosition="top"; document.getElementById("button3").style.backgroundPosition="bottom"; } </code></pre> <p>The functions above are the click handlers of respectively <code>button1</code> and <code>button2</code>.</p> <p>I've also changed the <code>change</code> function to бe IIFE (Immediately Invoked Function Expression) but it's not necessary, you don't have to do it because you want to be invoked <code>onload</code>.</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