jQuery Forum

Hi,

I'm using the jquery cycle plugin (awesome plugin btw) with scrollHorz to set up a carousel. The items in the carousel are flash elements. All looks good in IE7,8,9, Safari & Chrome but in FF3 on scroll the flash elements appear to flicker and bleed outside the parent div to the left.

I started out using ul/li, switched to using a div structure but it made no difference. If I slow down the speed of the transition, the flicker / bleed artefact is reduced but still there (and the slower speed is not acceptable).

Here is the html and the cycle call:

1. <div id="slideshow">
       <ul style="margin-left: 0px; position: relative; width: 570px; height: 139px; overflow: hidden;"
           id="slides">
           <li style="position: absolute; top: 0px; left: -570px; display: none; z-index: 3; opacity: 1;">
               <a href="/HandleBanner.aspx?id=1688" id="ctl00_MainFlashPanelCollection_Repeater1_ctl00_FlashFileControl_FlashLink">
                   <object width="570px" height="139px" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
                       classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ctl00_MainFlashPanelCollection_Repeater1_ctl00_FlashFileControl_TheObject">
                       <param value="/sample1.swf" name="movie">
                       <param value="high" name="quality">
                       <param value="transparent" name="wmode">
                       <embed width="570px" height="139px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
                           src="/sample1.swf"></object>
               </a>
           </li>
           <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1;
               width: 570px; height: 139px;"><a href="/HandleBanner.aspx?id=1686" id="ctl00_MainFlashPanelCollection_Repeater1_ctl01_FlashFileControl_FlashLink">
                   <object width="570px" height="139px" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
                       classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ctl00_MainFlashPanelCollection_Repeater1_ctl01_FlashFileControl_TheObject">
                       <param value="/sample2.swf" name="movie">
                       <param value="high" name="quality">
                       <param value="transparent" name="wmode">
                       <embed width="570px" height="139px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
                           src="/sample2.swf"></object></a> </li>
           <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1;"><a
               href="/HandleBanner.aspx?id=1525" id="ctl00_MainFlashPanelCollection_Repeater1_ctl02_FlashFileControl_FlashLink">
               <object width="570px" height="139px" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
                   classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ctl00_MainFlashPanelCollection_Repeater1_ctl02_FlashFileControl_TheObject">
                   <param value="/sample3.swf" name="movie">
                   <param value="high" name="quality">
                   <param value="transparent" name="wmode">
                   <embed width="570px" height="139px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
                       src="/sample3.swf"></object></a> </li>
       </ul>
       <div style="position: absolute; right: 0pt; top: 0px; z-index: 15; background-color: rgb(227, 221, 221);
           height: 139px; width: 13px; display: none;" id="next">
           <a href="javascript:void(0);">
               <img src="Common/images/rt.png" style="opacity: 0.75; padding-top: 54px;"></a>
       </div>
       <div style="position: absolute; left: 0pt; top: 0px; z-index: 15; background-color: rgb(227, 221, 221);
           height: 139px; width: 13px; display: none;" id="prev">
           <a href="javascript:void(0);">
               <img src="Common/images/lt.png" style="opacity: 0.75; padding-top: 54px;"></a>
       </div>
   </div>
   
   

and the cycle call:

1. $('#slides').cycle({
    fx: 'scrollHorz',
    speed: 6000,
    timeout: 100,
    next: '#next',
    prev: '#prev',
    pauseOnPagerHover: 1
    });
   

Thanks for any assistance.