2

I would like to add a little javascript to my bootstrap child-theme, but is not loading.

These are the configuration files:

child.info.yml :

 core: 8.x
type: theme
base theme: bootstrap

name: 'child'
description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.'
package: 'Bootstrap'

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

libraries:
  - 'child/global-styling'

child.libraries.yml:

global-styling:
  css:
    theme:
      css/style.css: {}
      css/masonry.css: {}
      css/basic-page.css: {}   

  js:
  js/main.js: {}
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

main.js

$(document).ready(function($) {
    $(function() {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
    });
})(jQuery);
5
  • instead of using '$' sign use 'jQuery'
    – user59414
    Mar 14 '17 at 10:28
  • no, that didn't work
    – jimi
    Mar 14 '17 at 10:44
  • The JavaScript needs to be compatible with Drupal by wrapping it in an anonymous closure and passing in the $ variable. Consult the docs on writing JS and Drupal behaviors for an example
    – Kevin
    Mar 14 '17 at 11:08
  • Also I'm betting your YAML isn't formatted correctly.
    – Kevin
    Mar 14 '17 at 11:25
  • indeed, when i updated my YAML the javascript was loading.
    – jimi
    Mar 14 '17 at 18:22
2

Change

$(document).ready(function($) {
    $(function() {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
    });
})(jQuery);

to

Drupal.behaviors.basic = {
   attach: function (context, settings) {
   (function($) {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
   })(jQuery);
  }

};

6
  • Get rid of document ready and use Drupal.behaviors.
    – Kevin
    Mar 14 '17 at 11:07
  • @Kevin it's better solution,I update the answer
    – Yuseferi
    Mar 14 '17 at 11:10
  • Making it a behavior is equivalent of "document ready"
    – Kevin
    Mar 14 '17 at 11:12
  • @Kevin thanks, I know that. but sometimes in debugging it's better to bypass layers to find the bug faster.
    – Yuseferi
    Mar 14 '17 at 11:17
  • this worked for me
    – jimi
    Mar 14 '17 at 18:22
2

Two things.

One, YAML has to be properly formatted. In another question, I recommended using YAML Lint to ensure you have the right structure.

Should be:

global-styling: 
  css: 
    theme: 
      css/basic-page.css: {}
      css/masonry.css: {}
      css/style.css: {}
  dependencies: 
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once
  js: 
    js/main.js: {}

Also, it is best to split your style and Javascript into two definitions but I suppose thats up to you.

Two, your Javascript has to be compatible with Drupal per the docs.

Instead of:

$(document).ready(function() {
    $(function() {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
    });
})();

What you want is:

(function($) {
    Drupal.behaviors.windowScroll = {
      attach: function (context, settings) {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
      });
    }
})(jQuery);

Note: Since Drupal uses jQuery.noConflict() and only loads JavaScript files when required, to use jQuery and the $ shortcode for jQuery you must include jQuery and Drupal as dependencies in the library definition in your MODULE.libraries.yml and add a wrapper around your function.

(function ($, Drupal) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
     $(context).find('input.myCustomBehavior').once('myCustomBehavior').each(function () {
      // Apply the myCustomBehaviour effect to the elements only once.
    });
    }
  };
})(jQuery, Drupal);
0

In your-theme.libraries.yml file:

base:

 version: 1.x

js:

 js/main.js: {}

In your-theme.info.yml file:

libraries:

 - 'your-theme/global-styling'

 - 'your-theme/base'

Try above method worked on my previous drupal8 website, i think your js file is not loading.

Also place a js folder in your bootstrap subtheme along with your main.js file

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.