Link to home
Start Free TrialLog in
Avatar of yourbudweiser
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);
 
});

Open in new window

Avatar of hielo
hielo
Flag of Wallis and Futuna image

I don't know what your actual markup looks like, but if you take the source code of this demo:
http://www.ndoherty.com/demos/coda-slider/1.1.1/#3

and update/modify:
	<script type="text/javascript">
		jQuery(window).bind("load", function() {
			jQuery("div#slider1").codaSlider()
			// jQuery("div#slider2").codaSlider()
			// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
			
		});
	</script>
 
to this:
	<script type="text/javascript">
		jQuery(window).bind("load", function() {
			jQuery("div#slider1").codaSlider()
			// jQuery("div#slider2").codaSlider()
			// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
			
			setInterval(function(){$(".stripNavR a").click()}, 5000);
		});
	</script>
 
it will auto scroll every 5 seconds.

Open in new window

Avatar of yourbudweiser
yourbudweiser

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?
not without looking at an example of what you have. Put a public test page somewhere and I'll gladly take a look.
Hi hielo, here's the sample page:

http://www.weiserwebworld.com/slider/

Thanks!
any chance to look at this yet?
>>any chance to look at this yet?
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>

Open in new window

almost there but instead of scrolling, the next banner just pops in. Can it be modified so that the banner actually scrolls?

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>

Open in new window

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('overview');"><span class="displace"></span></a></li>
                          <li class="silver"><a href="#panel3" title="Silver Package" onclick="removeClass('overview');"><span class="displace"></span></a></li>
                          <li class="lite"><a href="#panel4" title="Lite Package" onclick="removeClass('overview');"><span class="displace"></span></a></li>
                          <li class="signup"><a href="#" title="Sign Up Now!" onclick="removeClass('overview');"><span class="displace"></span></a></li>
                    </ul>
                </div>

Can you please go over and modify to work with my current code?
I am increasing the points for the extra effort. thanks!
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.
Thanks again for replying, the new test page is up at the same address:

http://www.weiserwebworld.com/slider/

Sorry for the double question.
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Grea! Thanks for sticking with it.