[RESOLVED] script not working in IE

**akkadII** · 02-05-2009 01:33 AM

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 ?

**toicontien** · 02-05-2009 09:06 AM

I think you are trying to use playerURL in the onclick, and you should be using "+" instead of ",":

Code:

\'' + playerUrl + '\'

**akkadII** · 02-05-2009 01:00 PM

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.

**toicontien** · 02-05-2009 01:39 PM

Without seeing the page in action, I can't see anything else right off hand.

**akkadII** · 02-06-2009 01:33 AM

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>

**toicontien** · 02-06-2009 08:11 AM

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?

**akkadII** · 02-06-2009 03:13 PM

Unfortunately, isn't this; I have to dig more.

**toicontien** · 02-06-2009 03:52 PM

Can you post the JavaScript error? There must be a JavaScript error.

**akkadII** · 02-07-2009 06:46 AM

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

**akkadII** · 02-09-2009 01:21 AM

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: [RESOLVED] script not working in IE

Thread Tools

Display

[RESOLVED] script not working in IE

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions