Fade in/out text in same div by clicking link

**Windbrand** · 11-16-2012 01:02 AM

I'm trying to have different sets of text fade in/out in the same div by clicking various links.

Diagram:
http://i.imgur.com/wsBLs.jpg

This is my code so far:

JS:

Code:

<script type="text/javascript">

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

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

HTML:

Code:

...
...
<div class="pagecontainer">

        <!--links-->
        <div id="links">
                <div class="m1">text1</div>
                <div class="m2">text2</div>
                ...
                ...
                <div class="m10">text10</div>
        </div>

        <!--text area-->
	<div id="textarea">			
		<div id="text1">text1</div>	
		<div id="text2">text2</div>		
		...
                ...
		<div id="text10">text10</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,#text4,#text5,#text6,#text7,#text8,#text9,#text10 {
	display:none;
	position:relative;
}

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

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

The catch is the links are actually songs on a playlist in JPlayer (music player using JQuery), where each item in the playlist is assigned a class (.m1, .m2, etc), so it functions exactly like the ordinary <div class="m1">text1</div>.

Using this code many things mess up:
- About half of the links become unclickable, the remaining half functions normally, I have no idea what determines which ones become unclickable or why
- The moment I hover mouse over any of the unclickable links, the page freezes, this is fixed when I hover mouse over a clickable link (weird??)
- The text (text1, text2 etc) does not show up at all

Any help is appreciated, thanks.

**coldfire421** · 11-16-2012 10:51 AM

If you want to use only just fade effect why not try to use jquery.animate

http://api.jquery.com/animate/

**codersyard** · 11-16-2012 10:54 AM

You try fade in/fade out effect from the examples of Chapter 8 from the below link.

http://www.codersyard.com/dashboard/ebooks.html?file=JS_Examples.zip

**Windbrand** · 11-17-2012 12:33 AM

For some reason I can't edit my first post?
Anyways here is an update of my question, please read this one as it's clearer and with updated code.

=======================================================================

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:
http://i.imgur.com/wsBLs.jpg

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(){    
          /*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.

Thread: Fade in/out text in same div by clicking link

Thread Tools

Display

Fade in/out text in same div by clicking link

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions