PDA

View Full Version : Can Step Carousel be used in a 'Responsive' design?



samsen
12-02-2012, 10:57 PM
1) Script Title: Step Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

I am a relative JQuery Noob, and I am having difficulty understanding why StepCarousel has to be initiated BEFORE the

$(document).ready(function() {}

The pages on the site I am working on http://oti3.com are being developed to be 'responsive'. To that I need to be able to resize the web page based on the current window size. If you resize the browser window on http://oti3.com, you will see the elements inside it resize to fit the page.

I am using the Dynamic jquery.treeview.js in combination with the stepcarousel.js to be able to select any of a couple of a hundred slides. I have all that working, but to figure out how to make the step carousel 'responsive' is being a challenge.

I am able to resize the div containing the treeview, no problem... but can't seem to change the .stepcarousel values after the initial page load.

The only time I seem to be able to access the values to set the panel sizes is in the static .css ahead of $(document).ready(function() {}. And I can't access the .stepcarousel .css with JQuery before the $(document).ready(function() {}, yet stepcarousel.setup({}) reads the values it needs (from the static .css) to set the panel sizes during it's initialization process.

If I put the the stepcarousel.setup({}) inside of the $(document).ready(function() {} (so that I can do some calculations to set the panel size(s) ) it doesn't load and I am not clear why.

Any suggestions you might have would be awesome.

Update:

I can now control the slide size on the initial page load.

After having a closer look at stepcarousel.js I was able to isolate the issue (though being a noob, I can't say I grasp why). In stepcarousel.setup({}); it appears that the author needed to ensure that the div containing the carousel be guaranteed to include the css overflow: hidden, which may reuire that it be set before for page starts to load. Plus there needed to be be a cleanup process set on an 'unload'.

To implement the above requirements, the stepcarousel.setup() function already has the $(document).ready(function($) incorporated. In my initial attempts to set the CSS, it appears that I created a situation that Javascript doesn't handle, namely:

$(document).ready(function($) {
....
$(document).ready(function($) {
...
}
....
}

Thus to be able to make the carousel 'responsive' to whatever the current window size is, requires that instead of calling stepcarousel.setup({}); from within my web page's $(document).ready(function($) {}; that stepcarousel.init() be called from within my $(document).ready(function($) {} instead. And the processes that are being executed inside of stepcarousel.setup({}} be implemented with my webpage's (singular) $(document).ready(function($) {}

When I get things cleaned up, I will provide a link to the webpage that shows the changes that allowed the carousel panels to resize dynamically.