I have a flash object that I am trying to show and hide along with the rest of my hidden div. Without the flash object, the hidden div works great. When the page loads, this style keeps the div hidden:
<style>
div {display:none;}
p {display:none;}
div p {display:none;}
</style>
But when I add the flash object it always appears.
<div id="hidden1">
<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});
</script>
</div>
The flash object is the Wordpress Audio Player and it comes with its own Javascript file which seems to cause the player object to replace an element with an id such as 'audioplayer_1' as in the installation example below (from the player's docs).
Besides the style, do I need some some JQuery code on document load to try to override the "always show" character of the player object? If so, what event would I need to target?
1. <html>
2. <head>
3. <title>Your website</title>
4.
5. ...
6.
7. <script type="text/javascript" src="path/to/audio-player.js"></script>
8. <script type="text/javascript">
9. AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {
10. width: 290
11. });
12. </script>
13.
14. </head>
15. <body>
16.
17. <p id="audioplayer_1">Alternative content</p>
18. <script type="text/javascript">
19. AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});
20. </script>
21.
22. <p id="audioplayer_2">Alternative content</p>
23. <script type="text/javascript">
24. AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});
25. </script>
26.
27. </body>
28. </html>