javascript - smoothState.js conflicting with other plugins -

i have managed implement smoothstate.js plugin on website , works nicely, other simple jquery plugin not work, wich starts with:

$(document).ready() 

i need refresh page in order work again.

i've read smoothstate documentation , says should wrap plugin initializations in function call on both $.fn.ready() , onafter — i'm farely new programming, i'm asking help.

how can make jquery plugins work smoothstate?

you need wrap scripts initiated $(document).ready() in function, , call function when need it.

for example, let’s current script:

$(document).ready(function() {   $('.btn--homepage').click(function(e) {     e.preventdefault();     var goto = $(this).attr('href');      $('#page').addclass('is-exiting');     $(this).addclass('exit-btn');      settimeout(function() {       window.location = goto;     }, 260);   }); }); 

it’ll work fine when page loads it’s wrapped in $(document).ready(function()), page won’t reloading when using smoothstate, need way call snippet both when page loads , when smoothstate loads content. we’ll turn above snippet in function this:

(function($) {   $.fn.onpageload = function() {     $('.btn--homepage').click(function(e) {       e.preventdefault();       var goto = $(this).attr('href');        $('#page').addclass('is-exiting');       $(this).addclass('exit-btn');        settimeout(function() {         window.location = goto;       }, 260);     });   }; }(jquery)); 

as can see, we’ve swapped $(document).ready(function()) function wrapper, else stays same.

so we’ve got function need call when page loads , in smoothstate.

to call when page loads need this:

$(document).ready(function() {   $('body').onpageload(); }); 

and trigger in smoothstate need call in inafter callback this:

onafter: function($container) {   $container.onpageload(); } 

and here's example smoothstate script showing put onafter callback:

$(function() {   var $page = $('#main');   var options = {     prefetch : true,     pagecachesize: 4,     forms: 'form',     scroll: false,     onstart: {       duration: 1200,       render: function($container) {         $container.addclass('is-exiting');         smoothstate.restartcssanimations();       }     },     onready: {       duration: 0,       render: function($container, $newcontent) {         $container.removeclass('is-exiting');         $container.html($newcontent);         $('html, body').scrolltop(0);       }     },     onafter: function($container) {       $container.onpageload();     }   };   var smoothstate = $('#main').smoothstate(options).data('smoothstate'); }); 

happy provide further assistance if needed.