CSS Timeline scroller disable navigation

Question

Respected people ...

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

I need to disable the navigations when the number of elements are no longer present ...

Im using bind and unbind for the same :

$("#right,#left").click ->
  #alert page_no
  if page_no >= (size-1)
    $("#right").unbind("click")
  else
    #alert "activating right"
    $("#right").bind("click")
  if page_no > 3
    $("#left").unbind("click")
  else
    #alert "activating left"
    $("#left").bind("click")

But the left navigation isnt working.

Basically the right nav should get disabled after showing the 15th element and the left nav should get disabled before overflowing the first element ...

This is my current state : http://codepen.io/akashdevaraju/pen/vikar

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

PS : my previous code with working nav but no disability function http://codepen.io/akashdevaraju/pen/tiesa

EDIT : ADDED JS VERSION

Answer 1

Fixed it by removeing unbinds and moving the page checks into the if right/left blocks:

  $("#right,#left").click ->
    #alert page_no
    id = this.id
    patt = /-?\d+/g
    circles = $(".circle")    
    if id is "right"  

      if page_no >= (size-1) #moved first if statement here
         return
      page_no = page_no + 1
      for cir in circles
        left = $(cir).css("left")
        lef = parseInt(left.match(patt))          
        le = lef - 80            
        $(cir).css("left","#{le}px")
    else      
      if page_no <= 3 #moved second if statement here
         return
      page_no = page_no - 1 

      #alert page_no
      for cir in circles        
        left = $(cir).css("left")        
        lef = Number(left.match(patt))        
        le = lef + 80
        $(cir).css("left","#{le}px")

http://codepen.io/anon/pen/Hhazm

What was happening was unbind('click') was unbinding the parent function as well, so that none of the page number checking was happening. By using return, click is still bound but the page checking still happens.

The if statements will need to be adjusted to get you up to 15 pages.

Answer 2

You need to define a behavior for .bind(), right? You can't just say "bind" -- you're not actually binding anything to the selector.

$('#left-arrow').bind('click', function(event) {
    // click handling code goes here
});