Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>CSS Animation provides a much more versatile solution for this problem. Works in all major browsers( with some caveats...)</p> <p>here's and example, based on what I think you are trying to achieve...</p> <p><a href="http://jsfiddle.net/adrianjmartin/xLpft/" rel="nofollow">http://jsfiddle.net/adrianjmartin/xLpft/</a></p> <pre><code>&lt;style&gt; .redacted { background-color:black; color:black; } @keyframes unredact{ to{ background-color:white; } } @-webkit-keyframes unredact{ to{ background-color:white; } } &lt;/style&gt; &lt;script&gt; window.addEventListener( "load" , function(){ var p = document.querySelectorAll("P"); for( var ii = 0 ; ii &lt; p.length ; ii++ ){ var t = p[ii].textContent; var a = t.split( ' ' ); var h = ""; for( var i = 0 ; i &lt; a.length ; i++ ){ h += "&lt;span class='redacted'&gt;"+a[i]+" &lt;/span&gt;"; } p[ii].innerHTML = h ; } }); window.addEventListener( "click" , function(){ var spans = document.querySelectorAll( "P span.redacted"); for( var i = 0; i &lt; spans.length ; i++ ){ var delay = Math.random(3); var delay = Math.random(3); var style = "-webkit-animation: unredact forwards 3s " + delay + "s;"; style += "animation: unredact forwards 3s " + delay + "s"; } }); &lt;/script&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis fringilla nisi. Curabitur vitae mi ultrices nunc sodales sodales at eget est. Aenean placerat eleifend lorem sed congue. Vivamus rutrum mi tempus leo interdum, vel volutpat velit consequat. Pellentesque eu sem metus. Nullam quis mauris ultrices augue blandit consequat. Vestibulum sollicitudin odio sed lobortis lacinia. Vivamus semper est et sapien ultrices, non vestibulum sapien tincidunt. Vivamus nunc neque, tincidunt ut arcu quis, bibendum hendrerit odio. Suspendisse id molestie ligula. Nulla dapibus venenatis tellus, egestas imperdiet velit pretium pellentesque. Mauris risus nibh, feugiat et magna sit amet, malesuada sagittis tellus. Curabitur porta, turpis ac tincidunt pharetra, augue est sodales ipsum, vitae pharetra eros nisl nec ante. Duis mattis volutpat est, in hendrerit urna mattis sed.&lt;p&gt; &lt;p&gt;In bibendum nisl sit amet libero tempus ullamcorper. Vivamus a augue scelerisque, fermentum lorem et, vehicula justo. Praesent aliquet venenatis libero eget bibendum. Nam imperdiet fermentum libero et sagittis. Fusce varius posuere arcu, convallis varius ante aliquam ac. Proin eu nisi commodo, interdum erat vitae, iaculis massa. Fusce quis elit ac lacus viverra adipiscing. In hac habitasse platea dictumst. Sed sodales mauris non condimentum ultricies. Maecenas at venenatis arcu. Vestibulum scelerisque lacinia libero, eu tincidunt diam egestas eu. Suspendisse eu eros nulla. Ut dignissim nisl sed turpis tristique aliquam. &lt;/p&gt; </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