StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've devised one way of doing it - the code could probably be tidied up and shrunk, but it works.</p> <p>The idea is you have two nested span tags - one for the styled text which has already been highlighted, and another to hold only the next word in the sequence for jQuery event binding.</p> <p>Put whatever string you want in the _string variable and away you go.</p> <pre><code><style type="text/css"> html { font-size: 20pt; } .red { color: red; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script language="javascript" type="text/javascript"> var _highlightIndex = 0; var _string = "Here is some test text to highlight"; $(document).ready(function() { RenderSpan(); }); function BindEvents() { $("#outer .nextword").mouseover(function() { RenderSpan(); }); } function RenderSpan() { var array = _string.split(" "); // Use an array to store text to save repeated string concatenation var html = []; var i = 0; html[i++] = "<span class=\"red\">" // Add all elements that have already been turned red for (var j = 0; j < _highlightIndex; j++) { html[i++] = array[j]; html[i++] = " "; } // Close the red span html[i++] = "</span>"; // Add the next word in the sequence to its own span for the event to bind to html[i++] = "<span class=\"nextword\">"; html[i++] = array[_highlightIndex]; html[i++] = "</span>"; html[i++] = " "; // Now add the remaining words with no span around them for (var k = _highlightIndex + 1; k < array.length; k++) { html[i++] = array[k]; html[i++] = " "; } // Replace the html in the outer div $("#outer").html(html.join("")); // Increment the highlight index _highlightIndex++; // move this to the top of the function if you want to start with one red word // Re-bind the jQuery mouseover BindEvents(); } </script> <div id="outer"></div> </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