2009-07-19 7 views
2

Ich habe ein Flash-Objekt, das ich zusammen mit dem Rest meines versteckten Div anzeigen und verstecken möchte. Ohne das Flash-Objekt funktioniert das versteckte div großartig. Wenn die Seite geladen wird, bleibt das div verborgen:Wie überschreibt man das Attribut "always show" eines Flash-Plugins in meinem Möchtegern-versteckten div?

Aber wenn ich das Flash-Objekt hinzufügen, erscheint es immer.

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

Das Flash-Objekt ist die Wordpress Audio Player und es kommt mit seiner eigenen Javascript-Datei, die das Spielerobjekt zu ersetzen, ein Element mit einer ID wie ‚audioplayer_1‘, wie sie bei der Installation (vom Spieler unten zu verursachen scheint Dokumente).

Neben dem Stil, brauche ich etwas JQuery-Code beim Laden von Dokumenten, um das "always show" -Zeichen des Player-Objekts zu überschreiben? Wenn ja, welches Ereignis müsste ich anvisieren?

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> 

Antwort

3

Ich habe ein Problem wie dieses mit swfobject gelöst. Die Lösung besteht darin, die Methode embed() nicht aufzurufen, bis das div angezeigt wird. Also, wenn Sie jQuery verwenden zum Beispiel Ihre HTML könnte wie folgt aussehen:

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

und für jQuery so etwas wie sein würde:

$('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

Hier ist ein kurzes Beispiel ich zusammen: http: // bin.cakephp.org/view/1612450654 –

+0

Ich mag diese Idee. Aber das ist nur die "Show" -Seite. Um 'zu verstecken', wie 'unbemischt'? – hippo

+1

$ ('p' + Ziel) .empty(); Sollte es tun. Es wird das innere HTML entfernen. –

2

Zunächst wird der Demo-Code Sie klebte nicht über die Audio-Player in einem versteckten div. Sind Sie sicher, dass sie tatsächlich in einem versteckten Element sind?

Wenn die Spieler noch darauf bestehen, gezeigt wird, können Sie sie in der document.ready Ereignis verstecken:

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

Haben Sie den Code nicht getestet - lassen Sie mich wissen, ob es funktioniert nicht.

Verwandte Themen