What is the proper syntax for adding JS to _main.js?

1

I am trying to add Parallax Scroller (https://github.com/echoeastcreative/ParallaxScroller) to a theme I am building and I don’t understand how it should be called in the _main.js file. The example used on the demo files is like so:

$(document).ready(function () {
var parallaxer = new ParallaxScroller();
parallaxer
	.addLayer('body section', 0.75, 'background')
	.addLayer('body section h1', -1.25, 'element')
	.addLayer('body section p', -2.5, 'element');
});

While running ‘grunt watch’ I update my _main.js file like so:

...
 home: {
    init: function() {
      $(document).ready(function () {
        var parallaxer = new ParallaxScroller();
        parallaxer
          .addLayer('body section', 0.75, 'background')
          .addLayer('body section h1', -1.25, 'element')
          .addLayer('body section p', -2.5, 'element');
      });


      // $('.carousel').carousel({ interval: 4000 });
    }
  },
...

And this error appears in the running log in the terminal:

Running "jshint:all" (jshint) task
Linting assets/js/_main.js ...ERROR
[L5:C22] W117: 'ParallaxScroller' is not defined.
var parallaxer = new ParallaxScroller();

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

How should JS be called in the _main.js file? I do not fully grok the example in the URL in the comments and there are no examples in any of the Roots documentation.

2

the js file is on dom ready to begin with.

if you want that particular function on its own on that try adding it like this:

home: {
    init: function() {    

$.fn.parallax= function() {
       var parallaxer = new ParallaxScroller();
    parallaxer
      .addLayer('body section', 0.75, 'background')
      .addLayer('body section h1', -1.25, 'element')
      .addLayer('body section p', -2.5, 'element');


   }; //end of parallax code

  $('body').parallax();//run parallaxforms

    }
  },
...

Hope this helps

3

First off, you don’t want $(document.ready() in the home init function, it’s not necessary.

Second, you are calilng ParallaxScroller, but jslint does not see it. If you check out the JSHint docs: http://www.jshint.com/docs/ , you can add a variable that is in a previous file so that JSHint will not error out when it cannot find it within that particular file. So you can add ParallaxScroller to the .jshint “globals”. That should work better.

1 Like
4

Went ahead and just made this change to the .jshintrc to avoid these issues:

5

I can’t get my _main.js working at all, it just throws errors in grunt watch all the time.
I updated the .jshintrc file, but that doesn’t change anything unfortunately.

Doesn’t even matter what I change in the _main.js, it just gives me errors about every plugin I placed in the plugins folder, while these errors don’t occur when building with grunt:

Running "jshint:all" (jshint) task
Linting assets/js/plugins/fresco.js ...ERROR
[L9:C70] W065: Missing radix parameter.
Linting assets/js/plugins/jquery.fitmaps.js ...ERROR
[L34:C10] W033: Missing semicolon.
Linting assets/js/plugins/jquery.fitvids.js ...ERROR
[L2:C1] E002: Bad option value.

etc…

Any ideas?

6

@Twansparant delete/comment this line https://github.com/roots/roots/blob/master/Gruntfile.js#L12

Basically some of the plugins you have don’t adhere to the JSHint rules. JSHint should really only be run on files that are your own. Not 3rd party libraries/plugins.

We need to look into fix for this. Might just be removing that line or restructuring the folders a bit.

7

Jup, that did the trick. Thanks!
Actually makes sense that third party plugins shouldn’t have to be checked by JSHint since you could expect them to be coded properly.

8

Well unfortunately not always :slight_smile: It’s more because they could use different coding styles (such as leaving semi-colons) and since it’s 3rd party you should technically leave it as is instead of modifying the source.