Smoothstate.js: preventing header reloading even though these links trigger a page change

smoothstate.js requires links that trigger the ajax call to be inside the #main div that hosts the content to be updated. However, I need the title and links placed inside to stay omitted from the content swap, preferably only to reload the content in the specified div.content.

Is there a way to use smoothstate.js to prevent header links from being reloaded even though they are inside the updated #main div that is being updated?

I got the idea to separate the content of the div from the $ newContent object returned by the onReady function. However, although I can highlight the specified div, passing the returned object to the html fails.

(function header_init() {

        anchors: 'a',
        blacklist: '.no-ajax',
        prefetch: true,
        cacheLength: 4,
        repeatDelay: 500,

        onStart: {
            duration: 300,
            render: function ($container) {
        onReady: {
            duration: 300,
            // `$container` is a `jQuery Object` of the current smoothState container
            // `$newContent` is a `jQuery Object` of the HTML that should replace the existing container HTML.
            render: function ($container, $newContent) {

                // Update the HTML on the page
                var content = $($newContent).find('.main-content');
                // $container.html($newContent);
        onAfter: function ($container, $newContent) {
            // after page loads, all scripts must be re-initialize to account for any new DOM items



source to share

All Articles