Russ Evans Russ Evans - 1 year ago 73
jQuery Question

jquery slider with cookie

I'm trying to add a cookie to a jquery slider which works fine, until i refresh the page and go backwards in the slider (when the value in the cookie is added (valuevalue) rather than added (value+value).

The error occurs on slideMargin += width (which works if the cookie's not involved) , if i change this to slideMargin -= width it works fine but goes the wrong way.

The code :

jQuery(document).ready(function($) {
$(function () {
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var slideMargin = readCookie('slide');
var width = 770;
var slidesLength = ($slides.length-2)*770;

document.onload = checkCookie();
$('#next-gal')
.on('click', nextGal);
$('#prev-gal')
.on('click', prevGal);

function nextGal() {
slideMargin -= width;
createCookie('slide', slideMargin,1);
$slideContainer.animate({'margin-left':(slideMargin)},1000,function() {
if (slideMargin === (-Math.abs(($slides.length-1)*770))) {
slideMargin = -Math.abs(width);
$slideContainer.css('margin-left', -width);
}
});
}
function prevGal() {
slideMargin += width;
createCookie('slide', slideMargin,1);
$slideContainer.animate({'margin-left':(slideMargin)},1000,function() {
if (slideMargin === 0) {
slideMargin = -Math.abs(slidesLength);
$slideContainer.css('margin-left', -Math.abs(slidesLength));
}
});
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

function checkCookie() {
if (slideMargin != null) {
$slideContainer.css('margin-left', -Math.abs(slideMargin));
createCookie('slide', slideMargin,1);
}
else {
createCookie( 'slide', -1540 ,1);
slideMargin = -770;
$slideContainer.css('margin-left', -Math.abs(slideMargin));
}
}

});
});


Any help would be happily recieved.

Russ

Answer Source

The value you read off of the page's cookies is going to be a string. I suspect you need to cast it to a number before you start using it in equations - or else you'll get funky stuff...

I'd replace this:

var slideMargin = readCookie('slide');

with

var slideMargin = parseInt(readCookie('slide')) || 0; // if no cookie value, or if it's not a number, default to zero

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download