Javascript for stopping a movie in a div container ?

I need to stop a movie playing in a div container (layer) by clicking on an image in another container. I am using dreamweaver cs3.  I see there is a possibility to call javascript in the tag behaviours section.

Would anyone have that code or another idea as to how I might stop the movie from another div container (layer)

many thanks
jameskaneAsked:
Who is Participating?
 
RouchieConnect With a Mentor Commented:
>> and demanding ABSOLULTE perfection !

Don't worry, that's what I demand and that always keeps people coming back for more...

>> but is there a way to have the default/launch page not be showing a movie

Yes, just set the style of the first div to make it invisible.  Change:
     <div id="div1">
to
     <div id="div1" style="display:none;">


>> had to drop you a note to say A MILLION THANKS for taking this time !!!!!!

No problem.  I know what it's like to struggle away.  Web pages are like a foreign language to most people.  Anyway it's ages past closing time for me so I'm off to drink beer...  See you on monday :-)
0
 
RouchieCommented:
There are some examples of how this is done here

http://www.permadi.com/tutorial/flashjscommand/

The javascript code for the button would be the same for the image, although you might want to make the image a hyperlink for improved reliability.
0
 
jameskaneAuthor Commented:
Many thanks Rouchie for the info. This is a really interesting page and I have learned a lot from it !! I had no idea one could work with movie clips like that !

However, it does not address my exact situation, which I am beginning to believe is not addressable.

I have 3  Layers. In one layer (lets calll it layer 1) have a movie which is running and its visible. In the another layer (layer 2)  I have a menu of links, each one pointing to  a  movie. One is in layer 1 and the other is in ( layer 3.)

What I need to happen is - on clicking the menu link (layer 2) pointing to the movie in layer 3, I need to stop the movie running in layer 1 and then make visible the menu which in layer 3.

The problem here is the layers - in your example, we have the movie in a <P> container and the button to stop the movie in a forms container.

I find now with my Dreamweaver CS3, that they 'have' the facility for doing this. In the TAG behaviours panel they have a nice little menu item with the unfortunate name of DEPRECATED - which I find on looking up my dictionary means bad, not working dont use this.  The submenu under deprecated has a menu item called CONTROL SHOCKWAVE OR FLASH - and this allows one to switch off a movie. HOWEVER,  you guessed it, it does not work !!

Apparently its a recognize problem - with the current solution being, if you want to do this, build the stop control into the movie, or dont use layers to contain the stop button.

Ahhhhhh!!!

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
RouchieCommented:
I would say don't use layers for anything nowadays.  You should use DIV's, then just show and hide the appropriate DIV as per each link clicked.  By giving each movie an ID attribute, the javascript should be able to work directly with it regardless of where it is on the page, by using the getElementByID() function.

So something like this:

<div id="Moviescontainer">
   <div id="movie1">movie here</div>
   <div id="movie2">movie here</div>
   <div id="links">Links here</div>
</div>

should allow interactivity across the page.  Each DIV can be referenced directly in Javascript and shown/hidden:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript">
		function toggleVis(object){
			var object = document.getElementById(object);
			if(object.style.display=='none'){
				object.style.display = '';
			} else {
				object.style.display = 'none';
			}
		}
    </script>
</head>
<body>
<h5 style="cursor:pointer; background-color:#999999;" onclick="toggleVis('divRes');">Click Me...</h5>
<div id="divRes" style="display:none;">
    All this text and content inside this div should appear/disappear when clicked...!
</div>		
</body>
</html>

Open in new window

0
 
jameskaneAuthor Commented:
Woooohhh !

Well, I always thought that a div tag was a layer - or maybe a visible div tag with an absolution position is a layer ? - !! its confusing !

I have tried the code you kindly gave me and it WORKS - with the movie I put into the div container.

Now I need to have a list of  menu items  in the <h5> tag - movie2, Movie3 etc and have a functionality that causes the current movie playing to be replaced by the new movie when I click the corrosponding menu item

I tried this using the code below - where I created a second <h5 line  and a second div container for the  second movie. This does not work, on clicking  movie2 menu item,  the second movie launches in the second div container and I now have two movies running one above the other.

Hopefully this is a matter of my stupidity ratherer than feasibiltiy !!

many thanks again.

James

<h5 style="cursor:pointer; background-color:#999999;" onclick="toggleVis('divRes');">movie1...</h5>
<h5 style="cursor:pointer; background-color:#999999;" onclick="toggleVis('divRes2');">movie2...</h5>
 
 
<!--first container -->
<div id="divRes" style="display:none;">
 
  Content for New Div Tag Goes Here
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','500','height','400','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flips2&autoPlay=true&autoRewind=false','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="400" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="salign" value="lt" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flips2&autoPlay=true&autoRewind=false" />
    <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flips2&autoPlay=true&autoRewind=false" quality="high" scale="noscale" width="500" height="400" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />    
</object></noscript>
</div>      
 
 
 
<!--second container -->
<div id="divRes2" style="display:none;">
 
  Content for New Div Tag Goes Here
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','500','height','400','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flips2&autoPlay=true&autoRewind=false','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="400" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="salign" value="lt" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flips2&autoPlay=true&autoRewind=false" />
    <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flips2&autoPlay=true&autoRewind=false" quality="high" scale="noscale" width="500" height="400" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />    
</object></noscript>
 
 
 
 
 
</div>  

Open in new window

0
 
RouchieCommented:
Let's keep it simple for now.  When a link is clicked we need to show a movie, and hide a movie.  Because one movie will be showing anyway, we can just hide it, then show the other.

So, we can double up the javascript on the h5 tag so it fires twice, once for each DIV that contains a movie.

See this revised code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript">
		function toggleVis(object){
			var object = document.getElementById(object);
			if(object.style.display=='none'){
				object.style.display = '';
			} else {
				object.style.display = 'none';
			}
		}
    </script>
</head>
<body>
<h5 style="cursor:pointer; background-color:#999999;" onclick="toggleVis('divRes'); toggleVis('someDiv');">Click Me...</h5>
<div id="divRes">
    All this text and content inside this div should appear/disappear when clicked...!  Put MOVIE 1 here!
</div>
<div id="someDiv" style="display:none;">
    I am the text in another DIV...!  Put MOVIE 2 here!
</div>	
</body>
</html>

Open in new window

0
 
jameskaneAuthor Commented:
That works fine !!!

Next step - how would  I now arrange to have  a link for each movie i want to show  ?

Sorry for all the spoonfeeding required.

VERY MANY THANKS AGAIN §§
0
 
RouchieCommented:
Ahhh, I think I might have overlooked that bit.   It is friday after all...

There are 2 options.
First we can amend the javascript so that it hides every div containing a Flash movie, then shows the one we need.  Not too sure about the script to do this, would have to look it up.

Option 2 is to just have one single Flash movie object, then pass javascript to the movie to force it to load another movie.  This means the movie loading is all done in Flash, which is more elegant.  Flash apparently can listen for information passed to it in Javascript by using the AddCallBack functionilty descibed here: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15683&sliceId=2

Which do you fancy trying?!?
0
 
RouchieCommented:
Well I went away and looked it up.  Call me a sucker for a new challenge...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script type="text/javascript">
		function hideDivs(){
			var containerDiv = document.getElementById('myContainer');
			var allMovieDivs = containerDiv.getElementsByTagName('div');
			for(var i=0;i<allMovieDivs.length;i++){
				var divToHide = allMovieDivs[i]
				divToHide.style.display='none';
			}
		}
		
		function showDiv(divID){
			hideDivs()
			var divToShow = document.getElementById(divID);
			if(divToShow){
				divToShow.style.display=''; 
			}
			return false;
		}
    </script>
</head>
<body>
<p><a href="" onclick="return showDiv('div1');">Link 01</a></p>
<p><a href="" onclick="return showDiv('div2');">Link 02</a></p>
<p><a href="" onclick="return showDiv('div3');">Link 03</a></p>
<div id="myContainer" style="border:1px solid #999999;">
	<div id="div1">
		All this text and content inside this div should appear/disappear when clicked...!  Put MOVIE 1 here!
	</div>
	<div id="div2" style="display:none;">
		I am the text in another DIV...!  Put MOVIE 2 here!
	</div>	
	<div id="div3" style="display:none;">
		And finally a third DIV!
	</div>	
</div>
</body>
</html>

Open in new window

0
 
jameskaneAuthor Commented:
Rouchie, I am just about to look at the code. BUT, just had to drop you a note to say A MILLION THANKS for taking this time !!!!!!

be back in a mo

james
0
 
jameskaneAuthor Commented:
WELL, its a 99.9999 %er !!!!!!!!!!

It works great, but is there a way to have the default/launch page not be showing a movie - just the links. At the moment I when the page launches, it is running a movie.

SORRRRRRYYYYYY - why can t I just be satisfied with perfection - and demanding ABSOLULTE perfection !

james
0
 
jameskaneAuthor Commented:
very many thanks again. ITS PERFECT !!!

james
0
All Courses

From novice to tech pro — start learning today.