Stop jQuery loop from adjusting height and width of containers

I am using jQuery Cycle plugin. This page is here:

http://harrisonfjord.com/folio/test.html

The menu on the left controls the content in the middle of the page using the Cycle plugin. Pretty simple. However, the loop adds a bunch of styles to the sliders:

<div class="adSlideBox" id="asics" style="position: absolute; z-index: 8; top: 0px; left: 0px; display: block; width: 1020px; opacity: 1; "> 

Suitable code is the width attribute, which is set; I am creating a website based on a liquid layout, and the images are designed to resize when the window is resized. Everything works fine until Cycle adds this filthy width rule to each of my slides!

How can I make it stop doing this? I tried using containerResize: 0, , but to no avail. Here's the jQuery call:

 $('#adSlideshow').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#menu', containerResize: 0, pagerAnchorBuilder: function(idx, slide) { // return selector string for existing anchor return '#menu li:eq(' + idx + ') a'; } }); 

I am using the full version of the loop, by the way, so switching the containerResize parameter SHOULD work, but not. Thoughts?

Is it possible to go into the cycle.js code and just delete this part of the function?

EDIT: ignore the fact that the right-hand menu behaves strangely when resizing the page, it is actually intended to sit at the bottom, but I edited the rest of the code for simplicity on this test site.

+7
source share
1 answer

use slideResize: 0 in addition to containerResize: 0

+10
source

All Articles