Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery localScroll ajax breaks when using window.history.pushState

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #150042
    Nathan Adams
    Participant

    I’ve got a website where I’m using ajax to load each page of the site, primarily to switch between a blog page and a folio page. I’m loading new content into the main content area, as well as the sub-navigation. On the folio page, I’m using the jQuery localScroll plugin with the links in the sub-navigation.

    This all works fine if the folio page is the initial page loaded. If any of the other pages on the site are loaded first, and I switch to the folio page, localScroll no longer works. Loading the folio page first, switching to another page, is fine.

    I’ve worked backwards, and it seems that the issue only occurs if I use window.history.pushState (to change the url of the page). If I remove that, and leave everything else, localScroll works again.

    I’ve even tried just adding window.history.pushState to the ajax demo that comes with localScroll and it happens there too.

    Is there any reason why window.history.pushState might be breaking localScroll, and is there anyway to get it working again?

    I’ve included a trimmed version of my code below. Thanks in advance.

    $(document).ready(function(){
    
        $('#nav-subnav').localScroll({
            lazy: true,
            target: scrolltarget
        });
    
        $(document.body).on('click', '#nav a', function() {
            pageLoad(this);
            return false; 
        });
    
    });
    
    function pageLoad(t){        
        //e.preventDefault();
        var $link = $(t).prop('href');
        if ($link != window.location.href) {
            window.history.pushState({path:$link},'',$link);
            $('#content').add('#nav-submenu').animate({opacity: 0},500, function() {
                $.ajax({
                    url: $link,
                    success: function(content) {
                        var newTitle = $(content).filter('title').text();
                        document.title = newTitle;
                        $('#nav-subnav').html($(content).find('#nav-subnav .submenu'));
                        $('#content').html($(content).find('#content #wrapper'));
                        $('#content').add('#nav-subnav').animate({opacity: 1},500);
                     }
                }); 
            }); 
        }
        return false; 
    };
    
Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.