It is currently Wed Apr 16, 2014 12:15 pm Advanced search

Help With IE8 Javascript/Flash Bug

Technical support, bug reports, feature requests and more.

Help With IE8 Javascript/Flash Bug

Postby timd.mackey » Tue Nov 24, 2009 9:14 pm

I have implemented the most recent versions of highslide and jw player ([url]longtailvideo.com[/url]) in a webpage, and have the flash videos being presented in a highslide lightbox. The problem that I am having is that in Internet Explorer 8, once the video starts playing, javascript events no longer work until I click on the video to stop it. The main problem is that if the video is playing, I cannot close the lightbox until the video playback is manually stopped. If I have already tried to close the lightbox, and then stop the video, the lightbox immediately closes when I stop the video.

Just to see whether it was only highslide, or if it was all javascript that was having this problem, I added a button that popped up an alert box, but again, the alert doesn't appear until the video is stopped. Actually, what seems to happen is that the alert box gets called and disables browser control, greying out the menubar, and then doesn't appear until the video has stopped playing. Has anyone ever had a problem like this? It only occurs in IE8 (I'm testing under XP), the whole thing works fine in IE6 and 7, as well as firefox and safari.

I am using Jquery, Highslide, and SWFObject. Here is the relevant javascript:

Code: Select all
$(document).ready(function() {
                     
   /* Settings */
   hs.graphicsDir = '/resources/scripts/highslide/graphics/';
   hs.dimmingDuration = 200;
   hs.dimmingGeckoFix = true;
   
      /* Enlarge */
      $('.video-link a').each(function() {
         this.onclick = function() {
            return hs.htmlExpand(this, {
               objectType: 'swf',
               src: '/resources/jwplayer/player.swf',
               swfOptions: {
                  version: '8',
                  expressInstallSwfurl: '/resources/scripts/swfobject/expressInstall.swf',
                  flashvars: {
                     file: '/videos/items/' + getUrlParameter('video', this.href) + '.flv',
                     image: '/videos/watch-video.png',
                     backcolor: '222222',
                     frontcolor: 'ffffff',
                     lightcolor: '555555',
                     screencolor: '000000',
                     bufferlength: '5',
                     autostart: false
                  },
                  params: {
                     allowscriptaccess: 'always',
                     allowfullscreen: 'true',
                     vmode: 'transparent'
                  }
               },
               width: 600,
               height: 358,
               objectWidth: 600,
               objectHeight: 358,
               maincontentText: '<snip>',
               wrapperClassName: 'no-frame floating-caption',
               dimmingOpacity: 0.8,
               align: 'center',
               transitions: ['fade'],
               allowSizeReduction: false,
               captionEval: 'this.a.title',
               preserveContent: false
            });
         };
      });
});


I suppose I should include the HTML as well:

Code: Select all
<div class="video-link">
   <a href="/videos/video_player.php?video=80492" title="This is a title">See It In Action</a>
</div>
Last edited by timd.mackey on Wed Nov 25, 2009 8:05 pm, edited 1 time in total.
timd.mackey
 
Posts: 5
Joined: Tue Nov 24, 2009 8:54 pm

Re: Help With IE8 Javascript/Flash Bug

Postby torstein.honsi » Wed Nov 25, 2009 11:03 am

I haven't seen this before. Perhaps what you should do is to set up a minimal example showing only the JW Player and the alert problem, then you can ask the JW Player support team. We are not Flash experts in this forum.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9181
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Help With IE8 Javascript/Flash Bug

Postby timd.mackey » Wed Nov 25, 2009 6:59 pm

Thanks for your reply, Torstein. I don't really know how javascript and flash interact, so I thought it might be something to do with the way I was implementing highslide. If I figure this problem out, I will post back here with the solution.

FYI, another problem with implementing jw player and highslide together arises when using Safari 4. In certain cases, the flash player does not appear until the window is scrolled by any amount. Right clicking the lighbox shows that the flash content is actually there, but it does not become visible until scrolling. It happens in two cases. If the transition is set to the default, "expand," it only happens if the lightbox is positioned overtop of the link that activates it. However, if the transition is set to "fade," it happens all the time. The way I solved it (for now) is by inserting this code into my highslide settings:
Code: Select all
hs.Expander.prototype.onAfterExpand = function() {
   if (navigator.userAgent.toLowerCase().indexOf('safari') > 0) {
      scrollBy(0,1);
      scrollBy(0,-1);
   }
};

Thanks again for your help, Torstein, and thanks for a great product! Again, I will post back here if I figure out either of these problems.
timd.mackey
 
Posts: 5
Joined: Tue Nov 24, 2009 8:54 pm

Re: Help With IE8 Javascript/Flash Bug

Postby timd.mackey » Wed Nov 25, 2009 8:26 pm

It appears as if the Safari problem was caused by this css rule:
Code: Select all
.product-box .description .video-link a span {
   display:block;
}

being applied to this link, which is calling the highslide lightbox with the video, via jquery:
Code: Select all
<div class="product-box">
   <ul class="description">
      <li class="video-link">
         <a href="/videos/video_player.php?video=80492" title="3&quot; Hot Color Kazoo"><span>See It </span><span>In Action</span></a>
      </li>
   </ul>
</div>


This causes the spans inside the anchor to display as blocks, while the anchor remains an inline element. I have now realized that I can fix the Safari problem if I add this rule:
Code: Select all
.product-box .description .video-link a {
   display:block;
}


I know that anchors cannot contain block-level elements, but I thought that they could contain an inline element that has "display:block;". Is this not correct?
timd.mackey
 
Posts: 5
Joined: Tue Nov 24, 2009 8:54 pm

Re: Help With IE8 Javascript/Flash Bug

Postby torstein.honsi » Thu Nov 26, 2009 11:41 am

I know that anchors cannot contain block-level elements, but I thought that they could contain an inline element that has "display:block;". Is this not correct?


Yes it will validate that way, but the thing is you never know with browsers even on valid pages. The only way to be sure it works is to test.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9181
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Help With IE8 Javascript/Flash Bug

Postby timd.mackey » Thu Nov 26, 2009 9:23 pm

Okay, I finally solved the IE8 bug. This is very strange:
It turns out that the bug is triggered whenever the flash video lightbox overlaps an image which has been resized with css. If I either remove the css resize rule, or change the css width and height declarations to the actual dimensions of the image, the bug goes away.
Who knows what's causing this problem, but at least now I know not to resize images via CSS if I want my video lightbox to work in IE8.

PS- Torstein, it's no difference to me, but would you like me to set up a test page so you can see the problem that I'm talking about?
timd.mackey
 
Posts: 5
Joined: Tue Nov 24, 2009 8:54 pm

Re: Help With IE8 Javascript/Flash Bug

Postby torstein.honsi » Fri Nov 27, 2009 10:49 am

Now that you solved it it's okay. I'll keep this in mind if similar issues emerge in the future.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9181
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway


Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 8 guests