How do I control the direction of the scroll on my coda slider?
- by lightingwrist
Hello, I have a coda slider and am unable to determine the direction of the scroll. I have 3 panels that I want to scroll left to right. Sometimes it scrolls left to right, sometimes up and down, and sometimes horizontally.
How do I lock it down to go the direction I want?
Here is the HTML:
<body>
<div id="slider_home" class="round_10px">
<ul class="navigation_home">
<li><a href="#scroll_Parents" class="round_10px">Information For Parents</a></li>
<li><a href="#scroll_Materials" class="round_10px">Print Materials</a></li>
<li><a href="#scroll_Resources" class="round_10px">Online Resources</a></li>
</ul>
<div id="scroll_bg_home">
<div class="scroll_home">
<div class="scrollContainer_home">
<div class="panel_home" id="scroll_Parents">
content
</div>
<div class="panel_home" id="scroll_Materials">
content
</div>
<div class="panel_home" id="scroll_Resources">
content
</div>
</div>
</div>
</div>
</div>
</body>
Here is the CSS:
#wrapper {width:550px;margin:0px auto;}
#intro {padding-bottom:10px;}
h2 {margin:0;margin-bottom:14px;padding:0;}
#slider {width:631px;margin:10px auto 0px auto;position:relative;}
#scroll_bg{height:360px;width:590px;overflow:hidden;position:relative;clear:left;background:#FFFFFF url(images/) no-repeat; margin:0px auto 0px auto}
.scroll{ background:transparent; width:550px; height:370px; padding:0px; margin:0px auto; overflow:hidden; }
.scrollContainer div.panel {padding:20px 0px;height:330px; width:550px;margin:0px;float:left;}
#shade {background:#EDEDEC url(images/shade.jpg) no-repeat 0 0;height:50px;}
ul.navigation {list-style:none;margin:0px 0px 0px 23px;padding:0px;padding-bottom:0px;}
ul.navigation li {display:inline; margin-right:5px;}
ul.navigation li a { background:#FFFFFF;font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#CCCCCC;padding:5px 5px 5px 5px;border:1px #F4F4F4 solid;text-decoration: none;}
ul.navigation a:hover { color:#EDEDEC;border:1px #E6E6E6 solid;}
ul.navigation a.selected {color:#333333;}
ul.navigation a:focus {outline:none;}
.scrollButtons {position:absolute;top:150px;cursor:pointer;}
.scrollButtons.left {left:-37px;top:20px}
.scrollButtons.right {right:-32px;top:20px;}
.hide {display:none;}
And here is the Jquery includes file:
// when the DOM is ready...
$(document).ready(function () {
var $panels = $('#slider_home .scrollContainer_home > div.panel_home');
var $container = $('#slider_home .scrollContainer_home');
// if true, 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_bg = $('#scroll_bg_home');
var $scroll = $('#slider_home .scroll_home').css('overflow', 'hidden');
// apply our left + right buttons
$scroll_bg
.before('<img class="scrollButtons_home left" src="styles/images/BackFlip.jpg" />')
.after('<img class="scrollButtons_home right" src="styles/images/flipForward.jpg" />');
// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('.navigation_home').find('a').click(selectNav);
// go find the navigation link that has this target and select the nav
function trigger(data) {
var el = $('.navigation_home').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('.navigation_home 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_home 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_home').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);
});
