Where and how to include custom js?

Hi i’d like to implement this simple example into roots:
http://bootply.com/109943

Sorry for the very maybe obvious question but please, I need to know WHERE in Roots do I have to put the js code?:

    $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('nav').addClass('shrink');
      } else {
        $('nav').removeClass('shrink');
      }
    });

I’ve tried to add it into _main.js like so:

    // Use this variable to set up the common and page specific functions. If you 
    // rename this variable, you will also need to rename the namespace below.
    var Roots = {
      // All pages
      common: {
        init: function() {
          // JavaScript to be fired on all pages
          $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('nav').addClass('shrink');
      } else {
        $('nav').removeClass('shrink');
      }
    });
        }
      },
      // Home page
      home: {
        init: function() {
          // JavaScript to be fired on the home page
        }
      },

I look for any docs about this but nothing found. ;(

As you’re using jQuery you have to add it at the very bottom of _main.js, after the line saying

})(jQuery); // Fully reference jQuery after this point.

1 Like

thanks psteinweber!
Now I have:

})(jQuery); // Fully reference jQuery after this point.

$(window).scroll(function() {
if ($(document).scrollTop() > 150) {
$(‘nav’).addClass(‘shrink’);
} else {
$(‘nav’).removeClass(‘shrink’);
}
});

I also added .shrink class with a red background…
I have not js skills but this piece of code seems to be simple & clear.
Do u know if it is needed to do something else to make this code to work?
Help would be appreciated!

It should work fine using the DOM routing (as per your first attempt) but you need to run Grunt after making changes to _main.js (or any other scripts or styles).

If it’s still not working after that, check your console.

1 Like

Oh yeah Foxaii, I not use Grunt, by the moment I use Codekit and it did the job. Thanks!

BUT now in the new file scripts.min.js all previous Bootstrap scripts have been overwritted.

Could you indicate from where can I attach them again in order to minify and concatenate correctly?

Do i have to add a line in scripts.php?
like:
wp_register_script(‘roots_scripts’, get_template_directory_uri() . ‘/assets/js/plugins/bootstrap/bootstrap.min.js’, array(), ‘0fc6af96786d8f267c8686338a34cd38’, true);

?

The Gruntfile.js will always show how Roots handles the Bootstrap scripts. All the JS is in one file, the Bootstrap scripts are each imported individually, before a wildcard include for other plugins and then _*.js.

I’ve forget CodeKit and begin to learn Grunt
Now all goes fine.
:wink:

I am using the Fotorama plugin for my image sliders on a site I’m building with Roots, and I needed to include the following function

$(’.fotorama’)
.on(‘fotorama:show’, function (e, fotorama) {
fotorama.$caption = fotorama.$caption || $(this).next(’.fotorama-caption’);
fotorama.$caption.text(fotorama.activeFrame.caption);
})
.fotorama();

so I could place my image captions outside fotorama’s main container, as seen here

my problem is I can’t load that bit of code only for a specific page/template , as it doesn’t work properly if called via “onload()” method, like in this example (doesn’t work for first loaded image, only after ‘sliding’ to another)

I had to load it at the bottom of my _main.js file like suggested here on the first answers of this thread, but I’d like to know if it’s possible to make it load this way only for specific page-templates, in case I need to use fotorama with its default caption behaviour on other pages