2009-07-19 18 views
2

私は、私の隠されたdivの残りと一緒に表示したり隠したりしようとしているフラッシュオブジェクトを持っています。フラッシュオブジェクトがなければ、隠されたdivは素晴らしい作品です。ページが読み込まれるとき、このスタイルはdivを隠したままにします:wannabe-hidden divのフラッシュプラグインの "always show"属性を上書きする方法は?

<style> 
div {display:none;} 
p {display:none;} 
div p {display:none;} 
</style> 

しかし、私はフラッシュオブジェクトを追加すると常に表示されます。

<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> 

フラッシュオブジェクトがWordpress Audio Playerあり、それはプレイヤーのから(例えば、以下のインストールの例のように「audioplayer_1」としてidを持つ要素を置き換えるためにプレイヤオブジェクトを起こしているようだ、独自のJavaScriptファイルが付属していますdocs)。

スタイルの他に、ドキュメントオブジェクトの「常に表示」文字をオーバーライドするために、ドキュメントの読み込み時にいくつかのJQueryコードが必要ですか?もしそうなら、どんなイベントをターゲットにする必要がありますか?

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> 

答えて

3

swfobjectを使用してこのような問題を解決しました。解決策は、divが表示されるまでembed()メソッドを呼び出さないことです。だから、あなたはあなたのHTMLは次のようになります例えばjQueryのを使用している場合:

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

とjQueryのためのようなものになるだろう: ます。http://を

$('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 
)); 
+0

ここで私は一緒に入れて簡単な例を示しますbin.cakephp.org/view/1612450654 –

+0

私はこの考えが好きです。しかし、これはそれのちょうどショーの側面です。 「隠す」ために、どのように「アンブレッ」しますか? – hippo

+1

$( 'p' + target).empty();それを行う必要があります。 innerHTMLが削除されます。 –

2

まず、あなたが貼り付けられたデモ・コードが隠されたdivの中のオーディオプレーヤーを持っていません。彼らは実際に隠された要素にいると確信していますか?

選手はまだあなたがdocument.readyイベントでそれらを非表示にすることができ、示されていることを主張した場合:

<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> 

は、コードをテストしていない - それは動作しない場合は私に知らせてください。

関連する問題