jQuery проблема клонирования / добавления флэш-фильма на IE8 - PullRequest
Новая
       33

jQuery проблема клонирования / добавления флэш-фильма на IE8

0 голосов
/ 16 ноября 2010

У меня проблема с переключением содержимого div с помощью функций jQuery clone и append.

В двух словах я использую две ссылки, чтобы показать и скрыть флэш-видео: ссылка 1 показывает видео1 и скрывает видео2. Ссылка2 показывает видео2 и скрывает видео1.

Вот код, который у меня есть: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
  <div class="videoholder">
    <div id="box1">
      <object width="300" height="225">
        <param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0">
        </param>
        <param name="allowFullScreen" value="true">
        </param>
        <param name="allowscriptaccess" value="always">
        </param>
        <embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
      </object>
      <p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
    </div>
    <div id="box2">
      <object width="300" height="225">
        <param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0">
        </param>
        <param name="allowFullScreen" value="true">
        </param>
        <param name="allowscriptaccess" value="always">
        </param>
        <embed src="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225"></embed>
      </object>
      <p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
    </div>
  </div>
  <script type="text/javascript">

                            $("#box1").show().siblings().hide(); // Default video

                            $(".sele").click(function(){
                                switch(this.name) {
                                        case "box1" : 
                                                var box2 = $("#box2").clone(true);
                                                $("#box2").remove();
                                                $(".videoholder").append(box1);

                                                $(".videoholder").append(box2);
                                                $("#box1").show().siblings().hide(); //

                                                break;
                                        case "box2" : 
                                                var box1 = $("#box1").clone(true);
                                                $("#box1").remove();
                                                $(".videoholder").append(box2);

                                                $(".videoholder").append(box1);
                                                $("#box2").show().siblings().hide(); //

                                                break;
                                }
                            });

</script>
</div>
</body>
</html>

Это самое близкое, что я сделал, чтобы заставить его работать в IE. Мне было бы проще просто использовать 

    <script type="text/javascript">
    $("#box1").show().siblings().hide(); // Default
    $(".sele").click(function(){
    $("#" + this.name).show().siblings().hide();
    });
</script>

Но в IE это не работает: скрытое видео продолжает воспроизводиться.

Я благодарю вас за все идеи, которыми вы хотите поделиться.

С наилучшими пожеланиями. Луис

1 Ответ

1 голос
/ 16 ноября 2010

Вам необходимо установить WMODE в 0 или прозрачный.Fix'd: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="inc/jquery/jquery.js"></script>
</head>
<body>
<div class="leftcolumn">
  <div class="videoholder">
    <div id="box1">
  <object width="300" height="225">
    <param name="movie" value="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/uv9RpD4bbNw?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
  </object>
  <p> <a href="#" name="box2" class="sele" onclick="return false">View video in Spanish</a></p>
</div>
<div id="box2">
  <object width="300" height="225">
    <param name="movie" value="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0">
    </param>
    <param name="allowFullScreen" value="true">
    </param>
    <param name="allowscriptaccess" value="always">
    </param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/HxBRdJCV8Os&amp;hl=en_US&amp;fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="225" wmode="transparent"></embed>
  </object>
  <p> <a href="#" name="box1" class="sele" onclick="return false">View video in English</a></p>
</div>
</div>
</div>
</body>
</html>
...