Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wordpress not working #360

Open
katrinabell opened this issue Apr 23, 2018 · 7 comments
Open

Wordpress not working #360

katrinabell opened this issue Apr 23, 2018 · 7 comments

Comments

@katrinabell
Copy link

katrinabell commented Apr 23, 2018

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
Copy link

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
Copy link
Author

katrinabell commented Apr 26, 2018 via email

@tobiasger
Copy link

tobiasger commented Jun 18, 2018

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

@ginsterbusch
Copy link

@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
Copy link
Author

katrinabell commented Jun 18, 2018 via email

@aneesijaz
Copy link

same issue.
not working with buddypress theme.

@QuirkyWallace
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants