/**************************************************************************
Created by Chris Murphy
CDW
2008/04/28
Slider 1.02
Div Slider function
This function 'slides' the underlying div either left or right.
Required framework - jQuery +
CSS/HTML Layout -
left
right
JS Code -
REVISIONS -
1.02 - Added motionLength(ms) parameter to constructor
*/
// Deprecated, use MultiSlider2
function Slider (parent, child, items, motionLength)
{
// id of parent div that must have overflow: hidden;
this.parent = parent;
// id of div to slide
this.child = child;
// first location of object to show - 0 Based
this.step = 1;
//total number of steps
this.totalSteps = items;
// size of slide - px
this.stepSize = jQuery('#'+this.parent).width();
// left start position for motion - px
this.motionStartPosition = this.step * this.stepSize;
// left end position for motion - px
this.motionEndPosition = null;
// current position of motion - px
this.motionCurrentPosition = this.step * this.stepSize;
// timer used to make motion
this.motionTimer = null;
// total length of motion - milliseconds
if(motionLength > 0)
this.motionLength = motionLength;
else
this.motionLength = 500;
// time motion was started
this.startTime = null;
// frame rate
this.speed = 40; // 1000ms/'40ms' = 25fps
// number of items to show ( sets the width of the child element based on the parents 'window' )
// do not use the jQuery.css() method, as it breaks when mapquest maps are included on the same page (as in the movie guide)
document.getElementById(this.child).style.left = '-' + this.step * this.stepSize + 'px';
document.getElementById(this.child).style.width = items * this.stepSize + 'px';
//jQuery('#'+this.child).css('left',"-" + this.step * this.stepSize + "px");
//jQuery('#'+this.child).css('width',items * this.stepSize + "px");
// width of div to slide
this.sliderWidth = jQuery('#'+this.child).width();
this.slideLeft = function(obj) {
// clear the timer in case someone clicks before motion is complete
clearInterval(this.motionTimer);
// check current position
var currentPosition = this.step * this.stepSize;
if(this.step > 0) {
// update step
this.step--;
// calculate new position
var newPosition = this.step * this.stepSize;
// set start position
this.motionStartPosition = currentPosition;
// set current position
this.motionCurrentPosition = currentPosition;
// set end position
this.motionEndPosition = newPosition;
// start motion
this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
}
}
this.slideRight = function(obj) {
// clear the timer in case someone clicks before motion is complete
clearInterval(this.motionTimer);
// check current position
var currentPosition = this.step * this.stepSize;
// calculate new position
this.step++;
var newPosition = this.step * this.stepSize;
// slide it if the newPosition is within the visible slider
if(newPosition <= this.sliderWidth - this.stepSize) {
// set start position
this.motionStartPosition = currentPosition;
// set current position
this.motionCurrentPosition = currentPosition;
// set end position
this.motionEndPosition = newPosition;
// start motion
this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
}
else {
// decrement the step or it will affect the other calls
this.step--;
}
}
this.startMotion = function() {
if(!this.startTime) {
// set motion start time
this.startTime=new Date().getTime();
//this.startTimeSet = true;
}
// get elapsed motion time
var elapsedTime = new Date().getTime() - this.startTime;
if(elapsedTime < this.motionLength) {
// motion is still active
if(this.motionStartPosition > this.motionEndPosition) {
// move to the left
// get percentage increment (cos)
var increment = (1-Math.cos((elapsedTime/this.motionLength)*Math.PI)) / 2;
// set new position
this.motionCurrentPosition = this.motionStartPosition - (increment * this.stepSize);
}
else {
// move to the right
// get percentage increment (cos)
var increment = (1-Math.cos((elapsedTime/this.motionLength)*Math.PI)) / 2;
// set new position
this.motionCurrentPosition = this.motionStartPosition + (increment * this.stepSize);
}
// update object
document.getElementById(this.child).style.left = "-" + this.motionCurrentPosition + "px";
//jQuery('#'+this.child).css('left',"-" + this.motionCurrentPosition + "px");
}
else {
// motion should be complete
clearInterval(this.motionTimer);
// reset startTime
this.startTime = null;
// update object to ensure at end position
if(this.motionEndPosition + this.stepSize == this.sliderWidth)
{
//on the last frame (last frame is a duplicate of first frame
document.getElementById(this.child).style.left = '-' + this.stepSize + 'px';
//jQuery('#'+this.child).css('left',"-" + this.stepSize + "px");
this.step = 1;
}
else if(this.step == 0)
{
this.step = this.totalSteps - 2;
document.getElementById(this.child).style.left = "-" + (this.step * this.stepSize) + "px";
//jQuery('#'+this.child).css('left',"-" + (this.step * this.stepSize) + "px");
}
else
document.getElementById(this.child).style.left = "-" + this.motionEndPosition + "px";
//jQuery('#'+this.child).css('left',"-" + this.motionEndPosition + "px");
}
}
}
// Deprecated, use MultiSlider2
function MultiSlider(sliderwindow, content, item, items, show, motionLength) {
// the visible section
this.sliderWindow = sliderwindow;
// id of div to slide
this.content = content;
// first location of object to show - 0 Based
this.step = show - 1;
// total number of steps
this.totalSteps = items;
// How many steps show at one time.
this.showSteps = show;
// size of slide - px
this.stepWidth = jQuery("#"+item).outerWidth();
// left start position for motion - px
this.motionStartPosition = this.step * this.stepWidth;
// left end position for motion - px
this.motionEndPosition = null;
// current position of motion - px
this.motionCurrentPosition = this.step * this.stepWidth;
// timer used to make motion
this.motionTimer = null;
// width of div to slide
this.sliderWidth = this.stepWidth * this.totalSteps;
// total length of motion - milliseconds
if (motionLength > 0)
this.motionLength = motionLength;
else
this.motionLength = 500;
// time motion was started
this.startTime = null;
// frame rate
this.speed = 40; // 1000ms/'40ms' = 25fps
// moves the visible items to the appropriate starting location
jQuery('#'+this.sliderWindow).css('width',this.showSteps * this.stepWidth + "px");
// number of items to show ( sets the width of the child element based on the parents 'window' )
jQuery('#'+this.content).css('left',"-" + this.step * this.stepWidth + "px");
jQuery('#'+this.content).css('width',this.sliderWidth + "px");
this.slideLeft = function(obj) {
// clear the timer in case someone clicks before motion is complete
clearInterval(this.motionTimer);
if (this.step > 0) {
// check current position
var currentPosition = this.step * this.stepWidth;
// update step
this.step--;
// calculate new position
var newPosition = this.step * this.stepWidth;
// set start position
this.motionStartPosition = currentPosition;
// set current position
this.motionCurrentPosition = currentPosition;
// set end position
this.motionEndPosition = newPosition;
// start motion
this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
}
else {
this.step = this.totalSteps - this.showSteps;
jQuery('#'+this.content).css('left',"-" + this.step * this.stepWidth + "px");
// check current position
var currentPosition = this.step * this.stepWidth;
this.step = this.totalSteps - this.showSteps - 1;
// calculate new position
var newPosition = this.step * this.stepWidth;
// set start position
this.motionStartPosition = currentPosition;
// set current position
this.motionCurrentPosition = currentPosition;
// set end position
this.motionEndPosition = newPosition;
// start motion
this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
}
}
this.slideRight = function(obj) {
// clear the timer in case someone clicks before motion is complete
clearInterval(this.motionTimer);
// check current position
var currentPosition = this.step * this.stepWidth;
// calculate new position
this.step++;
var newPosition = this.step * this.stepWidth;
// slide it if the newPosition is within the visible slider
if (newPosition <= this.sliderWidth - this.stepWidth) {
// set start position
this.motionStartPosition = currentPosition;
// set current position
this.motionCurrentPosition = currentPosition;
// set end position
this.motionEndPosition = newPosition;
// start motion
this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
}
else {
// decrement the step or it will affect the other calls
this.step--;
}
}
this.startMotion = function() {
if (!this.startTime) {
// set motion start time
this.startTime = new Date().getTime();
//this.startTimeSet = true;
}
// get elapsed motion time
var elapsedTime = new Date().getTime() - this.startTime;
if (elapsedTime < this.motionLength) {
// motion is still active
if (this.motionStartPosition > this.motionEndPosition) {
// move to the left
// get percentage increment (cos)
var increment = (1 - Math.cos((elapsedTime / this.motionLength) * Math.PI)) / 2;
// set new position
this.motionCurrentPosition = this.motionStartPosition - (increment * this.stepWidth);
}
else {
// move to the right
// get percentage increment (cos)
var increment = (1 - Math.cos((elapsedTime / this.motionLength) * Math.PI)) / 2;
// set new position
this.motionCurrentPosition = this.motionStartPosition + (increment * this.stepWidth);
}
// update object
jQuery('#'+this.content).css('left',"-" + this.motionCurrentPosition + "px");
}
else {
// motion should be complete
clearInterval(this.motionTimer);
// reset startTime
this.startTime = null;
// update object to ensure at end position
if (this.motionEndPosition + this.stepWidth == this.sliderWidth) {
//on the last frame (last frame is a duplicate of first frame
if (this.showSteps > 1) {
jQuery('#'+this.content).css('left',"-" + this.stepWidth + "px");
this.step = 1;
}
else {
jQuery('#'+this.content).css('left',"-" + this.step * this.stepWidth + "px");
this.step = 0;
}
}
else if (this.step < 0) {
this.step = this.totalSteps - ((this.showSteps - 1) * 2) - 1;
jQuery('#'+this.content).css('left',"-" + (this.step * this.stepWidth) + "px");
}
else if (this.step > (this.totalSteps - this.showSteps - 1)) {
this.step = 0;
jQuery('#'+this.content).css('left', "-" + this.step * this.stepWidth + "px");
}
else {
jQuery('#'+ this.content).css('left',"-" + this.motionEndPosition + "px");
}
}
}
}
function MultiSlider2(window, content, item, steps, show, motionLength, move) {
// the visible section
this.window = window;
// id of div to slide
this.content = content;
// first location of object to show - 0 Based
this.step = 0;
// current step position
this.currentStep = this.step;
// total number of steps
this.totalSteps = steps;
// How many steps show at one time.
this.showSteps = show;
// How many steps to move at one time.
this.moveSteps = move;
// timer used to make motion
this.motionTimer = null;
// Direction to move
this.direction = null;
// Get each item
this.items = new Array();
for (x = 0; x < this.totalSteps; x++) {
this.items[x] = jQuery('#'+item + "_" + x);
}
// size of slide - px
this.stepWidth = this.items[0].width();
this.stepHeight = this.items[0].height();
// width of content div. Contains all items and extra width on each side
this.sliderWidth = (this.moveSteps * this.stepWidth);
// Motion Start
this.startPosition = 0;
// Motion End
this.endPosition = this.startPosition;
// Current motion position
this.currentPosition = this.startPosition;
// number of end items that have been moved to the front
this.itemsMoved = 0;
// total length of motion - milliseconds
if (motionLength > 0)
this.motionLength = motionLength;
else
this.motionLength = 500;
// time motion was started
this.startTime = null;
// frame rate
this.speed = 40; // 1000ms/'40ms' = 25fps
// This is done to set the appropriate hieght on the Window
for (x = 0; x < this.totalSteps; x++) {
if (this.items[x].height() > this.stepHeight)
this.stepHeight = this.items[x].height();
}
// moves the visible items to the appropriate starting location
jQuery('#'+this.window).css('width',(this.showSteps * this.stepWidth) + "px");
jQuery('#'+this.window).css('height',this.stepHeight + "px");
// number of items to show ( sets the width of the child element based on the parents 'window' )
jQuery('#'+this.content).css('width',(this.totalSteps * this.stepWidth) + "px");
// Set the size and position of each item
this.lefts = new Array();
for (x = 0; x < this.totalSteps; x++) {
this.lefts[x] = ((this.stepWidth * x));
this.items[x].css('left',this.lefts[x] + "px");
this.items[x].css('width',this.stepWidth + "px");
this.items[x].css('height',this.stepHeight + "px");
}
this.slideLeft = function(obj) {
if (this.direction == null) {
// clear the timer in case someone clicks before motion is complete
clearInterval(this.motionTimer);
// update position
this.step -= this.moveSteps;
if (this.step < 0)
this.step = this.totalSteps + this.step;
// Direction to move
this.direction = "left";
this.endPosition = this.startPosition + (this.stepWidth * this.moveSteps);
this.currentPosition = this.startPosition;
// start motion
this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
}
}
this.slideRight = function(obj) {
if (this.direction == null) {
// clear the timer in case someone clicks before motion is complete
clearInterval(this.motionTimer)
;
// update position
this.step += this.moveSteps;
// loop around to the beginning
if (this.step > this.totalSteps)
this.step = this.step - this.totalSteps;
// Direction to move
this.direction = "right";
this.endPosition = this.startPosition - (this.stepWidth * this.moveSteps);
this.currentPosition = this.startPosition;
// start motion
this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
}
}
this.startMotion = function() {
if (!this.startTime) {
// set motion start time
this.startTime = new Date().getTime();
//this.startTimeSet = true;
}
// get elapsed motion time
var elapsedTime = new Date().getTime() - this.startTime;
var increment = (1 - Math.cos((elapsedTime / this.motionLength) * Math.PI)) / 2;
if (elapsedTime < this.motionLength) {
if (this.direction == "left") { // Move left
this.currentPosition = this.startPosition + (increment * (this.sliderWidth));
if (this.currentPosition <= this.endPosition) {
// Move each item right
for (x = this.totalSteps - 1; x >= 0; x--) {
var left = this.lefts[x] + this.currentPosition;
if ((left) > (this.showSteps * this.stepWidth)) {
this.itemsMoved++;
this.lefts[x] = (-1 * this.itemsMoved) * this.stepWidth;
left = this.lefts[x] + this.currentPosition;
}
this.items[x].css('left',left + "px");
}
}
}
else if (this.direction == "right") { // move right
this.currentPosition = this.startPosition - (increment * (this.sliderWidth));
if (this.currentPosition >= this.endPosition) {
// Move each item left
for (x = 0; x < this.totalSteps; x++) {
var left = this.lefts[x] + this.currentPosition;
if (left <= (-1 * this.stepWidth)) {
this.lefts[x] = (this.lefts[x] + (this.totalSteps * this.stepWidth));
left = this.lefts[x] + this.currentPosition;
}
this.items[x].css('left',left + "px");
}
}
}
}
else {
// motion should be complete
clearInterval(this.motionTimer);
// reset startTime
this.startTime = null;
// set the current position
this.currentStep = this.step;
// Complete the move for each item
for (x = 0; x < this.totalSteps; x++) {
this.lefts[x] += this.endPosition
if (this.lefts[x] <= (-1 * this.stepWidth)) {
this.lefts[x] += (this.totalSteps * this.stepWidth);
}
this.items[x].css('left',this.lefts[x] + "px");
}
this.startPosition = 0;
this.currentPosition = 0;
this.endPosition = 0;
this.itemsMoved = 0;
this.direction = null;
}
}
}