Smooth Scrolling & Dynamically Changing the Page Title

admin

Administrator
Staff member
I currently have a site that changes the title of the page to reflect whatever song is currently being played. What I would like to do is have the title of the page constantly scrolling so the user can see the full name of the song playing, even if they have a lot of tabs open.

I tried out a few different scrolling plugins, but the one I've found to work best is the plugin found here:
<a href="http://www.seangw.com/wordpress/ind...-scrolling-text-marquee-with-a-jquery-plugin/" rel="nofollow">http://www.seangw.com/wordpress/ind...-scrolling-text-marquee-with-a-jquery-plugin/</a>

I can get the plugin working fine on a regular body element, but it doesn't work when I put it on the title of a page. I've tried wrapping the tag in the tags but it doesn't work. In addition, the title of my page changes dynamically, so the scrolling text would need to change as well.

Here is the javascript function where I am changing the title:

Code:
function playNext(newState)
{
    //alert("new state: " + newState);
    //unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5)
    if(newState == 0) //song is done
    {
        //**************minimize myself*******************
        var i = ' . $this-&gt;i .';
        var dataString = getDataString(i);
        minimizeSong(dataString, i);
        //**************maximize next song****************
        dataString = getDataString(i+1); //i + 1 is next song
        maximizeSong(dataString, i+1);
        //I will automatically start playing on load
    }
    else if(newState == 1) // if its playing, change the title
    {
        $("title").text("' . $this-&gt;title . ' by ' . $this-&gt;artist . '    - T3k.no");
    }
    else if(newState == 2) //song is paused, go back to original title
    {
        $("title").text("Paused - T3k.no");
    }
    else if(newState == 3) //song is buffering, change title
    {
        $("title").text("Loading '.$this-&gt;artist .' - T3k.no");
    }
}

Can anyone help? How can I go about achieving this?

This doesn't work:

Code:
&lt;html&gt;&lt;head&gt;
&lt;marquee behavior="scroll" direction="left" scrollamount="2"
      height="75" width="150"&gt;
    &lt;title&gt;WANT THIS TO SCROLL&lt;/title&gt;
&lt;/marquee&gt;
&lt;/head&gt;&lt;/html&gt;

But something like this works fine:

Code:
&lt;body&gt;
    &lt;marquee behavior="scroll" direction="left" scrollamount="2"
          height="75" width="150"&gt;
          &lt;p&gt;This is a test of a Smooth Marquee using jquery.&lt;/p&gt;
     &lt;/marquee&gt;
&lt;/body&gt;