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
Post a Comment