2

I'm a new craft user (previous EE user). trying to follow Zack Spear's directions (https://designbycosmic.com/journal/craft-cms-ajax-page-transitions-with-history-pushstate) for how to setup Ajax page transitions.

The final javascript example (the last code block) the new "loadPage" functions doesn't appears to have any line that actually loads the new content into $main. So when I implement the scripts as per those instructions, the fade in and out work, but the content that fades in is the same content from the previous page rather than the new content that should have replaced it.

Sorry if I'm being thick here, as I don't have a lot of Ajax experience. What do I need to add to the loadPage function to get this to work?

6

So I just went through my article step-by-step and I indeed missed adding the new content into $main. I think there may have been a versioning mistake in the article's code as I definitely tested it.

Anyways, here's an updated loadPage function for you. Which I will be adding to the article tomorrow. I've added a few extra things to ensure that there's no content (like the footer if you include it in layout.twig) jumping when the content switches out, so feel free to modify that.

loadPage = function(href) {

  $main.wrapInner('<div class="new-results-div" />');

  /* ----- Get height of new container inside results container and to ensure the footer doesn't jump up -----  */
  var newResultsHeight = $('.new-results-div').outerHeight();
  $main.height(newResultsHeight);

  $('.js-ajax-wrapper').velocity('transition.fadeOut', {
    /* ----- Upon completion of animating out content put user at top of page. ----- */
    complete: function(){
      $('html').velocity("scroll", {
        duration: 0,
        easing: "ease",
        mobileHA: false
      });
    }
  });

  $.ajax({
    type: 'POST',
    url: href,
    data: {},
    success: function(result){
      /* ----- HERE'S WERE THE CONTENT GET'S ADDED ----- */
      $main.html(result);

      /* ----- Wrap content in div so we can get it's height ----- */
      $main.wrapInner('<div class="new-results-div" />');

      /* ----- Get height of new container inside results container and set $main to it so there's no content jumpage -----  */
      var newResultsHeight = $('.new-results-div').outerHeight();
      $main.height(newResultsHeight);

      /* ----- Bring In New Content ----- */
      $('.js-main .js-ajax-wrapper').velocity('transition.fadeIn', {
        visibility: 'visible',
        complete: function() {
          /* ----- Removes the temp height from $main ----- */
          $main.css('height', '');
          ajaxLoad();
        }
      });
    },
    error: function(){
      console.log("error.");
      location.reload();
    }
  });

};

Apologize for any trouble due to the missing code. Feel free to let me know if you have any other questions.

| improve this answer | |
  • 1
    Zack - I'm also not having much luck with this. I have implemented it and what seems to be happening is that when I click on the menu items it updates the Title but where the content should go, it is just empty, or height: 0 ? I'm wondering If I've set my template up wrong. do i add: {% extends (craft.request.isAjax and not craft.request.isLivePreview) ? "_ajax-layout" : "_layout" %} to the _ajax-layout.twig file? – Chris Mousdale Nov 8 '16 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.