[jQuery] Cycle Plugin Adds Relative Position to Slideshow Container
I'm using Cycle in a number of places on my site, but I'm having an
issue with absolute placement in WebKit browsers (Safari & Chrome).
My site is available here:
http://derekperkins.com/seatability/super-product-page/
My issue is that in Firefox, IE and Opera, Cycle adds in some inline
style elements (overflow:hidden), but in WebKit, it also adds
(position:relative). Why would it be doing that only in those
browsers?
Here is the CSS and the Javascript for my top level Cycle container.
#slideshow {
position:absolute;
width:240px;
height:240px;
right: 15px;
bottom:75px;
}
jQuery(document).ready(jQuery('#slideshow').after('<ul
id="cycle_nav">').cycle({
fx: 'uncover',
speed: 'slow',
timeout: 0,
pager: '#cycle_nav',
direction: 'down',
timeout: 8000,
prev: '#slidePrev',
next: '#slideNext',
fit: 1,
containerResize: 0,
// callback fn that creates a thumbnail to use as pager
anchor
pagerAnchorBuilder: function(idx, slide) {
if(jQuery.browser.msie) {
return '<li><a class="thumbnav" href="#"><img src="' +
slide.childNodes[0].src + '" /></a></li>'; }
else {
return '<li><a class="thumbnav" href="#"><img src="' +
slide.childNodes[1].src + '" /></a></li>'; }
}
}));