How to assign multiple "next" buttons in jQuery Cycle

[k12onos]

Hi guys :)

I need a help here, I hope you don't mind :)

I am trying to implement this script below with a HTML form.


jQuery(document).ready(function($) {

$('#slideshow')

.cycle({

fx: 'scrollHorz',

speed: 1000,

next: '#slide_next',

prev: '#slide_prev',

timeout: 13000

});

});


I want to make it that each time the user choose a radio button answer, they will initiate href='#next' and the next slide will come in.

This is the code that I use now:


<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" onclick="location.href='#next'" />
<label for="question-1-answers-B">The answer is B</label>

But it doesn't work unless I change the id to id="slide_next" (obviously) AND it doesn't work when it has multiple [onclick="location.href='#next'"] in the same page.


I have to use the [id] tag for the <label> purpose, and at the same time I need to have multiple buttons with onclick="location.href='#next'" so that everytime user click any of the few radio buttons, it will move on to the next slide/question.


Is there any alternative for the below javascript?


next: '#slide_next',

prev: '#slide_prev',

One that don't need [id] tag and allow multiple links of href='#next' to work.


Thank you in advance, I would GREATLY appreciate your help :)

[jscheuer1]

Well, I don't think you need location.href = '#next', I'd try:


location.hash = '#next'

But you don't need even that unless you want it to appear in the addressbar. It's not required by the cycle script.

I tried this out and it worked:


jQuery(function($){
$('#slideshow').cycle({
fx: 'scrollHorz',
speed: 1000,
next: '#slide_next',
prev: '#slide_prev',
timeout: 13000
});
$('.nexter').click(function(){
$('#slide_next').trigger('click');
location.hash = '#next';
});
});

Then in the body I have the markup for the images, then a separate div later:


<div><a id="slide_next" href="#"></a><form action="">
<input class="nexter" type="radio" name="choice" value="">
<input class="nexter" type="radio" name="choice" value="">
<input class="nexter" type="radio" name="choice" value="">
<input class="nexter" type="radio" name="choice" value=""> </form>
</div>

And, as I say, you don't need the location.hash line (highlighted in the above) for the script to work. But you can keep it if you like. It shouldn't hurt anything unless you have a named anchor on the page named 'next' or a hash change or other script that might react to it. And even that would be OK, if it reacts by doing something you want it to do.

[k12onos]

Hi, I tried it out and it worked! Thanks a lot! I really really appreciate your help :)