yourbudweiser
asked on
Automatic Scrolling with Coda Slider
I am using an older version of Coda Slider which I have working perfectly except that I would like to add automatic panel scrolling. Please review the coda-slider.js file and help me out with this.
<script src="jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.5.js" type="text/javascript"></script>
<script src="jquery.serialScroll-1.2.1.js" type="text/javascript"></script>
<script src="coda-slider.js" type="text/javascript"></script>
--------------------
// 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="assets/images/scroll_left.png" />')
// .after('<img class="scrollButtons right" src="assets/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);
});
ASKER
thanks for replying. I saw that sample but I am not using version 1.1.1 and i'd have to make too many changes to implement this version. The version I use doesn't have any script in the html page.
Any idea how to incorporate this with the code I displayed?
Any idea how to incorporate this with the code I displayed?
not without looking at an example of what you have. Put a public test page somewhere and I'll gladly take a look.
ASKER
ASKER
any chance to look at this yet?
>>any chance to look at this yet?
actually yes. This is what I got:
actually yes. This is what I got:
<script type="text/javascript">
var DELAY=3000;
var TIMER=null;
$(function(){
$("a.button:eq(0)").addClass("selected");
TIMER = setTimeout(adv,DELAY);
});
function adv(){
var current= $("a.selected:eq(0)");
current.removeClass("selected");
if(current.next().html()==null )
{
$("a.button:eq(0)").addClass("selected");
}
else
{
current.next().addClass("selected");
}
location.hash=$("a.selected:eq(0)").attr("href");
TIMER=setTimeout(adv,DELAY);
}
</script>
ASKER
almost there but instead of scrolling, the next banner just pops in. Can it be modified so that the banner actually scrolls?
Thanks!
Thanks!
save this as test.html and try it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><base href="http://www.weiserwebworld.com/slider/"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="assets/css/slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.2.6.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> -->
<script src="assets/js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="assets/js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var DELAY=3000;
var TIMER=null;
$(function(){
$("a.button:eq(0)").addClass("selected");
TIMER = setTimeout(adv,DELAY);
});
function adv(){
var current= $("a.selected:eq(0)");
current.removeClass("selected");
if(current.next().html()==null )
{
$("a.button:eq(0)").addClass("selected");
}
else
{
current.next().addClass("selected");
}
//location.hash=$("a.selected:eq(0)").attr("href");
$("a.selected:eq(0)").click();
TIMER=setTimeout(adv,DELAY);
}
</script>
</head>
<body>
<div id="slider" style="border-top:1px white solid;">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="panel1">
<img src="assets/images/slider/banner1.jpg" style="float: right;" alt="" />
</div>
<div class="panel" id="panel2">
<img src="assets/images/slider/banner2.jpg" style="float: right;" alt="" />
</div>
<div class="panel" id="panel3">
<img src="assets/images/slider/banner3.jpg" style="float: right;" alt="" />
</div>
<div class="panel" id="panel4">
<img src="assets/images/slider/banner4.jpg" style="float: right;" alt="" />
</div>
</div>
<!-- <img src="#" class="next" style="" alt=""> -->
</div>
<div class="navigation" style="padding:10px 10px;border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee;width:928px;">
<a class="button" href="#panel1">Banner 1</a>
<a class="button" href="#panel2">Banner 2</a>
<a class="button" href="#panel3">Banner 3</a>
<a class="button" href="#panel4">Banner 4</a>
</div>
</div>
<div id="debug"></div>
</body>
</html>
ASKER
as is, you're mods work great! While I was waiting for you to reply, I had to modify my code from:
<div class="navigation" style="padding:10px 10px;border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee;width:928px;">
<a class="button" href="#panel1">Banner 1</a>
<a class="button" href="#panel2">Banner 2</a>
<a class="button" href="#panel3">Banner 3</a>
<a class="button" href="#panel4">Banner 4</a>
</div>
to this
<div class="buttons">
<ul class="cssmenu">
<li class="overview"><a href="#panel1" title="Overview" class="selected" id="overview"><span class="displace"></span></ a></li>
<li class="gold"><a href="#panel2" title="Gold Package" onclick="removeClass('over view');">< span class="displace"></span></ a></li>
<li class="silver"><a href="#panel3" title="Silver Package" onclick="removeClass('over view');">< span class="displace"></span></ a></li>
<li class="lite"><a href="#panel4" title="Lite Package" onclick="removeClass('over view');">< span class="displace"></span></ a></li>
<li class="signup"><a href="#" title="Sign Up Now!" onclick="removeClass('over view');">< span class="displace"></span></ a></li>
</ul>
</div>
Can you please go over and modify to work with my current code?
<div class="navigation" style="padding:10px 10px;border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee;width:928px;">
<a class="button" href="#panel1">Banner 1</a>
<a class="button" href="#panel2">Banner 2</a>
<a class="button" href="#panel3">Banner 3</a>
<a class="button" href="#panel4">Banner 4</a>
</div>
to this
<div class="buttons">
<ul class="cssmenu">
<li class="overview"><a href="#panel1" title="Overview" class="selected" id="overview"><span class="displace"></span></
<li class="gold"><a href="#panel2" title="Gold Package" onclick="removeClass('over
<li class="silver"><a href="#panel3" title="Silver Package" onclick="removeClass('over
<li class="lite"><a href="#panel4" title="Lite Package" onclick="removeClass('over
<li class="signup"><a href="#" title="Sign Up Now!" onclick="removeClass('over
</ul>
</div>
Can you please go over and modify to work with my current code?
ASKER
I am increasing the points for the extra effort. thanks!
ASKER
any further updated for this hielo? Could really use the help... thanks!
Post your new test link. The one above has the old markup. You need to provide a test page with the working sllider and I will see if i can accommodate the auto-scrolling.
FYI: I "accidentally" saw this post while searching for something else. I don't follow the emails sent by this site, and if you look at the volume of questions I've answered since you posted this, you will see how easily it is for me to loose track of these questions, especially when I have posted solutions that actually SOLVED the ORIGINAL problem. In the future, close old problems and open new ones if you want me to follow up. I'll check on this later.
Regards.
FYI: I "accidentally" saw this post while searching for something else. I don't follow the emails sent by this site, and if you look at the volume of questions I've answered since you posted this, you will see how easily it is for me to loose track of these questions, especially when I have posted solutions that actually SOLVED the ORIGINAL problem. In the future, close old problems and open new ones if you want me to follow up. I'll check on this later.
Regards.
ASKER
Thanks again for replying, the new test page is up at the same address:
http://www.weiserwebworld.com/slider/
Sorry for the double question.
http://www.weiserwebworld.com/slider/
Sorry for the double question.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Grea! Thanks for sticking with it.
http://www.ndoherty.com/demos/coda-slider/1.1.1/#3
and update/modify:
Open in new window