Hand Holding Needed: Get menu to do additional 'onclick's
Hi!!
I have a menu that works and I need to have it continue to do it's menu stuff. I think I need to add a unique class to each <li> so that onclick I can call a single instance of my flv player code. Then, when I click a different menu <li> the first instance of the flash player is replace with a different bunch of code.
This is my menu WITH a whole bunch of added class stuff. it DOES still work and the extra stuff is just so I can fumble around and try stuff.
I have an empty <div id=video> just waiting for me to get this working.
The #video should get an instance of the flvplayer.swf and the needed code.
My real 1st problem is just getting adding the onclick stuff and the script to fire it.
1) THIS is part of the menu I've been working with. It does have a div surrounding it and another <ul> class.
<li>
<a href="#first" class="first">First</a>
<ul class="first">
<li class="first-a-video"><a class="#first-a" href="#first-a">first a</a></li>
<li class="first-b-video"><a class="#first-b" href="#first-b">first-b</a></li>
<li class="first-c-video"><a class="#first-c" href="#first-c">first-c</a></li>
<li class="first-d-video"><a class="#first-d" href="#first-d">first-d</a></li>
<li class="first-e-video"><a class="#first-e" href="#first-e">first-e</a></li>
</ul>
</li>
2) This is the mostly or totally WRONG script I've been trying to fix which probably needs some parent child stuff. i'm REALLY lost at this point:
<script type="text/javascript">
$(document).ready(function() {
$('#first li a').click(function(){
var toLoad = $(this).attr('class')+' #video';
$('#video').hide('fast',loadContent);
function loadContent() {
$('#video').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#video').show('normal'());
}
return false;
});
});
</script>
3) This is the flash code that calls the flvplayer.swf very nicely by using 'jquery.swfobject.js' plugin. I've annotated the following code.
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#video').flash({ // this puts the instance of the player in the video div perfectly.
swf: 'flvplayer.swf', // this loads the flv player just fine.
flashvars: {flv: 'test.flv', showvolume: '1', showstop: '1', showtime: '1'}
}); // the actual unique video (test.flv) needs to be here IN the flashvar line which is what the player (flvplayer.swf) expects.
});
</script>
I've tried all of the media plugins and swfobject2 as well. Thing is, to call the different videos the flvplayer.swf (flv-player.net) needs the name of the different video to be in the flashvars part of the flash code.
Yep, this one become impossible for me to get any further I have to say.
So:
1) menu is working and needs to keep doing what it's already doing.
2) I need to add some knid of onclick to each unique <li> I guess that calls a unique video for each <li> which replaces an instance of the flvplayer.swf AND load the new video.
So, I don't mind how messy the code is. I mean even if I hae to have the full flash script for every <li>
Just could REALLY use some help with this...
How stupidly wrong IS my code at 2) above? That's the first thing I need to get right. Do I need to do some parent child thing?
BIG BIG thanks for reading... I'll never give up though it's been a few full days now.
:--)