Fade in/out text in same div by clicking link

Windbrand · 11-16-2012, 05:19 AM

I'm trying to have different sets of text fade in/out in the same div by clicking various song names in a playlist in JPlayer (JQuery based audio player). JPlayer link: http://jplayer.org/

Diagram:

This is my code so far:

JPlayer:

Code:

<head>
    ...
    ...
    <!--jPlayer playlist-->
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function(){
           
                new jPlayerPlaylist({
                    jPlayer: "#jquery_jplayer_1",
                    cssSelectorAncestor: "#jp_container_1"
                }, [
                    {
                        title:"<span class='bold white m3'>Song 3</span>",
                        mp3:"___",
                        oga:"___"
                    },
                    {
                        title:"<span class='bold white m2'>Song 2</span>",
                        mp3:"___",
                        oga:"___"
                    },
                    {
                        title:"<span class='bold white m1'>Song 1</span>",
                        mp3:"___",
                        oga:"___"
                    }
                   
                ], {
                    swfPath: "../js",
                    solution:"html,flash",
                    supplied: "oga, mp3",
                    wmode: "window"
                });
            });
            //]]>
        </script>

...
</head>

Each playlist item has a class "m1" "m2" etc.

JS:

Code:

<script type="text/javascript">

$(document).ready(function() {
			
	$('.m1').click(function() {
	        displayNone();
	        showWindow("text1");
        } );	
	$('.m2').click(function() {
		displayNone();
		showWindow("text2");
	} );
        $('.m3').click(function() {
		displayNone();
		showWindow("text3");
	} );

        function displayNone() {
		$('#text1,#text2,#text3').fadeOut();
	}
        function showWindow(name) {
		$('#' + name).fadeIn();
	}
});
</script>

HTML:

Code:

...
...
<div class="pagecontainer">
        <!--JPlayer-->
        <div id="musicplayer">
              <!--JPlayer code here-->

        <!--text area-->
	<div id="legend">			
		<div id="text1">text1</div>	
		<div id="text2">text2</div>		
		<div id="text10">text3</div>		
	</div>

</div>

CSS:

Code:

.pagecontainer {
	overflow-y:auto;
	overflow-x:hidden;
	margin-top:30px;
	margin-bottom:300px;
	width:800px;
	height:400px;
	margin: 0 auto;
	display: block;
	font-size:12px;
}

#text1,#text2,#text3 {
	display:none;
	position:relative;
}

/*SCROLLABLE*/
#musicplayer {
	margin-top:50px;
	padding-left:50px;
	width: 350px;
	position:relative;
}

/*FIXED TO pagecontainer div*/
#legend {
	display:none;
	position:absolute;
	margin-top:100px;
	padding-left:400px;
	width: 400px;
	height: 200px;
	font-size:25px;
	text-align:center;
}

Apparently the song names in a playlist in JPlayer are really special as they don't register as classes or identifiers, so I can't find a way to target them in a function. I've tried to register them as

Code:

title:"<span class='bold white m1' data-link='1'>Song 1</span>",

like previous written. Strangely "bold" and "white" both works (bold just has css property of making font thicker, white is just a css property to change text color to white), but "m1" is not registered, as calling it in click functions does not work, ie:

Code:

$('.m1').on('click', function(e){    
          /*do some stuff*/
    }

It can't find what ".m1" is and thus won't do anything. Basically css properties will register, but javascript won't. Very weird...

Any help is appreciated, thanks.

devnull69 · 11-16-2012, 07:07 AM

One of the problems is this (not the full solution!)

Code:

setTimeout(showWindow("text1"), 2000);

This will not do what you expect. It will call showWindow() immediately because you append parentheses () to the function name. After 2 seconds it would run a callback if and only if you would return a function object from showWindow(), which you don't.

Try this

Code:

setTimeout(function() {showWindow("text1")}, 2000);

Windbrand · 11-17-2012, 06:26 AM

Thanks for your help, yes it seems there was a slight problem with the settimeout.
I've updated my first post to make the problem clearer with updated code.