Results 1 to 1 of 1

Thread: Can Step Carousel be used in a 'Responsive' design?

  1. #1
    Join Date
    Dec 2012
    Thanked 0 Times in 0 Posts

    Question Can Step Carousel be used in a 'Responsive' design?

    1) Script Title: Step Carousel

    2) Script URL (on DD):

    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 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, 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.


    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.
    Last edited by samsen; 12-03-2012 at 04:35 AM. Reason: I have found an initial solution

Similar Threads

  1. How to get Swiss Army Slideshow in Responsive Design ?
    By jacopogio in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-18-2012, 04:00 PM
  2. Step Carousel - Starting the carousel with a Panel id
    By kylu in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-18-2012, 11:09 PM
  3. Responsive script for carousel
    By veeps in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-11-2012, 04:58 PM
  4. Step Carousel...isnt much of a carousel
    By ttados in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-28-2010, 09:45 PM
  5. loading Step Carousel Viewer in middle of carousel
    By sam4682 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-31-2008, 10:07 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts