I have two lists of divs that I wish to navigate through with buttons (up, down, left, right). Each time a button is pressed, the result div in my html gets replaced with the "current" div. As such, I have a horizontal and vertical list. The horizontal navigation works perfectly but when I click my down button, my vertical list returns an index of -1 and nothing is displayed. Here is my code:
$(document).ready(function(){
//this creates the lists of divs
var $list = $(".slides > div");
var $vlist = $(".yslides > div");
//this initializes the index tracking values horizontal
//and vertical
var $hcurrent = 0;
var $vcurrent = 0;
//this is because I kept getting console undefined errors
if (typeof console == "undefined") {
window.console = {
log: function () {}
};
}
/*
R I G H T B U T T O N
*/
$("#right").click(function(){
//this removes the current indexed div
//and sets the the current index as next
var $next = $list.filter(".current").removeClass('current').next();
//this is for wrap around
//if this hits the max value of horizontal indexes it wraps around
if(!$next.length){
$next = $list.first()
}
//this adds the next div
$next.addClass('current');
//this outputs the div to the "result" div
$("#result").html('').append($next.clone());
//this tracks and updates the horizontal index
$hcurrent = $list.index($(".current"));
//this is for the undefined error, again
if (typeof console == "undefined") {
window.console = {
log: function () {}
};
}
//this is the console out put, tracks the current horizontal index,
horizontal list length(number of indexes, active flag
//current veritical idex, and vertical list length
console.log("Right Pressed. " , "hc: ",$hcurrent, "hi: ",$list.length,
$active, "vc: ", $vcurrent,"vi: ",$vlist.length);
});
/*
L E F T B U T T O N
*/
$("#left").click(function(){
//this removes the current indexed div
//and sets the the current index as the Previous element
var $next = $list.filter(".current").removeClass('current').prev();
//this adds the previous class to $next
$next.addClass('current');
//this appends the previous index/class to result
$("#result").html('').append($next.clone());
//tracks current horizontal index
$hcurrent = $list.index($(".current"));
//active flag controls
if (($hcurrent != 0) && ($hcurrent % 2 == 0) ){
$active = true;
}
else{
$active = false;
}
//undefined console error checking
if (typeof console == "undefined") {
window.console = {
log: function () {}
};
}
console.log("Left Pressed. " , "hc: ",$hcurrent, "hi: ",$list.length, $active, "vc: ", $vcurrent,"vi: ",$vlist.length);
});
/*
D O W N B U T T O N
*/
$("#down").click(function(){
//this removes the current indexed div
//and sets the the current index as the Previous element
var $next = $vlist.filter(".current").removeClass('current').next();
//this adds the previous class to $next
$next.addClass('current');
alert("added the class");
//this appends the previous index/class to result
$("#result").html('').append($next.clone());
//tracks current horizontal index
$hcurrent = $list.index($(".current"));
//active flag controls
if (($hcurrent != 0) && ($hcurrent % 2 == 0) ){
$active = true;
}
else{
$active = false;
}
//undefined console error checking
if (typeof console == "undefined") {
window.console = {
log: function () {}
};
}
console.log("Left Pressed. " , "hc: ",$hcurrent, "hi: ",$list.length, $active, "vc: ", $vcurrent,"vi: ",$vlist.length);
});
});
Related
this is a jquery/ javascript problem.
So I have an array that contains button numbers and outputs those buttons onto a button which will result in the button being clicked. The problem is that all the buttons get clicked at once if I run the loop. Instead I want it to output the numbers with a delay so that the buttons will be pressed after a 1 second delay.
Here is the link to the Simon game project:
https://codepen.io/roger1891/full/vmYqwx/
The problem is visible after following the 1st button. After that, the computer will press the next 2 buttons at the same time instead of pressing them separately after a 1 sec delay.
The problem is located in this loop which is located in the myloop() function:
sequenceArray.forEach(function(item, index, array){
//click button by getting the last index of the array
//$("#btn-"+array[array.length-1]).click();
$("#btn-"+array[index]).click();
console.log(array);
});
This is the full code:
//associating buttons to sound
var soundButton = function(buttonId, soundId) {
$("#" + buttonId).click(function(){
$("#" + soundId).get(0).play();
$("#" + buttonId).css("opacity", "0.5");
setTimeout( function(){
$("#" + buttonId).css("opacity", "1");
},500);
if(currentPlayerTurn == "human") {
var $input = $(this);
var attrString = $input.attr("id");
//only get number from id attribute
var strNum = attrString.replace( /^\D+/g, '');
//convert theNumber from string to number
var theNum = parseInt(strNum);
playerArray.push(theNum);
console.log(theNum);
console.log(playerArray);
}
});
};
function myLoop() {
setInterval( function(){
if(gameWon == false && onGoingGame == true && currentPlayerTurn == "computer" && score < 5) {
//increment score
score++;
//append to score id
$("#score").empty().append(score);
//create random number
randomNumber = Math.floor((Math.random()*4) + 1);
//push random number into array
sequenceArray.push(randomNumber);
//loop through array
sequenceArray.forEach(function(item, index, array){
//click button by getting the last index of the array
//$("#btn-"+array[array.length-1]).click();
$("#btn-"+array[index]).click();
console.log(array);
});
currentRound = sequenceArray.length;
onGoingGame = false;
currentPlayerTurn = "human";
}
if(currentPlayerTurn == "human") {
var is_same = playerArray.length == sequenceArray.length && playerArray.every(function(element, index) {
return element === sequenceArray[index];
});
is_same;
console.log(is_same);
if(is_same == true) {
playerArray = [];
onGoingGame = true;
currentPlayerTurn = "computer";
}
}
},1000);
}
myLoop();
Thank you in advance for your help.
Since you want to trigger the buttons one by one, your setTimeout() should be inside the loop. Be mindful of the index, since this is async.
sequenceArray.forEach(function(item, index, array) {
// set a timeout so each second one button gets clicked
setTimeout( (function( index ) {
// use a closure here so that our index values stay correct.
return function() {
$("#btn-"+array[index]).click();
};
}( index )), (1000 * index) );
});
edit: replaced the fixed 1000ms delay to delay * index
You need to console.log(item) instead of full array in forEach loop
I have svg text fill which is dynamic. once the user click undo button it must undo the svg and textarea and once the user click redo button it should redo the svg text fill and textarea. i have completed with the textarea undo and redo functionality but not with svg element how to achieve this through jquery
$("#enter-text").on("keypress",function(){
$("#svg_id").html($(this).val());
})
//this value is kept small for testing purposes, you'd probably want to use sth. between 50 and 200
const stackSize = 10;
//left and right define the first and last "index" you can actually navigate to, a frame with maximum stackSize-1 items between them.
//These values are continually growing as you push new states to the stack, so that the index has to be clamped to the actual index in stack by %stackSize.
var stack = Array(stackSize), left=0, right=0, index = 0, timeout;
//push the first state to the stack, usually an empty string, but not necessarily
stack[0] = $("#enter-text").val();
updateButtons();
$("#enter-text").on("keydown keyup change", detachedUpdateText);
$("#undo").on("click", undo);
$("#redo").on("click", redo);
//detach update
function detachedUpdateText(){
clearTimeout(timeout);
timeout = setTimeout(updateText, 500);
}
function updateButtons(){
//disable buttons if the index reaches the respective border of the frame
//write the amount of steps availabe in each direction into the data- count attribute, to be processed by css
$("#undo")
.prop("disabled", index === left)
.attr("data-count", index-left);
$("#redo")
.prop("disabled", index === right)
.attr("data-count", right-index);
//show status
$("#stat").html(JSON.stringify({
left,
right,
index,
"index in stack": index % stackSize,
stack
}, null, 4))
}
function updateText(){
var val = $("#enter-text").val().trimRight();
//skip if nothing really changed
if(val === stack[index % stackSize]) return;
//add value
stack[++index % stackSize] = val;
//clean the undo-part of the stack
while(right > index)
stack[right-- % stackSize] = null;
//update boundaries
right = index;
left = Math.max(left, right+1-stackSize);
updateButtons();
}
function undo(){
if(index > left){
$("#enter-text").val(stack[--index % stackSize]);
updateButtons();
}
}
function redo(){
if(index < right){
$("#enter-text").val(stack[++index % stackSize]);
updateButtons();
}
}
https://jsfiddle.net/yvp3jedr/6/
$("#enter-text").on("keypress", function () {
$("#svg_id").text($(this).val());
})
//this value is kept small for testing purposes, you'd probably want to use sth. between 50 and 200
const stackSize = 10;
//left and right define the first and last "index" you can actually navigate to, a frame with maximum stackSize-1 items between them.
//These values are continually growing as you push new states to the stack, so that the index has to be clamped to the actual index in stack by %stackSize.
var stack = Array(stackSize), left = 0, right = 0, index = 0, timeout;
//push the first state to the stack, usually an empty string, but not necessarily
stack[0] = $("#enter-text").val();
updateButtons();
$("#enter-text").on("keydown keyup change", detachedUpdateText);
$("#undo").on("click", undo);
$("#redo").on("click", redo);
//detach update
function detachedUpdateText() {
clearTimeout(timeout);
timeout = setTimeout(updateText, 500);
}
function updateButtons() {
//disable buttons if the index reaches the respective border of the frame
//write the amount of steps availabe in each direction into the data-count attribute, to be processed by css
$("#undo")
.prop("disabled", index === left)
.attr("data-count", index - left);
$("#redo")
.prop("disabled", index === right)
.attr("data-count", right - index);
//show status
$("#stat").html(JSON.stringify({
left,
right,
index,
"index in stack": index % stackSize,
stack
}, null, 4))
}
function updateText() {
var val = $("#enter-text").val().trimRight();
//skip if nothing really changed
if (val === stack[index % stackSize]) return;
//add value
stack[++index % stackSize] = val;
//clean the undo-part of the stack
while (right > index)
stack[right-- % stackSize] = null;
//update boundaries
right = index;
left = Math.max(left, right + 1 - stackSize);
updateButtons();
}
function undo() {
if (index > left) {
var text = stack[--index % stackSize];
$("#enter-text").val(text);
$("#svg_id").text(text);
updateButtons();
}
}
function redo() {
if (index < right) {
var text = stack[++index % stackSize];
$("#enter-text").val(text);
$("#svg_id").text(text);
updateButtons();
}
}
So I took this code from this website. I don't want to have all the fields being required. Like, let's say, full middle name. I want that field to be optional (hence, not affecting the function for checking which fields have error). How can I do it?
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
current position of fieldset / navigation link
*/
var current = 1;
/*
sum and save the widths of each one of the fieldsets
set the final sum as the total width of the steps element
*/
var stepsWidth = 0;
var widths = new Array();
$('#steps .step').each(function(i){
var $step = $(this);
widths[i] = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
when clicking on a navigation link
the form slides to the corresponding fieldset
*/
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
we store the position of the link
in the current variable
*/
current = $this.parent().index() + 1;
/*
animate / slide to the next or to the corresponding
fieldset. The order of the links in the navigation
is the order of the fieldsets.
Also, after sliding, we trigger the focus on the first
input element of the new fieldset
If we clicked on the last link (confirmation), then we validate
all the fieldsets, otherwise we validate the previous one
before the form slided
*/
$('#steps').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
});
e.preventDefault();
});
/*
clicking on the tab (on the last input of each fieldset), makes the form
slide to the next step
*/
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
validates errors on all the fieldsets
records if the Form has errors in $('#formElem').data()
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){
var error = validateStep(i);
if(error == -1)
FormErrors = true;
}
$('#formElem').data('errors',FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateSteps(){
var FormErrors = false;
for(var i = 1; i < fieldsetCount; ++i){
var error = validateStep(i);
if(error == -1)
FormErrors = true;
}
$('#formElem').data('errors',FormErrors);
}
/*
validates one fieldset
and returns -1 if errors found, or 1 if not
*/
function validateStep(step){
if(step == fieldsetCount) return;
var error = 1;
var hasError = false;
$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
var $this = $(this);
var valueLength = jQuery.trim($this.val()).length;
if(valueLength == '')
{
hasError = true;
$this.css('background-color','red');
}
else
{
$this.css('background-color','yellow');
}
}
);
var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
$link.parent().find('.error,.checked').remove();
var valclass = 'checked';
if(hasError)
{
error = -1;
valclass = 'error';
}
$('<span class="'+valclass+'"></span>').insertAfter($link);
return error;
}
/*
if there are errors don't allow the user to submit
*/
$('#registerButton').bind('click',function(){
if($('#formElem').data('errors')){
alert('Please correct the errors in the Form');
return false;
}
});
});
inside validateStep function on line where you perform the find just add this tag after :input like below:
$('#formElem').children(':nth-child('+ parseInt(step)+')').find(':input[required]:not(button)')
You just have to use the required html attribute inside your web page and when you will run the validateStep function, it will ignore all fields without the required attribute.
look at mdn doc for more informations.
https://developer.mozilla.org/en-US/docs/Web/CSS/:required
I am using ScrollTo plugin to create a simple paralax-style page-changing. Here is what happens when you scroll
var location = window.location.hash;
if(location == '') { var location = '#home' } // Default location
slides = ['#home', '#about', '#characters']; // All the slides in an array
// Calculating previous and next slides
var currentEl = slides.indexOf(location);
var prevEl = currentEl - 1;
var nextEl = currentEl + 1;
if(delta > 0)
{
if(location != '#home')
{
gofor(slides[prevEl]); // Scrolling up
}
}
else
{
if(location != '#characters')
{
gofor(slides[nextEl]); // Scrolling down
}
}
});
And here is the gofor function itself.
function gofor(slide)
{
$(slide).clearQueue().ScrollTo({duration: 700}); // Scrolling to the given slide
$('.nav>a').removeClass('active'); // Removing all active classes
$(slide + '_nav').addClass('active'); // Updating the menu class with the _nav suffix id
window.location.hash = slide; // Updating the location.hash with the new position
}
This is working okay but when you scroll your wheel more than one step it goes more than one page forward. How can i stop the scrolling function for a certain amount of time (like 3 seconds) and then let the mouse regain its scrolling function again?
Thanks.
I finally got the wonderful "quovolver" to work on my site and my testimonials are all rotating in a lovely way in my sidebar...
I would like however that instead of them running in the same order all the time ( the script for quovolver cycles through them in the order they are in in the html... ) that they be called up randomly by the script...
Is this possible??
Here is the script:
/**
* jQuery Quovolver 2.0.2
* https://github.com/sebnitu/Quovolver
*
* By Sebastian Nitu - Copyright 2012 - All rights reserved
* Author URL: http://sebnitu.com
*/
(function($) {
$.fn.quovolver = function(options) {
// Extend our default options with those provided.
var opts = $.extend({}, $.fn.quovolver.defaults, options);
// This allows for multiple instances of this plugin in the same document
return this.each(function () {
// Save our object
var $this = $(this);
// Build element specific options
// This lets me access options with this syntax: o.optionName
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// Initial styles and markup
$this.addClass('quovolve')
.css({ 'position' : 'relative' })
.wrap('<div class="quovolve-box"></div>');
if( o.children ) {
var groupMethod = 'find';
} else {
var groupMethod = 'children';
}
// Initialize element specific variables
var $box = $this.parent('.quovolve-box'),
$items = $this[groupMethod](o.children),
$active = 1,
$total = $items.length;
// Hide all except the first
$items.hide().filter(':first').show();
// Call build navigation function
if ( o.navPrev || o.navNext || o.navNum || o.navText ) {
o.navEnabled = true;
var $nav = buildNav();
} else {
o.navEnabled = false;
}
// Call equal heights function
if (o.equalHeight) {
equalHeight( $items );
// Recalculate equal heights on window resize
$(window).resize(function() {
equalHeight( $items );
$this.css('height', $($items[$active -1]).outerHeight() );
});
}
// Auto play interface
if (o.autoPlay) {
var $playID = autoPlay();
if (o.stopOnHover) {
var $playID = stopAutoPlay($playID);
} else if (o.pauseOnHover) {
var $playID = pauseAutoPlay($playID);
}
}
// Go To function
function gotoItem(itemNumber) {
// Check if stuff is already being animated and kill the script if it is
if( $items.is(':animated') || $this.is(':animated') ) return false;
// If the container has been hidden, kill the script
// This prevents the script from bugging out if something hides the revolving
// object from another script (tabs for example)
if( $box.is(':hidden') ) return false;
// Don't let itemNumber go above or below possible options
if ( itemNumber < 1 ) {
itemNumber = $total;
} else if ( itemNumber > $total ) {
itemNumber = 1;
}
// Create the data object to pass to our transition method
var gotoData = {
current : $( $items[$active -1] ), // Save currently active item
upcoming : $( $items[itemNumber - 1] ) // Save upcoming item
}
// Save current and upcoming hights and outer heights
gotoData.currentHeight = getHiddenProperty(gotoData.current);
gotoData.upcomingHeight = getHiddenProperty(gotoData.upcoming);
gotoData.currentOuterHeight = getHiddenProperty(gotoData.current, 'outerHeight');
gotoData.upcomingOuterHeight = getHiddenProperty(gotoData.upcoming, 'outerHeight');
// Save current and upcoming widths and outer widths
gotoData.currentWidth = getHiddenProperty(gotoData.current, 'width');
gotoData.upcomingWidth = getHiddenProperty(gotoData.upcoming, 'width');
gotoData.currentOuterWidth = getHiddenProperty(gotoData.current, 'outerWidth');
gotoData.upcomingOuterWidth = getHiddenProperty(gotoData.upcoming, 'outerWidth');
// Transition method
if (o.transition != 'basic' &&
typeof o.transition == 'string' &&
eval('typeof ' + o.transition) == 'function' ) {
// Run the passed method
eval( o.transition + '(gotoData)' );
} else {
// Default transition method
basic(gotoData);
}
// Update active item
$active = itemNumber;
// Update navigation
updateNavNum($nav);
updateNavText($nav);
// Disable default behavior
return false;
}
// Build navigation
function buildNav() {
// Check the position of the nav and insert container
if ( o.navPosition === 'above' || o.navPosition === 'both' ) {
$box.prepend('<div class="quovolve-nav quovolve-nav-above"></div>');
var nav = $box.find('.quovolve-nav');
}
if ( o.navPosition === 'below' || o.navPosition === 'both' ) {
$box.append('<div class="quovolve-nav quovolve-nav-below"></div>');
var nav = $box.find('.quovolve-nav');
}
if ( o.navPosition === 'custom' ) {
if ( o.navPositionCustom !== '' && $( o.navPositionCustom ).length !== 0 ) {
$( o.navPositionCustom ).append('<div class="quovolve-nav quovolve-nav-custom"></div>');
var nav = $( o.navPositionCustom ).find('.quovolve-nav');
} else {
console.log('Error', 'That custom selector did not return an element.');
}
}
// Previous and next navigation
if ( o.navPrev ) {
nav.append('<span class="nav-prev">' + o.navPrevText + '</span>');
}
if ( o.navNext ) {
nav.append('<span class="nav-next">' + o.navNextText + '</span>');
}
// Numbered navigation
if ( o.navNum ) {
nav.append('<ol class="nav-numbers"></ol>');
for (var i = 1; i < ($total + 1); i++ ) {
nav
.find('.nav-numbers')
.append('<li>' + i + '</li>');
}
updateNavNum(nav);
}
// Navigation description
if ( o.navText ) {
nav.append('<span class="nav-text"></span>');
updateNavText(nav);
}
return nav;
}
// Get height of a hidden element
function getHiddenProperty(item, property) {
// Default method
if (!property) property = 'height';
// Check if item was hidden
if ( $(this).is(':hidden') ) {
// Reveal the hidden item but not to the user
item.show().css({'position':'absolute', 'visibility':'hidden', 'display':'block'});
}
// Get the requested property
var value = item[property]();
// Check if item was hidden
if ( $(this).is(':hidden') ) {
// Return the originally hidden item to it's original state
item.hide().css({'position':'static', 'visibility':'visible', 'display':'none'});
}
// Return the height
return value;
}
// Equal Column Heights
function equalHeight(group) {
var tallest = 0;
group.height('auto');
group.each(function() {
if ( $(this).is(':visible') ) {
var thisHeight = $(this).height();
} else {
var thisHeight = getHiddenProperty( $(this) );
}
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// Update numbered navigation
function updateNavNum(nav) {
if (o.navEnabled) {
nav.find('.nav-numbers li').removeClass('active');
nav
.find('.nav-numbers a[href="#item-' + $active + '"]')
.parent()
.addClass('active');
}
}
// Update navigation description
function updateNavText(nav) {
if (o.navEnabled) {
var content = o.navTextContent.replace('#a', $active).replace('#b', $total);
nav.find('.nav-text').text(content);
}
}
// Start auto play
function autoPlay() {
$box.addClass('play');
intervalID = setInterval(function() {
gotoItem( $active + 1 );
}, o.autoPlaySpeed);
return intervalID;
}
// Pause auto play
function pauseAutoPlay(intervalID) {
if ( o.stopAutoPlay !== true ) {
$box.hover(function() {
$box.addClass('pause').removeClass('play');
clearInterval(intervalID);
}, function() {
$box.removeClass('pause').addClass('play');
clearInterval(intervalID);
intervalID = autoPlay();
});
return intervalID;
}
}
// Stop auto play
function stopAutoPlay(intervalID) {
$box.hover(function() {
$box.addClass('stop').removeClass('play');
clearInterval(intervalID);
}, function() {});
return intervalID;
}
// Transition Effects
// Basic (default) Just swaps out items with no animation
function basic(data) {
$this.css('height', data.upcomingOuterHeight);
data.current.hide();
data.upcoming.show();
if (o.equalHeight === false) {
$this.css('height', 'auto');
}
}
// Fade animation
function fade(data) {
// Set container to current item's height
$this.height(data.currentOuterHeight);
// Fade out the current container
data.current.fadeOut(o.transitionSpeed, function() {
// Resize container to upcming item's height
$this.animate({
height : data.upcomingOuterHeight
}, o.transitionSpeed, function() {
// Fade in the upcoming item
data.upcoming.fadeIn(o.transitionSpeed, function() {
// Set height of container to auto
$this.height('auto');
});
});
});
}
// Bind to the forward and back buttons
$('.nav-prev a').click(function () {
return gotoItem( $active - 1 );
});
$('.nav-next a').click(function () {
return gotoItem( $active + 1 );
});
// Bind the numbered navigation buttons
$('.nav-numbers a').click(function() {
return gotoItem( $(this).text() );
});
// Create a public interface to move to a specific item
$(this).bind('goto', function (event, item) {
gotoItem( item );
});
}); // #end of return this.each()
};
$.fn.quovolver.defaults = {
children : '', // If selector is provided, we will use the find method to get the group of items
transition : 'fade', // The style of the transition
transitionSpeed : 300, // This is the speed that each animation will take, not the entire transition
autoPlay : true, // Toggle auto rotate
autoPlaySpeed : 6000, // Duration before each transition
pauseOnHover : true, // Should the auto rotate pause on hover
stopOnHover : false, // Should the auto rotate stop on hover (and not continue after hover)
equalHeight : true, // Should every item have equal heights
navPosition : 'above', // above, below, both, custom (must provide custom selector for placement)
navPositionCustom : '', // selector of custom element
navPrev : false, // Toggle "previous" button
navNext : false, // Toggle "next" button
navNum : false, // Toggle numbered navigation
navText : false, // Toggle navigation description (e.g. display current item # and total item #)
navPrevText : 'Prev', // Text for the "previous" button
navNextText : 'Next', // Text for the "next" button
navTextContent : '#a / #b' // #a will be replaced with current and #b with total
};
})(jQuery);
and here is a very simple example of the html that works with it...
<div class="quovolver">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Sorry it took a bit longer than anticipated ;)
Let me know if this works for you.
You can replace your current Quovolver code with the following:
$(document).ready(function() {
var $items = $('.quovolver .quote');
var quovolver = $('.quovolver');
var newItems = [];
$.each($items, function(i, quote) {
var $copy = $(quote);
newItems.push($copy);
$copy.remove();
});
var random;
var chosenRandom = [];
for (var i = 0; i < newItems.length - 1; i++) {
random = Math.floor(Math.random() * newItems.length);
while ($.inArray(random, chosenRandom) != -1) {
random = Math.floor(Math.random() * newItems.length);
}
chosenRandom.push(random);
quovolver.append(newItems[random]);
}
$('div.quovolver').quovolver({autoPlaySpeed : 6000});
});
EDIT
To fix the overlapping divs, I have made a small adjustment in the code above, besides that, can you change the CSS Class testimonial_widget to include : overflow:hidden ? That will also aid in hiding the divs that are creeping over it.
Secondly the length of each div can be changed in the script above, when passing an object to quovolver, modify the following:
autoPlaySpeed : 6000 to however many (seconds * 1000) that you want it to wait.
Hope this helps ;)