Question

I am using jPlayer for a client, where the progress bar is the title of the track. It changes color as the track progresses. I’m accomplishing this by having a div with the title in one color, and absolutely positioning the progress bar on top of it, with the title in another color. So as the progress bar expands, it reveals the new colored text. In case my description is terrible (I’m sure it is), you can take a look at the dev site here:

http://sublimio.matthew-ferry.com/sublimio/

As you can see, the progress works just fine on single word titles. But on multiple word titles, the first word reveals fine, then for the subsequent words they aren’t displayed until the whole word is finished.

Is this a browser rendering problem or is there something I could do to fix this?

first the js:

$('.track').each(
        function()
        {
            var player_id = '#' + $('.jp-jplayer', this).attr('id');
            var audio_id    = '#' + $('.jp-audio', this).attr('id');

            $('.jp-jplayer', this).jPlayer(
                {
                    "cssSelectorAncestor": audio_id,
                    swfPath: "js",
                    supplied: "mp3",
                    wmode:"window"


            }
            );

            $('.song', this).click(
                function(eve)
                {
                    eve.preventDefault();
                    $(this).jPlayer("progress");
                    $('.jp-jplayer').jPlayer("stop");
                    $(player_id).jPlayer(
                        "setMedia", 
                        {
                            mp3: $(this).attr("href")
                        }
                    );

                    $(player_id).jPlayer("play");
                    return false;
                }
            );
        }
    );

Now the (simplified) HTML:

<ul>
<li class="track">
    <div>
        <div class="jp-controls">
            <span><a class="jp-play song" tabindex="1">play</a></span>
            <span><a class="jp-pause" tabindex="1">pause</a></span>
        </div>
        <div class="title">Title With Multiple Words</div>
        <div class="progress">
            <div class="jp-seek-bar">
                <div class="jp-play-bar">Title With Multiple Words</div>
            </div>
        </div>
    </div>
</li>
...etc...
</ul>

Answer 1

Ha, figured it out. The progress bar at 0% width was wrapping the overflow text onto multiple lines. Fix was using white-space: nowrap; on the progress bar text