Need help on Coda slider tabs to move inside an overflow:hidden div
- by Reden
I'm not too good at javascript. and hope I can get a bit of help. I'm using Coda Slider 2.0, and have designed it to where the tabs are another slider to the right of the main slider, and each item. Basically like this mootools plugin http://landofcoder.com/demo/mootool/lofslidernews/index2.1.html
Problem is the items will not scroll. How do I make the items (or tabs to the right) scroll down as the slider rotates? Otherwise the slider will show the 4th slide but not scroll to the 4th item on the right, but Thanks everyone.
Here is the Coda-Slider plugin:
// when the DOM is ready...
$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;
// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow is hidden
});
// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
}
// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="images/scroll_left.png" />')
.after('<img class="scrollButtons right" src="images/scroll_right.png" />');
// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#slider .navigation').find('a').click(selectNav);
// go find the navigation link that has this target and select the nav
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}
// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset. Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll, // the element that has the overflow
// can be a selector which will be relative to the target
items: $panels,
navigation: '.navigation a',
// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',
// allow the scroll effect to run both directions
axis: 'xy',
onAfter: trigger, // our final callback
offset: offset,
// duration of the sliding effect
duration: 500,
// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};
// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);
// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);
// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load. We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
///////////////////////////////////////////////
// autoscroll
///////////////////////////////////////////////
// start to automatically cycle the tabs
cycleTimer = setInterval(function () {
$scroll.trigger('next');
}, 2000); // how many milliseconds, change this to whatever you like
// select some trigger elements to stop the auto-cycle
var $stopTriggers = $('#slider .navigation').find('a') // tab headers
.add('.scroll') // panel itself
.add('.stopscroll') // links to the stop class div
.add('.navigation') // links to navigation id for tabs
.add("a[href^='#']"); // links to a tab
// this is the function that will stop the auto-cycle
function stopCycle() {
// remove the no longer needed stop triggers
clearInterval(cycleTimer); // stop the auto-cycle itself
$buttons.show(); // show the navigation buttons
document.getElementById('stopscroll').style.display='none'; // hide the stop div
document.getElementById('startscroll').style.display='block'; // block the start div
}
// bind stop cycle function to the click event using namespaces
$stopTriggers.bind('click.cycle', stopCycle);
///////////////////////////////////////////////
// end autoscroll
///////////////////////////////////////////////
// edit to start again
///////////////////////////////////////////////
// select some trigger elements to stop the auto-cycle
var $startTriggers_start = $('#slider .navigation').find('a') // tab headers
.add('.startscroll'); // links to the start class div
// this is the function that will stop the auto-cycle
function startCycle() {
// remove the no longer needed stop triggers
$buttons.hide(); // show the navigation buttons
$scroll.trigger('next'); // directly to the next first
cycleTimer = setInterval(function () { // now set timer again
$scroll.trigger('next');
}, 5000); // how many milliseconds, change this to whatever you like
document.getElementById('stopscroll').style.display='block'; // block the stop div
document.getElementById('startscroll').style.display='none'; // hide the start div
}
// bind stop cycle function to the click event using namespaces
$startTriggers_start.bind('click.cycle', startCycle);
///////////////////////////////////////////////
// end edit to start
///////////////////////////////////////////////
});
