SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div swapping, flash movie in each div, IE issue

    Hi,

    I have a project I'm working on for a client. They basically want a page where you click on a little icon, and a corresponding flash video will play in the "billboard" area. What I have so far, using a javascript to swap the "display:" style attribute of a DIV on a click of an icon, works well in FF and Safari, in that the flash video stops automatically when the div is swapped. BUT, in IE, the video doesn't stop when you swap to another DIV. It keeps playing in the background. I can't figure out how to make it stop when the div is swapped.

    You can see what I have here: http://mediumfusion.com/clients/realimages

    here's my code:

    index.html
    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" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <link rel="stylesheet" type="text/css" href="styles.css" />
    	<title>Real Images Video Productions, Inc.</title>
    	
    	<script src="javascripts/swap_content.js" type="text/javascript" charset="utf-8"></script>
    	<script src="javascripts/swap_billboard.js" type="text/javascript" charset="utf-8"></script>
    	<script src="javascripts/validate_form.js" type="text/javascript" charset="utf-8"></script>
    	<script src="javascripts/ufo.js" type="text/javascript" charset="utf-8"></script>
    	
    </head>
    
    <body>
    
    <!-- only relevant code listed -->
        	<div id="content">
    		<div id="billboard">
    			<div id="bb_main"><p>billboard area</p></div>
    			<div id="f1">
    				<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this video.</p>
    				<script type="text/javascript">
    						var FO = {	movie:"flvplayer.swf",width:"480",height:"360",majorversion:"7",build:"0",allowfullscreen:"false",
    							flashvars:"file=media/aa2.flv&displayheight=340&autostart=true" };
    						UFO.create(	FO, "player1");
    				</script>
    			</div>
    			<div id="f2"><p>content2</p></div>
    			<div id="f3"><p>content3</p></div>
    			<div id="f4"><p>content4</p></div>
    			<div id="f5"><p>content5</p></div>
    			<div id="f6"><p>content6</p></div>
    			<div id="f7"><p>content7</p></div>
    			<div id="f8"><p>content8</p></div>
    			<div id="f9"><p>content9</p></div>
    			<div id="f10"><p>content10</p></div>
    			<div id="f11"><p>content11</p></div>
    			<div id="f12"><p>content12</p></div>
    			<div id="f13"><p>content13</p></div>
    			<div id="f14"><p>content14</p></div>
    			<div id="f15"><p>content15</p></div>
    			<div id="f16"><p>content16</p></div>
    			<div id="f17"><p>content17</p></div>
    			<div id="f18"><p>content18</p></div>
    		</div>
    
      		<div id="icons">
    			<div id="i1"><a href="#" onclick="togBB('f1');return false;"></a></div>
    			<div id="i2"><a href="#" onclick="togBB('f2');return false;"></a></div>
    			<div id="i3"><a href="#" onclick="togBB('f3');return false;"></a></div>
    			<div id="i4"><a href="#" onclick="togBB('f4');return false;"></a></div>
    			<div id="i5"><a href="#" onclick="togBB('f5');return false;"></a></div>
    			<div id="i6"><a href="#" onclick="togBB('f6');return false;"></a></div>
    			<div id="i7"><a href="#" onclick="togBB('f7');return false;"></a></div>
    			<div id="i8"><a href="#" onclick="togBB('f8');return false;"></a></div>
    			<div id="i9"><a href="#" onclick="togBB('f9');return false;"></a></div>
    			<div id="i10"><a href="#" onclick="togBB('f10');return false;"></a></div>
    			<div id="i11"><a href="#" onclick="togBB('f11');return false;"></a></div>
    			<div id="i12"><a href="#" onclick="togBB('f12');return false;"></a></div>
    			<div id="i13"><a href="#" onclick="togBB('f13');return false;"></a></div>
    			<div id="i14"><a href="#" onclick="togBB('f14');return false;"></a></div>
    			<div id="i15"><a href="#" onclick="togBB('f15');return false;"></a></div>
    			<div id="i16"><a href="#" onclick="togBB('f16');return false;"></a></div>
    			<div id="i17"><a href="#" onclick="togBB('f17');return false;"></a></div>
    			<div id="i18"><a href="#" onclick="togBB('f18');return false;"></a></div>
    	     </div>
    			
      	</div>
      </div>
    
    </body>
    </html>
    The billboard swap javascript (swap_billboard.js)
    Code:
    /*
    Global "swap" holder
    Use value, null, if no layer initially visible
    */
    var currBBId = "bb_main";
    
    function togBB(id)
    {
    if(currBBId) setBBDisplay(currBBId, "none");
    if(id)setBBDisplay(id, "block");
    currBBId = id;
    }
    
    function setBBDisplay(id,value)
    {
    var elmBB = document.getElementById(id);
    elmBB.style.display = value;
    }
    I'm also using the UFO.js flash object script from http://www.bobbyvandersluis.com/ufo/

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you test this http://xy.wz.cz/jeroen/ it is an old test of this flash player, but I cant check it because I forbid MSIE on my PC.

  3. #3
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mirek Komárek View Post
    Could you test this http://xy.wz.cz/jeroen/ it is an old test of this flash player, but I cant check it because I forbid MSIE on my PC.
    that works fine! hmmmm.....

    my other question (and I don't know if this is the appropriate forum), how to make a div swap after the flash video is over? In other words, if I have a main image, and I swap to a div with a video, and play that video, how to make the main image div come back up automatically. I assume this can be done via JS?

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to put image as background of div where flash will be displayed.

  5. #5
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I'm still confused by this. I must confess I'm a total JS noob.

    I tried Mirek's code, applied to my code, and I couldn't get it to work at all. Maybe there is a different solution?

  6. #6
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please disregard my last comment. I figured it out.

    But, I still haven't figured out how to do the ol' "make the player disappear after it's done playing, therefore showing an image instead" trick.

  7. #7
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by superwick View Post
    please disregard my last comment. I figured it out.

    But, I still haven't figured out how to do the ol' "make the player disappear after it's done playing, therefore showing an image instead" trick.
    to make matters worse, the client wants the "billboard" area to be an swf file. So, (and perhaps I need this moved to a different forum), how to swap a div after a flash video is done playing, thus showing another div, with a flash animation on it??


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •