• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

How to highlight scrolling text

I have the following code that scrolls some text across a textbox.
How can I highlight the current word in yellow
I can't even highlight a single char with something like this

 document.getElementById('scrolling_text_box').innerHTML = text_box += "<span class='highlight'>" + x + "</span>";

Any ideas?

Here's my code

 Scroller.prototype.scroll = function () {
        var text_scroll = this.scrollText;
        var text_box = document.getElementById('scrolling_text_box').innerHTML;
        var length_scroll = text_scroll.length;
        var length_box = text_box.length;

        this.stopped = false;

        if (length_box > this.cut_text) {
            text_box = text_box.substring(1, text_box.length);

        // Letter
        var x = text_scroll.substring(this.characters, this.characters + 1);

        text_scroll = text_box + x;
          document.getElementById('scrolling_text_box').innerHTML = text_scroll;

          this.characters = this.characters + 1;

        var obj = this;
        this.timer = setTimeout(function () { obj.scroll(); }, this.speed);

        if (this.characters >= length_scroll) {
            this.stopped = true;

Open in new window

1 Solution
I may be mistaken but I was under the impression that you could not highlight a scrolling text bar. I believe the way arounds that would be to make a scrolling CSS class and place the HTML inside that DIV
Hi JElster,

Try this - I borrowed the scrolling bit from http://www.jonathan-petitcolas.com/2013/05/06/simulate-marquee-tag-in-css-and-javascript.html and added a simple javascript somewhat like yours. I added a text box and button to test:

This CSS is from my cited reference. I altered the sizes a bit, but it is essentially not changed:
<!doctype html>
<title>highlight scroll</title>
/* scroll CSS from http://www.jonathan-petitcolas.com/2013/05/06/simulate-marquee-tag-in-css-and-javascript.html */
@keyframes marquee {
    0%   { text-indent: 400px }
    100% { text-indent: -400px }

@-webkit-keyframes marquee {
    0%   { text-indent: 400px }
    100% { text-indent: -400px }

.marquee {
    overflow: hidden;
    white-space: nowrap;
    border:1px solid red;
    animation: marquee 17s linear infinite;
    -webkit-animation: marquee 17s linear infinite;

.marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;


Open in new window

I then added a simple javascript to highlight the supplied word:
function highlight(word)
    var text = document.getElementById("marquee").innerHTML;
    if(text.indexOf(word) != -1)
      text = text.split(word).join("<span style='background-color:lightgreen;'>"+word+"</span>");
      document.getElementById("marquee").innerHTML = text;

Open in new window

Finally, a simple HTML block and form field to test:
   <div class="marquee" id="marquee">Some text that will scroll, Some text that will scroll, fish</div>
    Type a word to highlight and press OK...
   <input type="text" id="word_to_highlight" name="word_to_highlight" value="" />
   <input type="button" onclick="highlight(document.getElementById('word_to_highlight').value)" value="OK"/>

Open in new window

Tested on Firefox 25 - OK, Chrome 30.0 - OK and IE 9 - FAIL

If you have a more compatible scroll driven by some javascript rather than the webkit stuff here, the above highlighing function should still work.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now