PDA

View Full Version : Javascript showonlyone with flash movies, IE8 problems



slimbo
07-01-2010, 04:49 PM
Hi,
I am building a webpage to display flash movies. The idea is that one movie at a time is displayed in a div at the top of the page, and underneath are small crosshair icons in a table that are clicked to show the movies.

I am using a javascript called showonlyone.js.

This is now working well in Firefox 3, Opera 10.6, Safari 5 and Google Chrome browsers, but in IE8 it isn't quite right. Basically, in all these browsers except IE, when a button is clicked it stops and hides the current movie, and shows and starts the next one. However, in IE, it hides the current movie and shows the next, but it doesn't start or stop the movies, so the sound from the hidden movie is still audible, and when a movie ends, clicking back to it doesn't start it.

Another problem with this is that, on a slow broadband connection, the movies only partly download and play, then stop and don't restart - like the browsers timeout? Is there any way to force browsers to continue trying until the whole page or movie file is downloaded.

Any ideas, anyone?
(The flash movies use swfobject.js)

The working (mostly) web page can be seen here:
http://intercreative.co.uk/showonlyone/showonlyone.htm

The code below has 4 divs with flash movie code for each of 4 movies, then the selector buttons in a table.

Here is all the code of the whole web page:

<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<link rel=stylesheet href="style.css" type="text/css" media=screen>

<!-- <script type="text/javascript" src="swfobject.js">
</script> -->

<!-- <script type="text/javascript">
swfobject.registerObject("videos", "9.0.0", "expressInstall.swf");
</script> -->

<script type="text/javascript">
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>

</head>

<body class="video">
<div id="wrap">



<div id="sidebar">

<a href="#" id="home">Home</a><br>
<a href="#" id="images">Still Images</a><br>
<a href="#" id="video">Video</a><br>
<a href="#" id="interviews">Interviews</a><br>
<a href="#" id="sounds">Sounds</a><br>
<a href="#" id="exhibitions">Exhibitions</a><br>
<a href="#" id="links">Links</a>

</div>

<div name="newboxes" id="newboxes1" style="display: block;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="240" id="videos">
<param name="movie" value="Sequence1.swf">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Sequence1.swf" width="300" height="240">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></div>


<div name="newboxes" id="newboxes2" style="display: none;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="240" id="videos">
<param name="movie" value="polytunnels.swf">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="polytunnels.swf" width="300" height="240">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></div>



<div name="newboxes" id="newboxes3" style="display: none;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="240" id="videos">
<param name="movie" value="BullSalesPerth.swf">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="BullSalesPerth.swf" width="300" height="240">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></div>

<div name="newboxes" id="newboxes4" style="display: none;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="240" id="videos">
<param name="movie" value="berrywalk.swf">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="berrywalk.swf" width="300" height="240">
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="quality" value="medium" />
<param name="scale" value="noborder" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></div>


<div id="mainSounds">

<table width="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="110" align="left"><a id="myHeader1" href="javascript:showonlyone('newboxes1');" ><img src="targetSmallest.gif">
<br>Sequence1</a></td>
<td width="170" align="center"><a id="myHeader2" href="javascript:showonlyone('newboxes2');" ><img src="targetSmallest.gif">
<br>Polytunnels</a></td>
<td width="170" align="center"><a id="myHeader3" href="javascript:showonlyone('newboxes3');" ><img src="targetSmallest.gif">
<br>Bull sales Perth</a></td>
<td width="110" align="right"><a id="myHeader4" href="javascript:showonlyone('newboxes4');" ><img src="targetSmallest.gif">
<br>Berry walk</a></td>
</tr>
</table>

</div>

<div id="footer">
<br><br><br><br>
Copyright 2010 All rights reserved

</div>

</div>
</body>
</html></code>



Any help would be much appreciated.

Simon