StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Without writing the code for you, i've put together a brief text switching example for you. I've used <code>.slideUp()</code> to provide animation though you may want to use <code>.animate()</code> if you want finer control and make it more odometre'ish. I hope this gives you some idea on how you can achieve this.</p> <p><a href="http://jsfiddle.net/9fRcX/5/" rel="nofollow">jSFiddle Example</a></p> <p>Rough HTML</p> <pre><code><div class="widget-container"> <p>Lorem</p> <div class="widget-vert-rotate">  </div> <p>dolor sit amet.</p> </div> </code></pre> <p>CSS</p> <p>Put them all in line. Vertical align top is to make sure that the animation will always put the next word inline with the sentance. Some right padding as well to emulate word spacing. Finally set a height for the rotator container and set its overflow to hidden.</p> <pre><code>.widget-container > * { display: inline-block; vertical-align: top; padding-right: 0.4em; } .widget-vert-rotate { overflow: hidden; height: 1.1em; } </code></pre> <p>And the JS + jQuery</p> <pre><code>var words = ['ipsum','nunc','telum'], i = 0, l = words.length, el = $('.widget-vert-rotate'), t = 3000; // Create the text elements for ( ; i < l ; i++ ) { $('<p />').text(words[i]).appendTo(el); } // Set the interval function var itv = setInterval(function() { var child = el.children().first(); child.slideUp(1000, function() { child.remove(); el.append( $('<p />').text(child.text()) ); }); }, t); </code></pre>

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