jQuery scrolling marquee in html page title tag

Question

I want to place a scrolling marquee in my html title tag using jquery but don't know how and can't seem to find a good explanation online anywhere. Can someone help me please?

Solution 1

That's not very hard to do if you just want it to scroll like the marquee tag:

(function titleMarquee() {
    document.title = document.title.substring(1)+document.title.substring(0,1);
    setTimeout(titleMarquee, 200);
})();

That's pretty basic but should give you an idea on how to tweak it to your liking.

Solution 2

In Tatu Ulmanen's answer, there is a problem with space characters. As psarid stated as comment, after the first scroll, all of the spaces are removed.

This is because html parser trims texts. That means it removes the spaces at the end and at the beginning of the text. When title is scrolling, the title object in html looks like that:

<title>Scrolling Title With Spaces</title>
<title>crolling Title With SpacesS</title>
<title>rolling Title With SpacesSc</title>
<title>olling Title With SpacesScr</title>
...
<title>Title With SpacesScrolling</title>

As you can see above, we lost the space between words Scrolling and Spaces. To prevent that, we need to store original document.title somewhere in our javascript code and put a space or something else to the end of it. Then, we can scroll document.title by scrolling the text in the other variable. Here is the modified code of Tatu Ulmanen.

var documentTitle = document.title + " - ";

(function titleMarquee() {
    document.title = documentTitle = documentTitle.substring(1) + documentTitle.substring(0,1);
    setTimeout(titleMarquee, 200);
})();