- /*
- when you don't feel like writing moo classes for any reason, this is the common practice of adding multiple functions to your pages
- */
- var Site={
- start: function(){
- /* inside here you run any conditions you may have and call other funcitons defined in this variable */
- /* for example, let's check if media toggler exists and start the script only if it does */
- if( $('media_toggle') )
- Site.mediaTrigger();
- },
- mediaTrigger: function(){
- /* declare slide on media and hide it on page load */
- var mediaSlide = new Fx.Slide('media').hide();
- /* and declare slide on featured */
- var featuredSlide = new Fx.Slide('FA_overall_container');
- /* when toggler gets clicked, we hide one and show the other */
- $('media_toggle').addEvent('click', function(event){
- new Event(event).stop();
- mediaSlide.toggle();
- featuredSlide.toggle();
- });
- }
- }
- window.addEvent('domready', Site.start);
Basically what I am trying to do is have a dropdown hidden div using fx.slide. When the div is expanded it will show a flash video player.
So far I managed to get the slider working, which was no small feat for me, but now I am a bit stuck.
http://shawngaffney.anointed.net - on the right side column is a link called 'toggler' that brings the slide up and down. The problem will be obvious as soon as you go to the page.
Even though the div starts out hidden, the flash player still shows up on the top of the page. When I click the button the flash player moves down correctly.
Also: if the video is started when the slide is down, and you slide it up, the video keeps playing.
So the 2 things I am stuck on:
1. Hiding the flash video when it's in the closed position
2. Stopping the player from playing when the slide is sent back up.
If anyone could provide some help, I would really appreciate it.
Here is the code I am using
Here is the relevant css:
- #media {
- -moz-background-clip:border;
- -moz-background-inline-policy:continuous;
- -moz-background-origin:padding;
- background:#000000 url(images/media-centre-bg.png) no-repeat scroll 0 0;
- height:419px;
- left:0;
- top:0;
- width:970px;
- }
- #media-container {
- height:419px;
- left:0;
- top:0;
- width:660px;
- }
I know for most everyone this is all second nature, but as I said I am brand new and no joke, it took me 2 weeks to make it this far. So I am trying to learn how to do it right.
Also, the media-container div is not as wide as the primary container, because I plan on putting another div along side the media-container when I get it fixed. That way I can put a text description of the video to the right side.
thanks up front guys!
