miguel-perez / smoothState.js

Unobtrusive page transitions with jQuery.
MIT License
4.43k stars 508 forks source link

Wordpress not working #360

Open katrinabell opened 6 years ago

katrinabell commented 6 years ago

Not integrating properly with wordpress, the functions aren't even firing at all. I need to have the current content slide to the left as the new content slides from the right. But it isn't even reloading my pages with Ajax. Working with wordpress.

This is my code:

(function($){
  'use strict';
  var $page = $('#panel'),
      options = {
        //anchors: 'a',
        debug: true,
        prefetch: true,
        cacheLength: 7,
        blacklist: '.no-smoothState',
        prefetchOn: 'mouseover touchstart',

        onStart: {
          duration: 1250, // Duration of our animation
          render: function ($container) {

alert('working');
            // Add your CSS animation reversing class
            // and remove class page current
            smoothState.restartCSSAnimations();

          }

        },
        onReady: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            alert('working');
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();

            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      // onAfter: {
      //   //add class page current
      // },
      smoothState = $page.smoothState(options);
})(jQuery);
smoothscroll to top
(function () {
  'use strict';
  var $body    = $('html, body'), // Define jQuery collection
      content  = $('#panel').smoothState({
        onStart : {
          duration: 750,
          render: function () {
            content.restartAnimationClass('is-exiting');

            // Scroll user to the top
            $body.animate({ 'scrollTop': 0 });

          }
        }
      }).data('smoothState');
});

Can someone help please?? Or suggest another plugin to add page transitions.

ginsterbusch commented 6 years ago

Did you try this code while being logged in? I'm asking because WP adds a few "helpers" to JS which might interfere, esp. with the smoothscroll part. Eg. when clicking on the admin bar, WP executes a smooth scroll up to the top - so these events might overlap and cancel out each other. Further issues could arise from JS code supplied by the currently used theme, and maybe also thanks to the strongly dated version of jQuery in use even in the most current WordPress versions.

Also, whenever working with WP, I prefer to use the normal form of jQuery (ie. "jQuery" instead of the "$" short form), to avoid further issues.

cu, w0lf.

katrinabell commented 6 years ago

Hey,

The Ajax is the part not working. Sorry should have specified that in that posting.

The theme is a custom theme so there isn’t anything else going on there. I only have ACF and CPT as my plugins.

I already added the $ variable to my js files so that’s not the issue as I’ve already tested it both ways.

The pages are fully refreshing rather than pre loading with Ajax. On Wed, Apr 25, 2018 at 10:10 PM Fabian Wolf notifications@github.com wrote:

Did you try this code while being logged in? I'm asking because WP adds a few "helpers" to JS which might interfere, esp. with the smoothscroll part. Eg. when clicking on the admin bar, WP executes a smooth scroll up to the top - so these events might overlap and cancel out each other. Further issues could arise from JS code supplied by the currently used theme, and maybe also thanks to the strongly dated version of jQuery in use even in the most current WordPress versions.

Also, whenever working with WP, I prefer to use the normal form of jQuery (ie. "jQuery" instead of the "$" short form), to avoid further issues.

cu, w0lf.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/miguel-perez/smoothState.js/issues/360#issuecomment-384300691, or mute the thread https://github.com/notifications/unsubscribe-auth/ALd2MWtHxCanQXFaIwnerTVk4UdU5CQrks5tsIPGgaJpZM4TfrRw .

-- Katrina Bell front-end developer T 604 728 2558 http://www.katrinabell.com/

tobiasger commented 6 years ago

I'm having the same issue. No errors in the console and no other scripts (other than the core WP scripts) are present.

ginsterbusch commented 6 years ago

@tobiasger With what theme? When I tested it out with a classic _s-based theme, everything worked fine. But I wouldnt vouch for some kind of premium theme, which tend to be overloaded with excessive JS clutter ..

cu, w0lf.

katrinabell commented 6 years ago

It’s a custom theme built from underscores. with extremely minimal js. On Mon, Jun 18, 2018 at 8:21 AM Fabian Wolf notifications@github.com wrote:

@tobiasger https://github.com/tobiasger With what theme? When I tested it out with a classic _s-based theme, everything worked fine. But I wouldnt vouch for some kind of premium theme, which tend to be overloaded with excessive JS clutter ..

cu, w0lf.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/miguel-perez/smoothState.js/issues/360#issuecomment-398092124, or mute the thread https://github.com/notifications/unsubscribe-auth/ALd2MVBPn0yBd-mCSu2Z9OvPiGjPVBHlks5t98WTgaJpZM4TfrRw .

-- Katrina Bell front-end developer T 604 728 2558 http://www.katrinabell.com/

aneesijaz commented 4 years ago

same issue. not working with buddypress theme.

QuirkyWallace commented 4 years ago

Hello all,

Late to the party, but I'm having issues with X Theme Pro by Themeco. The page loads fine, but no animation and no CSS are loaded on the page. Styling only loads if the page has been previously visited (refresh or URL).

I think the theme's scripts are not being loaded, but not sure what I can do to fix it. Since SmoothState requires adding a container after body, I tried to apply X Theme's default #x-root and adding my own div. It does seems like not updating body classes (and perhaps head?) is problematic.

If anyone can shed some light on this or point me in the right direction, that'd be great. Thank you!