javascript - Detecting back button triggers (using Ajaxify and History.js) -


i'm using ajaxify, uses history.js.

when project link clicked, content slides in via ajax , url changed. when close button clicked, panel slides out , url updated. simple.

however, when click button, rather close button, url updates (presumably triggered correctly history.js) panel doesn't slide out. due having separate code controlling slide in/out.

what i'm looking find out if can detect when button triggered? reading on spec thought using .statechange work, rather picks on every .statechange, not button.

few things note – panel slides out ajaxed content called .panel-slide' , when open has class .opened , when closed .closed. maybe can use aid .statechange?

here's code panel-slide

$(document).ready(function() {  $('.panel-slide').addclass('closed');  var e = $(window).width();  $('.panel-slide.closed').css('margin-left', e + 'px');  $(window).resize(function() {            var e = $(window).width();     $('.panel-slide.closed').css('margin-left', e + 'px') });  $('body').on('click', '.close-panel', function() {           $('.panel-slide').animate({marginleft: e + 'px'}, 1e3, 'easeinoutcubic', function() {         history.back();     });     $('.panel-slide').attr('class', 'panel-slide closed');     $('ul li a').animate({         opacity: 1     }, 500, function() {}); });  $('ul li a').click(function() {     $('.panel-slide').attr('class', 'panel-slide opened');     $('ul li a').animate({         opacity: 0     }, 500, function() {}); });  }); 

and entire modified ajaxify here http://snippi.com/s/m0058ru

i had same problem, no detection between history , click of link. have altered script , it's functioning.

if link pressed, script uses function animatelefttoright(); if back/forward button pressed, script uses function animaterighttoleft();

it's not best solution, because of forward button, visitors use button , not forward buttons.

i'll try explain perfect possible.

i add variable called nextpage, default 1 false. when link being clicked, variable set true.

somewhere handling statechanges, check nextpage true, use normal animation. if nextpage false, use altered animation.

after animations, set nextpage false again.

var nextpage = false;  $('a').click(function(){     nextpage = true;     if(nextpage){         animaterighttoleft();     }     else{         animatelefttoright();     } });  function animateleftoright(){     // animation stuff     // after animation add:     nextpage = false; }  function animaterightoleft(){     // animation stuff     // after animation add:     nextpage = false; } 

i hope have enough information use , integrate script. have succeeded script, script complex show here, have simplyfied it.


Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -