Hi All,
I knew it, you were wondering what jQuery tool we used across our site and how we customized it, right? Well, here’s one small way in how we added a bit to the core code.
While reading along in some of the forums (located here: http://www.ndoherty.com/blog/2007/10/29/coda-slider-11/), I noticed some are wanting an “auto-slide” feature for this thing (great job by the way Niall Doherty).
Here’s how you do it:
Modify the js code included in the page's header into this:
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.
//call every __ seconds
var autoSlide = setInterval(function()
{
$("#left-link").click();
}, 10000);
});
And change line 63 (i believe, or corresponding line of code) of coda.slider.1.1.1.js:
jQuery(this).before(”<div class=’stripNavL’ id=’stripNavL” + j + “‘><a href=’#’ id=’left-link’>Left</a><\/div>”);
And there you have it.
Feel free to check us out here where we may be hosting some cool developments.
Feel free to check us out here where we may be hosting some cool developments.
Hat's off to Niall Doherty and others who have put their efforts towards this sweet tool.
Hi,
Thanks for the great addition for the coda slide. I am trying to add a stop button to this but have a few hours of trial and error, I am stumped. I wrote a click function which ran: clearInterval(autoSlide);. I got the function to run but I could not get this to stop the auto-slide. Any help or suggestions would be greatly appreciated. Thanks in advance for your reply.
Hi JAS,
We’re glad to hear from you, though we apologize for the delay on our response! We’ve been busy with providing Magento development services lately.
I’d like to get an answer out to you right away, though unfortunately, it will have to wait until I can get away from the development work going on right now.
I’ll post as soon as I can.
Thanks,
Lee
By the way, I’d recommend having one button to use for both the stop and play functionality. You could use two functions within the onClick function available with jQuery. On click, you could kill the automatic interval (as you were trying above) – and then either via onChange or the onClick function again – refer to the setInterval() function.
Does this help in terms of direction?
Thanks for your inquiry!
– Lee
Hi,
Thanks for the reply. Upon your recommendation I have added a start link to the script. This works perfectly, however I still can’t get the stop button to work. I tested the stop function by adding an alert to it, which successfully proved the script is executing the stop function, just not stopping the rotation. Maybe you can see something I am missing in my code:
jQuery(window).bind(“load”, function() {
jQuery(“div#slider1”).codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
//call every __ seconds
$(“#start”).click(function()
{
var autoSlide = setInterval(function()
{
$(“#right-link”).click();
}, 1000);
});
$(“#stop”).click(function()
{
clearInterval(autoSlide);
});
});
Thanks in advance for your help, as a developer myself I know how busy work can be.
-JAS
Hi JAS, don’t know if you fixed your problem. It looks like your second ” after div#slider1 isn’t the correct character. I find that when I copy and paste from code examples the single quotes and the quotation marks are screwy. So just go into your Code and retype your quotation marks and it should work.
any luck on getting the stop autoplay on hoover to work yet?? I have played around with your suggestions with no luck. Regards, Jonathan
Am I the only one that can’t get this to work (slide automatically).
I have followed your instructions down to a tee but can’t make it happen 🙁
I have tried this over and over and it doesn’t work for me. Can someone point me to a coda slider with auto scroll?
Thanks!
Hi Denny and Sikwondo, maybe if you pointed us to some broken URL’s, we could take a look and help you 🙂
What’s not working?
Tony
I managed to get mine working, my problem was with the second part of the code, I completely replaced the //Create the Left and Right Arrows and //Create the Tabs to this:
// Create the Left and Right arrowsjQuery(this).before("Left");
jQuery(this).after("Right");
// Create the Tabs
jQuery(this).find("div.panel").each(function(n) {
jQuery("div#stripNav" + j + " ul").append("" + jQuery(this).attr("title") + "");
});
Thanks for suppying the code though guys, it’s cool that you let out some of your knowledge.
🙂
If you can’t get it working by modifying the coda.1.1.1.js
just leave that as is and use this code after you call your coda slider.
var autoSlide = setInterval(function() {
$(“#stripNavR0”).click();
}, 10000);
autoSlide;
});
I had to hack this away really quick due to crazy work deadlines here’s my simple solution. Could be much more elegant.
Since you are using a click() on an ID. I just change the ID when I hover over the slider (THATS WHAT I NEEDED). Then use a callback to change the ID back when I rollOut (Which continues the timer).
jQuery(window).bind(“load”, function() {
jQuery(“div#slider1”).codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
var status=0;
var autoSlide = setInterval(function() {
$(“#stripNavR0”).click();
}, 10000);
autoSlide;
$(‘.wrapper’).hover(function() {
//on hover find the button that is being triggered and rename it.
$(‘body’).find(‘div#stripNavR0’).attr({id: ‘tempName’});
},function() {
//When you roll out rename it back
$(‘body’).find(‘div#tempName’).attr({id: ‘stripNavR0’});
});
});
How would I get the timer to restart its count after someone clicks a tab?
(If someone is browsing through the different tabs, clicking them fairly frequently, it’s unlikely they would want it to be auto scrolling, pausing the slide-show upon hover would also achieve this)
I solved the problem I posed above.
This code will pause the slideshow when the mouse is over an area, and continue once the mouse has left that area:
var autoSlide;
function slideit() {
autoSlide = setInterval(function() {
$(“#right-link”).click();
}, 5000);
};
$(‘.stripNavL, .stripNavR, .stripNav, .stripViewer’).hover(function() {
clearInterval(autoSlide);
}, function() {
slideit();
});
slideit();
@stephen,
Thanks for adding into the community here with your posts! Great work, and we’re appreciative of your involvement. We apologize for not being able to respond directly, as times continue to keep us very busy – which we’re thankful for.
Nonetheless, we enjoy hearing from you.
All the best!
Lee
Thanks for the post, however the tips posted here does not seem to work on a wordpress theme called viewport. Viewport also uses the Coda Slider. When I follow the codes, the navigational buttons are disabled and the auto scroll does not work. Hope you can solve this problem on viewport. Thanks.
Stephan your solution worked for me! nothing else was working! Please everyone note: You must replace the apostrophes and quotation marks after you copy/paste the code! you are not pasting in proper quotation marks, but HTML accent characters.
Also note that EliasInc’s solution involves modifying the script and adding a id=’left-link’ into the left (a href) arrow. This causes the modified code to “click” the left arrow every X seconds. Personally I think this is unintuitive, as most sliders advance moving in the right direction, not left.
Stephan’s solution takes this into account without directly saying it. He has added id=’right-link’ in the (a href) right arrow portion of the code. Please keep that in mind…
Anthony, I’m happy it worked out for you. I love the slider with that addition.
Hi, I’m using Stephan’s April code but it doesn’t seem to work (see link)
http://www.yohomedia.co.uk/contact.php
Would it have anything to do with my using the coda-slider.1.1.1.pack.js scriptrather than coda-slider.1.1.1.js or is my header code just wrong :<
Thanks for the great resource!
Hey Joe,
I do load coda-slider.1.1.1.js. Your code looks good to me so its absence is probably the issue.
Hi,
Whn i was integrating the coda-slider 1.1.1 in jsp , it showing execption called object doesnot support this property or method in this line
” jQuery(“div#slider1″).codaSlider()”
hi i have tried alot with all the solution in this page and i am the second person who did not able to execute the code i replace the 63 line # as you said and also update the main page but no luck i need to deliver this code by tomorrow if you please upload some example that will be great
Hi Everyone,
I am having a nightmare with this coda slider, got everything working, got the auto slide working, but the script isn’t loading for some reason in Safari :/
If anyone could take a look and help me out I would be eternally grateful:
http://wiseup4work.org.uk/new/
If you scroll down and click on ‘See what our users have to say’ then two sliders should show up.
Many thanks
nice!! thanks heaps @stephan, worked great, adds a beautiful effect!
Hi,
I know that this post is old but I am using the Stephan’s script and I’m experiencing a problem.
Using that script after doing “hover out” the slide moves two times. The slideit() is executed twice, moving 2 posts almost on the same second.
Thank you.
I got the cod-slider with built-in auto-slide… i am a designer, not a programmer… and i can’t disable that function with my very basic knowledge of js 🙂
Thanks for the code, very helpful.
Hello, is this thread still being followed?
I am trying to add play and pause buttons to Niall Doherty’s coda-slider 2.0 here http://metaphorm.org/new3
by adding a pause button and turning the right arrow into a play button that will resume autoSlide and advance the frame one slide.
‘ Right arrow click
$(‘#coda-nav-right-‘ + sliderCount + ‘ a’).click(function(){
setTimeout(autoSlide,settings.autoSlideInterval);
});
‘
and adding a pause button
‘ $(‘#coda-nav-pause-‘ + sliderCount + ‘ a’).click(function(){
clearInterval(autoSlide); }); ‘
Any help would be much appreciated.
Hey all,
I’m trying to make the Elias Interactive slider pause when you click the LI buttons on bottom. ie. if you click button 2, it pauses on slider state 2.
Does anyone know how to do this?
Thanks much!
— Brian
I am trying to get this working on a site i’m working on and don’t seem to be having much luck, its the Viewport theme I am working with http://labs.paulicio.us/viewport/
Does anyone have any idea what I may be doing wrong?
I have tried editing both the page header to include the above coder after the following lines;
jQuery(window).bind(“load”, function() {
jQuery(“div#mid”).codaSlider()
and have also tried editing the coda-slider.1.1.1.js file.