Question

I have one query. Through while loop I am displaying three random songs from database and displaying them but I don’t want to display all three.

When users click on the first song play icon it starts playing and after it finishes first song it automatically goes to second song and after second song completes it goes to third song.

But I want to display only one block which is playing for example first block will be displayed and when users click on first it will start playing but when first completes it should scroll up and second song which is playing should be visible to visitor.

Here is my php code:

$res6411 = sql_query("SELECT * from `".tb()."stories` where app='music' order by rand() desc limit 3");
while($row6411 = sql_fetch_array($res6411)) {
    $outputmusic .= ' <div id="playlist"> <div href="'.$row6411['var1'].'" style="width: 520px;" class="item">
        <div>
            <div class="fr duration"></div>
            <div class="btn play"></div>
            <div class="title">'.$row6411['title'].'</div>
        </div>
        <div class="player inactive"></div>
    </div>        </div>

here is css

b{color:#555;font-weight:bold}.duration{font-size:10px;color:#777}.btn.play{width:16px;height:17px;background-image:url(i/play.gif);display:inline-block}.btn.pause{width:16px;height:17px;background-image:url(i/pause.gif?2)}.btn.paused{width:16px;height:17px;background-image:url(i/play.gif?3);display:inline-block}div.player{width:520px;height:14px;margin-top:5px;padding-left:20px}div.player.inactive{margin-top:0px;margin-bottom:0;border-top:dashed 0px #555}.item .title{-vertical-align:middle}.item .btn{display:inline;float:left;margin-right:5px;cursor:pointer}

Here is output from firebug.

It displays three blocks. I want to display only playing song and when first song finishes playing it automatically goes to second that time first should scroll up and second song should display

<div id="playlist" class="playlist1"> <div class="item" style="width: 520px;" href="uploads/userfiles/201206/1110_27_aslha.[Songs.PK]Blue-05-BlueTheme.mp3">
        <div>
            <div class="fr duration"></div>
            <div class="btn play"></div>
            <div class="title">Blue Theme</div>
        </div>
        <div class="player inactive"></div>
    </div><div class="item current" style="width: 520px;" href="uploads/userfiles/201206/110_48_7jngc.ChaleChalo.mp3">
        <div>
            <div class="fr duration"></div>
            <div class="btn pause"></div>
            <div class="title">Chale Chalo</div>
        </div>
        <div class="player"><embed width="380" height="5" flashvars="url=uploads/userfiles/201206/110_48_7jngc.ChaleChalo.mp3&amp;id=playlist1&amp;backgroundColor=16777215&amp;volumeBarWidth=40&amp;progressBarWidth=320&amp;barSpace=20&amp;volumeBarColor=5592405&amp;volumeBarHeight=1&amp;volumeSliderWidth=10&amp;volumeSliderHeight=5&amp;volumeSliderColor=5592405&amp;progressBarHeight=1&amp;progressSliderWidth=10&amp;progressSliderHeight=5&amp;progressSliderColor=5592405&amp;progressBarColor=10066329&amp;bufferColor=5592405" allowscriptaccess="sameDomain" swliveconnect="true" quality="high" name="playerplaylist1" id="playerplaylist1" style="undefined" src="swf/drplayer.swf" type="application/x-shockwave-flash" wmode="transparent"></div>
    </div><div class="item" style="width: 520px;" href="uploads/userfiles/201206/117_49_6l7ag.01KahonaKaho-AmirJama.mp3">
        <div>
            <div class="fr duration"></div>
            <div class="btn play"></div>
            <div class="title">Kaho na Kaho - murder</div>
        </div>
        <div class="player inactive"></div>
    </div></div>

Answer 1

It seems you’re already setting a “current” css class on the currently playing item. You can leverage this by just animating the divs based on this class. If you want all inactive items to be invisible, do something like this.

In your CSS:

.item{display:none;}

In your jquery:

//When doc is ready

$(function(){
    $('.item').slideUp();
    $('.item.current').slideDown(); 
});

//You can set a speed/duration for this animation. See more info here: http://api.jquery.com/slideDown/

Make sure you reference jquery in your head as well. You can link to this from Google: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js