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:
- <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:
- $('#slides').cycle({
fx: 'scrollHorz',
speed: 6000,
timeout: 100,
next: '#next',
prev: '#prev',
pauseOnPagerHover: 1
});
Thanks for any assistance.