Question

hello im trying to make something like github treeslider

im new to javascript..

but heres what im working on

jQuery(document).ready(function(){
    $('#red-side-menu a').pjax({
        container: '#ajax-users-v1',
    });


    var toggle;
    if (typeof toggle != 'undefined') {
        toggle = true;
    }

    if (toggle) {
        $('body')
        .bind('start.pjax', function() { $('#ajax-users-v1').show("slide", { direction: "right" });  })
        .bind('end.pjax',   function() {  })
        toggle = false;
    };

    if (!toggle) {
    $('body')
      .bind('start.pjax', function() { $('#ajax-users-v1').show("slide", { direction: "left" });  })
      .bind('end.pjax',   function() {  })
      toggle = true;
    }


    $('#red-edit-full a').pjax({
        container: '#ajax-users-v1',
    });     
});

well before above im useing php to get $_GET[‘infolder’] but it seems its not that good.
the problem now that it keeps slide to left

is there a way to do this?

Answer 1

I think this can be simplified.

# this variable maintains state for the lifetime of the page
var direction = "right";
jQuery(document).ready(function(){
  # this whole statement only executes once
  $('#red-side-menu a').pjax({
    container: '#ajax-users-v1'
  });

  # this line executes once
  $('body')
    # this line executes once
    .bind('start.pjax', function() {
      # this line executes every time the start.pjax event reaches the body element
      $('#ajax-users-v1').show("slide", { direction: direction });  
    })
    # this line executes once
    .bind('end.pjax', function() {
      # this line executes every time the end.pjax event reaches the body element (hint: this event is raised after start.pjax is finished) 
      direction = (direction == "right" ? "left" : "right"); 
    });

  # this whole statement only executes once
  $('#red-edit-full a').pjax({
    container: '#ajax-users-v1'
  });     
});

The document ready event automatically runs only once. I have commented the code to show when each line or statement block is executed. It’s really important to understand that the code inside the event handlers is the only code that is going to run after the page is finished loading.