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