www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] script not working in IE

  1. #1
    Join Date
    Jan 2009
    Posts
    45

    resolved [RESOLVED] script not working in IE

    Hi there,

    I have a page which works fine in FF, but not in IE. Here is what is about:
    There is the google swfobject JS : http://swfobject.googlecode.com/svn/...t/swfobject.js which is untouched and is ok. Then, I have my code:
    Code:
    function loadVideo(playerUrl, autoplay) {
      swfobject.embedSWF(
          playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
          (autoplay?1:0), 'player', '640', '380', '9.0.0', false,
          false, {allowfullscreen: 'true'});
    }
    
    function showMyVideos2(data) {
      var html = ['<ul class="videos">'];
      var i=0;
      var title ="";
      var thumbnailUrl ="";
      var playerUrl ="";
      var desc="";
      var rating="";
      var views="";
      while (i<10) {
    
        title = data.value.items[i].title.substr(0, 60);
        thumbnailUrl = data.value.items[i]["media:group"]["media:thumbnail"][0].url;
        playerUrl = data.value.items[i]["media:group"]["media:content"][0].url;
        desc=data.value.items[i]["media:group"]["media:description"].content.substr(0, 300);
        rating=data.value.items[i]["gd:rating"].average;
        views=data.value.items[i]["yt:statistics"].viewCount;
        html.push('<li>', '<div style="float:left;padding-right:15px;"><img  src="',
                  thumbnailUrl, '" width="130" height="97"/><br />',rating,' * and ',views,' views</div>',
                  '<a style="padding-left:25px;" href="javascript:void(0);" onclick="loadVideo(\'', playerUrl, '\', true)" class="titlec">', title, '...</a><br />',desc,'<br style="clear:both"/>','</li>');
      i++;}
      html.push('</ul><br style="clear: left;"/>');
      document.getElementById('videos2').innerHTML = html.join('');
      if (i.length > 0) {
        loadVideo(data[i].value.items[0]["media:group"]["media:content"][0].url, false);
      }
    }
    Then is the data from a JSON callback:
    http://pipes.yahoo.com/pipes/pipe.ru...=showMyVideos2

    And the html code :

    Code:
    <div id="playerContainer" style="width: 20em; height: 380px;">
        <object id="player"><object width="640" height="380"><param name="movie" value="http://www.youtube.com/swf/l.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/swf/l.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="380"></embed></object></object>
    </div>
    <div id="videos2" style="width:640px;overlow:auto"></div>
    The problem is that when using IE when you click on the title of the videos, it doesn't fires up the player. Any idea ?

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  3. #3
    Join Date
    Jan 2009
    Posts
    45
    I've tried this:

    Code:
    html.push("<li><div style='float:left;padding-right:15px;'><img  src="+thumbnailUrl+" width='130' height='97'/><br /> * and "+views+" views</div><a style='padding-left:25px;' href='javascript:void(0);' onclick='loadVideo( "+ playerUrl + ", true)' class='titlec'>"+title+"...</a><br />"+desc+"<br style='clear:both'/></li>")
    but is till not working.

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  5. #5
    Join Date
    Jan 2009
    Posts
    45
    Here is the full page working in FF, but not in IE:

    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
      <script language="JavaScript" type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js">
    
      </script>
      <script language="JavaScript" type="text/javascript">
      /*<![CDATA[*/
      function loadVideo(playerUrl, autoplay) {
      swfobject.embedSWF(
          playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
          (autoplay?1:0), 'player', '640', '380', '9.0.0', false,
          false, {allowfullscreen: 'true'});
    }
    
    function showMyVideos2(data) {
      var html = ['<ul class="videos">'];
      var i=0;
      var title ="";
      var thumbnailUrl ="";
      var playerUrl ="";
      var desc="";
      var rating="";
      var views="";
      while (i<10) {
    
        title = data.value.items[i].title.substr(0, 60);
        thumbnailUrl = data.value.items[i]["media:group"]["media:thumbnail"][0].url;
        playerUrl = data.value.items[i]["media:group"]["media:content"][0].url;
        desc=data.value.items[i]["media:group"]["media:description"].content.substr(0, 300);
        rating=data.value.items[i]["gd:rating"].average;
        views=data.value.items[i]["yt:statistics"].viewCount;
        html.push('<li>', '<div style="float:left;padding-right:15px;"><img  src="',
                  thumbnailUrl, '" width="130" height="97"/><br />',rating,' * and ',views,' views</div>',
                  '<a style="padding-left:25px;" href="javascript:void(0);" onclick="loadVideo(\'', playerUrl, '\', true)" class="titlec">', title, '...</a><br />',desc,'<br style="clear:both"/>','</li>');
      i++;}
      html.push('</ul><br style="clear: left;"/>');
      document.getElementById('videos2').innerHTML = html.join('');
      if (i.length > 0) {
        loadVideo(data[i].value.items[0]["media:group"]["media:content"][0].url, false);
      }
    }
      /*]]>*/
      </script>
    </head>
    
    <body>
      <div id="playerContainer" style="width: 20em; height: 380px;">
        <object id="player"><object width="640" height="380"><param name="movie" value="http://www.youtube.com/swf/l.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/swf/l.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="380"></embed></object></object>
    </div>
    <div id="videos2" style="width:640px;overlow:auto"></div>
    <script language="JavaScript" type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_id=f4caacfd99bd0bc8e2c7e5c154cf254c&_render=json&_callback=showMyVideos2">
    
    </script>
    </body>
    
    </html>

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    Hm. Try removing the "javascript:void(0)" from the <a> tag's href attribute. Replace it with "#". Add a ; return false; to the onclick attribute. Maybe the onclick isn't even being triggered because of the "javascript:void(0)" code in the href attribute?

  7. #7
    Join Date
    Jan 2009
    Posts
    45
    Unfortunately, isn't this; I have to dig more.

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

  9. #9
    Join Date
    Jan 2009
    Posts
    45
    There is no bug shown in Firebug and neither IE displays any error. I think that IE is a very "popular" subject around here, but still is the most used. In this case I've changed the code in several ways and it was still working in FF

  10. #10
    Join Date
    Jan 2009
    Posts
    45
    ok, I have solved it. The problem was that the object with id "player" should not contain any content, except the one pushed by the javascript.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles