CODEWITHSUNDEEP
javascriptjquerycssflashvisibility
hippo
hippo

Reputation: 23

How to override the "always show" attribute of a flash plugin in my wannabe-hidden div?

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>

Upvotes: 2

Views: 991

Answers (2)

Jesse Kochis
Jesse Kochis

Reputation: 770

I've solved a problem like this using swfobject. The solution is to not call the embed() method until the div is shown. So if you're using jQuery for example your HTML might look like:

<a href="#audioplayer_1">Play 1</a>
<div id="hidden1">
  <p id="audioplayer_1">Alternative content</p>
</div>

and for jQuery would be something like:

$('a').click(function(
    target = $(this).attr('href');
    $('p'+target).parent().show(); // show the div
    AudioPlayer.embed("audioplayer_1", {soundFile: "mp3_file.mp3"}); // load the audio player
));

Upvotes: 3

zaius
zaius

Reputation: 6409

Firstly, the demo code you pasted doesn't have the audio players in a hidden div. Are you sure they're actually in a hidden element?

If the players still insist on being shown, you can hide them in the document.ready event:

<html>
    <head>  
        <title>Your website</title>  

        ...  

        <script type="text/javascript" src="path/to/audio-player.js"></script>  
        <script type="text/javascript">  
            AudioPlayer.setup("http://yoursite.com/path/to/player.swf", {  
                width: 290  
            });

            $(document).ready(function() {
                $('.hidden object').hide();
                $('.hidden').hide();
            });
        </script>  

    </head> 
    <body> 

      <div class="hidden">
        <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>

      <div class="hidden">
        <p id="audioplayer_2">Alternative content</p>  
        <script type="text/javascript">  
        AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});  
        </script>  
      </div>
    </body>  
</html>

Haven't tested the code - let me know if it doesn't work.

Upvotes: 2

Related Questions