CSS Timeline scroller

Question

Respected people ...

Im working on a timeline scroller which is giving me problems when i scroll left ....

The values are not being subtracted linearly but being added alternatively ...

I have checked the js many times but unable to figure it out ...

http://codepen.io/akashdevaraju/pen/tiesa

  $("#right,#left").click ->
    id = this.id
    patt = /\d+/g
    circles = $(".circle")    
    if id is "right"
      for cir in circles
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))          
        le = lef - 80            
        $(cir).css("left","#{le}px")
    else
      for cir in circles.toArray().reverse()        
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))          
        le = lef + 80
        $(cir).css("left","#{le}px")

Kindly do help ...

Answer 1

Try with the code below instead. I've modified a bit your regex so it won't strip the '-' sign in front of: e.g. '-80px' and will return '-80'. Your regex returned '80' even for negative values. When pressing the left button, the negative left offset was messed up by the regex and all those circles shared the same offset...

$("#right,#left").click ->
    id = this.id 
    patt = /(-)*[0-9]+/g
    circles = $(".circle") 

    for cir in circles
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))
        le = if id is "right" then lef - 80 else lef + 80

        $(cir).css("left","#{le}px")