Question

Working demo CLick

$(document).ready(function(e) { 
$('span#pijlr, span#pijll').show();
$('#gallery').css('overflow','hidden');
$('span#pijlr').click(function(e) {
  if (!$('#gallcont').is(':animated')) {
    var slide = 490;
    var variable = $('#gallcont').css('left');
    var urechts = "-980px";
    if(variable > urechts) {
      $('#gallcont').animate({'left': '-=' +slide+ 'px'},'fast','linear');
    }
  }
});
$('span#pijll').click(function(e) {
  if (!$('#gallcont').is(':animated')) {
    var slide = 490;
    var variable = $('#gallcont').css('left');
    var ulinks = "0";
    if(variable < ulinks) {
      $('#gallcont').animate({'left': '+=' +slide+ 'px'},'fast','linear');
    }
  }
});
});

The problem is with the next button (span#pijlr). If i click once it wil do it’s think, and will go too -490px but when i click again it doesn’t do anything. I tried tweaking the variable urechts, but when i increase the number say about -1000px it wil work except that it go’s beyond it’s limits.

Answer 1

This is your problem:

if(variable > urechts) {

variable and urechts are strings, you cannot compare them numerically.

Change the line(s) to something like this, using parseInt to get the numerical value:

if(parseInt(variable) > parseInt(urechts)) {

You could also change urechts/ulinks to be integers and only do parseInt once:

var urechts = "-980px";
if(parseInt(variable) > urechts) { ... }

Fixed example: http://jsfiddle.net/jtbowden/sVqNq/5/

Edit: It was pointed out that this doesn’t work in Chrome. This is because Chrome returns “auto” as the left() value the first time it is called if it wasn’t explicitly defined. Simply add left: 0px to the css for .pol. Otherwise, you need to check for “auto” in your code.