jquery slider with cookie

Question

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 1

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!