Develop Reference

How to scroll automatically to menu when content swiped

I need to scroll menus automatically when I am swiping the content left or right, for an eg.
when I am swiping to Right and coming to 5th panel slide the navigation should jumped to or scrolled to the 5th menu but now its stays or displays in menu 1 or whatever last menu was clicked only.
My expectation is to create like this eg.
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Pivot/Overview/jQuery/iOS/
I am looking to Achieve two scenario, but I am failing and getting every time an error
If I Make the menu(selected menu) left or center side align then it should always be in left or center side align in initial load of the screen and also when I am swipe the slide content the menu should left or center align, sample eg. above link devexpress
When a content is swiped eg. 5th panel slide then the menu should scroll with respect to it
What I have tried is here and also the Jquery code html for reference
$(document).ready(function(){
$.fn.scrollpane = function(options) {
options = $.extend({
direction: "horizontal",
deadzone: 25,
useTransition: false,
desktop: true,
setupCss: true,
onscroll: function(pos, page, duration) {},
onscrollfinish: function(pos, page) {}
}, options);
var isTouch = "ontouchend" in document || !options.desktop,
onTouchstart = isTouch ? "touchstart" : "mousedown",
onTouchmove = isTouch ? "touchmove" : "mousemove",
onTouchend = isTouch ? "touchend" : "mouseup";
return this.each(function() {
// the scroll pane viewport
var outerElem = $(this);
// a large div containing the scrolling content
var innerElem = $("<div></div>");
innerElem.append(outerElem.children().remove());
outerElem.append(innerElem);
// cache these for later
var outerWidth = outerElem.width();
var outerHeight = outerElem.height();
// boolean
var horizontal = (options.direction === "horizontal");
// the number of pixels the user has to drag and release to trigger a page transition
// natural
var deadzone = Math.max(0, options.deadzone);
// the index of the current page. changed after the user completes each scrolling gesture.
// integer
var currentPage = 0;
// width of a page
// integer
var scrollUnit = horizontal ? outerWidth : outerHeight;
// x coordinate on the transform. -ve numbers go to the right,
// so this goes -ve as currentPage goes +ve
// integer (pixels)
var currentPos = 0;
// min and max scroll position:
// integer (pixels)
var scrollMax = 0;
var scrollMin = -scrollUnit * (innerElem.children().length - 1);
// time to settle after touched:
// natural (ms)
var settleTime = 200;
// dragMid and dragEnd are updated each frame of dragging:
// integer (pixels)
var dragStart = 0; // touch position when dragging starts
var dragMid = 0; // touch position on the last touchmove event
var dragEnd = 0; // touch position on this touchmove event
// +1 if dragging in +ve x direction, -1 if dragging in -ve x direction
// U(-1, +1)
var dragDir = 0;
if (options.setupCss) {
outerElem.css({
position: "relative",
overflow: "hidden"
});
// position the pages:
innerElem.children().each(function(index) {
$(this).css({
position: "absolute",
display: "block",
width: outerWidth,
height: outerHeight
}).css(horizontal ? "left" : "top", scrollUnit * index);
});
}
// natural natural boolean -> void
function scrollTo(position, duration, finish) {
var parameters = {};
parameters[(horizontal ? 'marginLeft' : 'marginTop')] = position;
options.onscroll(position, -position / scrollUnit, duration);
if (options.useTransition) {
innerElem.css({
transition: "none",
transform: horizontal ? ("translate3d(" + position + "px, 0, 0)") : ("translate3d(0, " + position + "px, 0)")
});
}
if (finish) {
if (!options.useTransition) {
innerElem.find('li').animate(parameters, duration);
} else {
innerElem.css({
transition: "all " + (duration === 0 ? "0" : duration + "ms")
});
}
setTimeout(function() {
options.onscrollfinish(position, -position / scrollUnit, duration);
});
} else if (!options.useTransition) {
innerElem.find('li').stop().css(parameters);
}
}
// Immediately set the 3D transform on the scroll pane.
// This causes Safari to create OpenGL resources to manage the animation.
// This sometimes causes a brief flicker, so best to do it at page load
// rather than waiting until the user starts to drag.
scrollTo(0, 0, true);
// bind the touch drag events:
outerElem.on(onTouchstart, function(e) {
e = isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e;
dragStart = dragEnd = dragMid = horizontal ? e.pageX : e.pageY;
// bind the touch drag event:
$(this).on(onTouchmove, function(e) {
e = isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e;
dragEnd = horizontal ? e.pageX : e.pageY;
dragDir = (dragEnd - dragMid) > 0 ? 1 : -1;
currentPos += dragEnd - dragMid;
dragMid = dragEnd;
scrollTo(currentPos, 0, false);
});
// bind the touch end event
}).on(onTouchend, function(e) {
// boolean
var reset = Math.abs(dragEnd - dragStart) < deadzone;
// real
var scrollPage = -1.0 * currentPos / scrollUnit;
// natural
var nextPage = reset ? currentPage : (dragDir < 0 ? Math.ceil(scrollPage) : Math.floor(scrollPage));
// int
var nextPos = Math.max(scrollMin, Math.min(scrollMax, -scrollUnit * nextPage));
currentPos = nextPos;
currentPage = nextPage;
scrollTo(nextPos, settleTime, true);
outerElem.off(onTouchmove);
});
// set up the menu callback:
outerElem.data("showpage", function(page) {
// int
page = page < 0 ? innerElem.children().length + page : page;
currentPos = Math.max(scrollMin, Math.min(scrollMax, -page * scrollUnit));
currentPage = -currentPos / scrollUnit;
scrollTo(currentPos, settleTime, true);
});
});
};
// Once you've initialized a scrollpane with $().scrollpane(),
// you can use this method to cause it to programmatically scroll
// to a particular page. Useful for creating a navigation menu, or
// those little dots on Apple-store-style product galleries.
//
// Pages are indexed from 0 upwards. Negative numbers can be used
// to index pages from the right.
//
// int -> jQuery
$.fn.showpage = function(index) {
var fn = this.data("showpage");
fn(index);
return this;
};
$(document).bind("touchmove", function() {
return false;
});
$(function() {
//$("#hpane").scrollpane();
$("#hpane").scrollpane({
// onscroll: function(pos, page, duration) {
// $("#pos").text(pos);
// $("#page").text(page);
// $("#snapping").text("no");
// },
onscrollfinish: function(pos, page) {
$("#pos").text(pos);
$("#page").text(page);
$("#snapping").text("yes");
$("ul.pager li").removeClass("active")
$("ul.pager li:nth-child("+(page+1)+")").addClass("active");
}
});
$("ul.pager li").click(function() {
var index = $(this).index();
$("ul.pager li").removeClass("active")
$(this).addClass("active");
$("#hpane").showpage(index);
//$("#vpane").showpage(index);
});
// $("input").click(function() {
// alert(this.value);
// });
});
});

Disable "wrap around" in SlidesJS

I'm using SlidesJS, which is a very customizable plugin for pagination of slideshows.
This is my initialization.
$('.slides').slidesjs
({
width: 300,
height: 300,
navigation: false, // It's for swiping in an iOS web app
pagination: false,
generatePagination: false
});
However, I don't want the slideshow to wrap "the other way around". I don't know if there is a term for this, so I painted this illustration:
Green = Next
Blue = Previous
What I want is the swipes which go from 4 -> 1 or from 1 -> 4 to be disabled. I haven't found a built in feature or property for this. But, is there a reasonable workaround?

Guys! I made it.
It took a couple hours.
The initial recreated problem is here
And my working solution, as explained below, is here.
I found where to put a switch to this looping effect.
AND I setted it as a new option ==> looping (true/false) !!!
If the looping option is set to false... It won't loop.
defaults = {
width: 940,
height: 528,
start: 1,
navigation: {
active: true,
effect: "slide"
},
pagination: {
active: true,
effect: "slide"
},
play: {
active: false,
effect: "slide",
interval: 5000,
auto: false,
swap: true,
pauseOnHover: false,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: true
}
},
callback: {
loaded: function() {},
start: function() {},
complete: function() {}
},
looping: false // Looping effect from last image to first and vice-versa
};
I slightly modified the Plugin.prototype._slide function to achieve this.
I added a new condition based on a var which I called OK_Proceed.
This var is true by default.
Its value becomes false when trying to go to the image index -1 or data.total... But only if the looping option is set to false.
I wished to preserve the original function...
;)
var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
When this OK_Proceed is false : The script bypasses the animate function entierely.
It is replaced by a small 10px "bounce" effect.
The only thing left to do is to reset the data.animating value:
$.data(_this, "animating", false);
So here is the full function:
Plugin.prototype._slide = function(number) { console.log("Line 430 - _slide: ");
var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
_this = this;
$element = $(this.element);
this.data = $.data(this); console.log( JSON.stringify( $.data(this) ) );
if (!this.data.animating && number !== this.data.current + 1) {
$.data(this, "animating", true);
currentSlide = this.data.current; console.log("Line 437 - currentSlide: "+currentSlide);
if (number > -1) {
number = number - 1;
value = number > currentSlide ? 1 : -1; console.log("Line 440 - value: "+value);
direction = number > currentSlide ? -this.options.width : this.options.width;
next = number;
} else {
value = this.data.direction === "next" ? 1 : -1;
direction = this.data.direction === "next" ? -this.options.width : this.options.width;
next = currentSlide + value; console.log("Line 446 - next: "+next);
} var OK_Proceed=true; // ADDED var
console.log( this.options.looping );
if (next === -1) {
if( this.options.looping ){
next = this.data.total - 1;
}else{
OK_Proceed=false;
}
}
if (next === this.data.total) {
if( this.options.looping ){
next = 0;
}else{
OK_Proceed=false;
}
}
if(OK_Proceed){this._setActive(next); // ADDED condition
slidesControl = $(".slidesjs-control", $element);
if (number > -1) {
slidesControl.children(":not(:eq(" + currentSlide + "))").css({
display: "none",
left: 0,
zIndex: 0
});
}
slidesControl.children(":eq(" + next + ")").css({
display: "block",
left: value * this.options.width,
zIndex: 10
});
this.options.callback.start(currentSlide + 1);
if (this.data.vendorPrefix) {
prefix = this.data.vendorPrefix;
transform = prefix + "Transform";
duration = prefix + "TransitionDuration";
timing = prefix + "TransitionTimingFunction";
slidesControl[0].style[transform] = "translateX(" + direction + "px)";
slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
slidesControl[0].style[transform] = "";
slidesControl[0].style[duration] = "";
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
});
$.data(_this, "current", next);
$.data(_this, "animating", false);
slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
slidesControl.children(":not(:eq(" + next + "))").css({
display: "none",
left: 0,
zIndex: 0
});
if (_this.data.touch) {
_this._setuptouch();
}
return _this.options.callback.complete(next + 1);
});
} else {
return slidesControl.stop().animate({
left: direction
}, this.options.effect.slide.speed, (function() {
slidesControl.css({
left: 0
});
slidesControl.children(":eq(" + next + ")").css({
left: 0
});
return slidesControl.children(":eq(" + currentSlide + ")").css({
display: "none",
left: 0,
zIndex: 0
}, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
}));
} } else {
console.log("HERE");
$.data(_this, "animating", false);
console.log( JSON.stringify( $.data(this) ) );
// Bouncing effect
$(".slidesjs-control").stop().animate( { "left" : "-=10px" }, 100, "easeInOutBounce", function(){
$(".slidesjs-control").animate( { "left" : "+=10px" }, 100, "easeInOutBounce");
});
} // End added condition
}
};
I cleaned this code from all the console.logs and created a zip file ready to use.
The day after EDIT
There was two other functions to modify in order to make the "touch" behave the same as mouse clicked links... The .zip file above also reflects these changes...
Function modified for click is : _slide.
Functions modified for click are : _setuptouch and _touchmove.
Two classes are available for you to modify : bounceForward and bounceBackward.
The lastest demo is here. Try it on a touch enabled device.

How do I add a class of "active" to a visible slide within a slideshow?

I have a page that is mainly a large slider, I am using unslider (unslider.com) right now, but would be willing to switch to a different slider if it provides the functionality I need. The goal is to have the slide show move through my different projects. At the bottom of the page, will be an arrow button that when clicked will slide in the specific project details for the current or visible slide. I was planning to load the project details into a hidden div via ajax based on the data attribute of the "active" slide.
The problem I am having is that I don't know how to add a class of "active" to the visible slide. I am fairly new, but I believe I will need to use javascript or jquery to change the "active" class appropriately. Here is the HTML and jQuery for the slider:
<div class="banner">
<ul>
<li class="slide_1" data-link="ajaxed_content_url">
<img src="slide_1.jpg" />
</li>
<li class="slide_2" data-link="ajaxed_content_url">
<img src="slide_2.jpg" />
</li>
<li class="slide_3" data-link="ajaxed_content_url">
<img src="slide_3.jpg" />
</li>
</ul>
<a class="details_btn" href="#"></a>
</div>
<script>
$('.banner').unslider({
speed: 500,
delay: 5000,
complete: function() {},
keys: true,
dots: true,
fluid: true
});
</script>
When the slider is rendered in the browser, an "active" class is not added to the code. Any help would be greatly appreciated.

Unslider simply animates the ul, so it does not actually change the picture li's. However, it DOES add an active class to the dots. Digging through the source code, I found where it adds the active class to the dots and edited in a similar line that should apply an active class to the pictures. Here is the edited source code:
/**
* Unslider by #idiot
*/
(function($, f) {
// If there's no jQuery, Unslider can't work, so kill the operation.
if(!$) return f;
var Unslider = function() {
// Set up our elements
this.el = f;
this.items = f;
// Dimensions
this.sizes = [];
this.max = [0,0];
// Current inded
this.current = 0;
// Start/stop timer
this.interval = f;
// Set some options
this.opts = {
speed: 500,
delay: 3000, // f for no autoplay
complete: f, // when a slide's finished
keys: !f, // keyboard shortcuts - disable if it breaks things
dots: f, // display ••••o• pagination
fluid: f // is it a percentage width?,
};
// Create a deep clone for methods where context changes
var _ = this;
this.init = function(el, opts) {
this.el = el;
this.ul = el.children('ul');
this.max = [el.outerWidth(), el.outerHeight()];
this.items = this.ul.children('li').each(this.calculate);
// Check whether we're passing any options in to Unslider
this.opts = $.extend(this.opts, opts);
// Set up the Unslider
this.setup();
return this;
};
// Get the width for an element
// Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li:first'), 0)
this.calculate = function(index) {
var me = $(this),
width = me.outerWidth(), height = me.outerHeight();
// Add it to the sizes list
_.sizes[index] = [width, height];
// Set the max values
if(width > _.max[0]) _.max[0] = width;
if(height > _.max[1]) _.max[1] = height;
};
// Work out what methods need calling
this.setup = function() {
// Set the main element
this.el.css({
overflow: 'hidden',
width: _.max[0],
height: this.items.first().outerHeight()
});
// Set the relative widths
this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'});
this.items.css('width', (100 / this.items.length) + '%');
if(this.opts.delay !== f) {
this.start();
this.el.hover(this.stop, this.start);
}
// Custom keyboard support
this.opts.keys && $(document).keydown(this.keys);
// Dot pagination
this.opts.dots && this.dots();
// Little patch for fluid-width sliders. Screw those guys.
if(this.opts.fluid) {
var resize = function() {
_.el.css('width', Math.min(Math.round((_.el.outerWidth() / _.el.parent().outerWidth()) * 100), 100) + '%');
};
resize();
$(window).resize(resize);
}
if(this.opts.arrows) {
this.el.parent().append('<p class="arrows"><span class="prev">â†</span><span class="next">→</span></p>')
.find('.arrows span').click(function() {
$.isFunction(_[this.className]) && _[this.className]();
});
};
// Swipe support
if($.event.swipe) {
this.el.on('swipeleft', _.prev).on('swiperight', _.next);
}
};
// Move Unslider to a slide index
this.move = function(index, cb) {
// If it's out of bounds, go to the first slide
if(!this.items.eq(index).length) index = 0;
if(index < 0) index = (this.items.length - 1);
var target = this.items.eq(index);
var obj = {height: target.outerHeight()};
var speed = cb ? 5 : this.opts.speed;
if(!this.ul.is(':animated')) {
// Handle those pesky dots
_.el.find('.dot:eq(' + index + ')').addClass('active').siblings().removeClass('active');
//HERE IS WHAT I ADDED
_.el.find('ul li:eq(' + index + ')').addClass('active').siblings().removeClass('active');
this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
_.current = index;
$.isFunction(_.opts.complete) && !cb && _.opts.complete(_.el);
});
}
};
// Autoplay functionality
this.start = function() {
_.interval = setInterval(function() {
_.move(_.current + 1);
}, _.opts.delay);
};
// Stop autoplay
this.stop = function() {
_.interval = clearInterval(_.interval);
return _;
};
// Keypresses
this.keys = function(e) {
var key = e.which;
var map = {
// Prev/next
37: _.prev,
39: _.next,
// Esc
27: _.stop
};
if($.isFunction(map[key])) {
map[key]();
}
};
// Arrow navigation
this.next = function() { return _.stop().move(_.current + 1) };
this.prev = function() { return _.stop().move(_.current - 1) };
this.dots = function() {
// Create the HTML
var html = '<ol class="dots">';
$.each(this.items, function(index) { html += '<li class="dot' + (index < 1 ? ' active' : '') + '">' + (index + 1) + '</li>'; });
html += '</ol>';
// Add it to the Unslider
this.el.addClass('has-dots').append(html).find('.dot').click(function() {
_.move($(this).index());
});
};
};
// Create a jQuery plugin
$.fn.unslider = function(o) {
var len = this.length;
// Enable multiple-slider support
return this.each(function(index) {
// Cache a copy of $(this), so it
var me = $(this);
var instance = (new Unslider).init(me, o);
// Invoke an Unslider instance
me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), instance);
});
};
})(window.jQuery, false);

I don't think you will be able to add an active class. However, The complete function is executed after every slide animation, try something like this:
<script>
var NB_OF_SLIDES = ...;
var i = 0;
loadAjaxForSlide i;
$('.banner').unslider({
speed: 500,
delay: 5000,
complete: function() {
i++;
if(i >= NB_OF_SLIDES){
i = 0;
}
loadAjaxForSlide i;
},
keys: true,
dots: true,
fluid: true
});
</script>
But I wouldn't consider loading data via Ajax after every slide animation, it's kinda messy. Try loading everything at once at page load.

jquery quote rotator quovolver - is there a way to make the quotes random?

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 ;)

floating side menu, make it stop at bottom

example page
I have a floating menu that i've built to the left side (green),
and i've made it start moving after 200 pixels. and now i need to to stop
and not go over the footer (blue) area.
any ideas how to make my JS better?
this thing is, I cannot check this on the scroll event, because of the animation
going on after i scroll, so it needs to be done someway else.
so how to make the animation stop at the end just before the footer?

I've resolved the issue perfectly (hope so)
with the help of you guys, and released
a jQuery plugin for floating sticky boxes:
http://plugins.jquery.com/project/stickyfloat

$.fn.menuFloater = function(options) {
var opts = $.extend({ startFrom: 0, offsetY: 0, attach: '', duration: 50 }, options);
// opts.offsetY
var $obj = this;
$obj.css({ position: 'absolute' /*, opacity: opts.opacity */ });
/* get the bottom position of the parent element */
var parentBottomPoint = $obj.parent().offset().top + $obj.parent().height() ;
var topMax = $obj.parent().height() - $obj.innerHeight() + parseInt($obj.parent().css('padding-top')); //get the maximum scrollTop value
if ( topMax < 0 ) {
topMax = 0;
}
console.log(topMax);
$(window).scroll(function () {
$obj.stop(); // stop all calculations on scroll event
// console.log($(document).scrollTop() + " : " + $obj.offset().top);
/* get to bottom position of the floating element */
var isAnimated = true;
var objTop= $obj.offset().top;
var objBottomPoint = objTop + $obj.outerHeight();
if ( ( $(document).scrollTop() > opts.startFrom || (objTop - $(document).scrollTop()) > opts.startFrom ) && ( $obj.outerHeight() < $(window).height() ) ){
var adjust;
( $(document).scrollTop() < opts.startFrom ) ? adjust = opts.offsetY : adjust = -opts.startFrom + opts.offsetY;
// and changed here to take acount the maximum scroll top value
var newpos = ($(document).scrollTop() + adjust );
if ( newpos > topMax ) {
newpos = topMax;
}
$obj.animate({ top: newpos }, opts.duration, function(){ isAnimated = false } );
}
else {
$obj.stop();
}
});
};

In the $(window).scroll function have you checked whether the bottom position of the floating div is less than or equal to the top position of the footer element.