1

How do I use jQuery through a Drupal 8 module? I'm trying to get some jquery code running on a drupal 8 website. It's a div animation that randomly moves the div within a wrapper. I've added the JS and CSS files and they're both showing in the source. I've then added the Div ID of 'container' to html.html.twig(yes I copied it into my theme folder first) -

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
    'container',
  ]
%}

Also added a div to use for this. Again in html.html.twig

<js-bottom-placeholder token="{{ placeholder_token|raw }}"> //**Not part of my code just adding it for comparison.
   <div class='fly'>TEST DIV, IF I MOVE I'M WORKING!</div>

So the files show up in the source and the source also shows that the div ID of container has been added.

Here's the jQuery code, keep in mind that I've adjusted it to work with Drupal 8 so there's probably a syntax error or two.

$.extend(Drupal.theme, {
  animateDiv: (function() {
    ($('.fly')); }), 

* Almost certain the problem is here ^^^

  makeNewPosition: function ($container) {
    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 10;
    var w = $container.width() - 10;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
},

animateDiv: function ($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

},

calcSpeed: function (prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.23;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}  



});

Here's the CSS code

.fly {
width: 50px;
height:50px;
background-color: red;
position:fixed;

}

That's what I've tried and yet there's still no jQuery activity, I've also tried using different types for class names(.div instead of #div etc) which I think is where the problem is. The flying div shows but isn't being styled and there's no jQuery. What am I doing wrong?

Update: After playing with the code for awhile I've managed to at least get the style to show on the div. jQuery still a no show though..

This isn't the same jquery code but it's similar and it's what I would like, the div floats around the entire page, I've tried using this code as well but I still get the same problem as above. http://jsfiddle.net/Xw29r/15/

  • How did you add your jQuery code? Did you create a library? – No Sssweat Sep 11 '16 at 21:19
  • I first tried to add it to a template I'm working on, but then attempted to move it to a new module folder but it doesn't want to leave the templates one(I think a cache clear should fix this). In both cases I added the JS code via the libraries.yml file. The JS code gets loaded, I can see it in the pages source when I load it, the div just isn't using it. Thanks for your help :) – Krypton Sep 11 '16 at 21:22
1

In Drupal 7 and 8 your JS code needs to be wrapped like this:

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {

    //custom code goes here

  }
};
})(jQuery);

To test, put the following code inside your JS file.

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {

    //code starts
    $("body").click(function() {
      alert("Hello World");
    });
    //code ends

  }
};
})(jQuery);

Now when you click in the body, you should get an alert saying hello world.

For more info read the JavaScript API in Drupal 8

  • 1
    :D Your little test worked! Just got my code working! You just saved me hours of scratching my head wondering If my losing it. THANK YOU! – Krypton Sep 11 '16 at 21:51
  • @Krypton no problem :) I added a link to the Drupal docs that talks about it. – No Sssweat Sep 11 '16 at 22:00

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.