Step Carousel Viewer in Responsive Design

[Paramasivan]

1) Script Title: Step Carousel Viewer v1.9

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

3) Describe problem:

Please see http://pfitr.net/frontend/demo-videos.html

I have included the script for the videos in responsive site. On the desktop when the browser is resized from full width to minimum width say 340 px then it is not showing all the contents by clicking the navigation arrow. Right now there are 5 and it is showing upto 3 only when the browser is resized. I cleared the cache and refreshed the page also.

CSS:


.stepcarousel{
position: relative;
overflow: scroll;
width: 100%;
height: 230px;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px;
width: 250px;
}
@media only screen and (min-width: 420px) {
.stepcarousel .panel {
margin:10px 25px;
width:280px;
}
}

Any help is appreciated.

Thank you,

[jscheuer1]

.

First - Backup everything we are about to change, just in case. (the page, the styles.css file, the js/demo-video-page.js file, the stepcarousel.js file)

OK, at that narrow of a window width, you are going to need the panel divs even narrower than 250px in order to fit all of them in (style.css around line #1753 changes highlighted):


.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 8px; /*margin around each panel*/
width: 170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}



And of course you're right about needing to refresh the page in order to recalculate the the left and right nav movement, and belt size - Unless we modify the script a little and add some code to the page. This version of the script (right click and 'Save As'):

5186

allows you to reinitialize the panels, belt and default back and forth nav on resize (the nav already does that actually). Use it in place of your current version.

Finally, add this to the end of the js/demo-video-page.js file:


jQuery(function($){
$(window).resize(function(){
$.each(stepcarousel.configholder, function(i, c){
stepcarousel.alignpanels($, c, true);
});
});
});



The browser cache may need to be cleared and/or the page refreshed to see changes.

For others who might want to try this, that code goes after the last stepcarousel.setup call for the page. In this particular case, that happens to be in the external js/demo-video-page.js file. For a typical installation, it's in the head of the page in an internal script block.

[Paramasivan]

G.M.

Thank you very much.