Animations Not Working

[jordan-webdev]

I'm not sure why, but I can't seem to get the animations working at all. Instead, when I click on a preview item, the panel just pops in, with no sizing or scrolling animation at all. I even tried using the default HTML in your sample, but the same issue.

$('.gridder').gridderExpander({ scrollOffset: 60, scrollTo: "panel", // panel or listitem animationSpeed: 400, animationEasing: "easeInOutExpo", showNav: true, // Show Navigation nextText: "a", // Next button text prevText: "a", // Previous button text closeText: "aa", // Close button text onStart: function() { //Gridder Inititialized console.log('On Gridder Initialized...'); }, onContent: function() { //Gridder Content Loaded console.log('On Gridder Expand...'); }, onClosed: function() { //Gridder Closed console.log('On Gridder Closed...'); } });

I do have the script enqueued with jQuery (I'm using WordPress), and I did include the CSS. Any clues what I should check for? I didn't include bootstrap, do I need that?

[jordan-webdev]

Another issue I found is that when I try to click a button inside of the panel, nothing happens. It's supposed to bring up a popup on click. I removed Gridder functionality and confirmed that it works without it. I'm guessing there's a preventDefault() somewhere in the script that's preventing this? How can I go about stopping that behaviour?

[jordan-webdev]

The button issue was my fault- I was trying to assign the click event to the button, but the button did not exist yet (as the popup did not exist yet). The solution was assigning it to the gridder element, like so

$('.gridder').on("click", ".js-request-btn", function() { // Code here.... });

However, I still had the animation issues. For anyone else with animation issues, this solution sort of works....put this in your onContent method

onContent: function() {
      //Gridder Content Loaded
      $(document.body).trigger('post-load'); // Useful for WordPress Jetpack lazyload images

      var gridder_show = $('.gridder-show');
      $(gridder_show).removeClass("active");
      $(gridder_show).addClass("active");


      var panelTop = $(gridder_show).offset().top;
      var mq = window.matchMedia("(max-width: 600px)");
      var match = mq.matches ? panelTop - 50 : panelTop - 100;

      $("html, body").animate({
        scrollTop: match
      }, 700, function() {
        $(gridder_show).focus();
      });

    },