Creating custom .js file

Question

I'd like to create a custom .js file for my website so that I do not have to keep linking it within my webpages, my code works when used inline .

Please could someone tell me why my styles.js page wont link? I'm thinking that my code is wrong?

The current page is 'styles.js', the link I use is:

$(document).ready(function() {

            $('#nav').affix({
      offset: {
        top: 90
      }
}); 

$('#sidebar').affix({
      offset: {
        top: 17
      }
}); 

        });


$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 50) {
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-to-top').click(function() {
        $('#back-to-top').tooltip('hide');
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
    $('#back-to-top').tooltip('show');

});

please provide more information, where are you linking it can you add that code as well? — ANshul Sharma, Mar 03 '17 at 10:04
What is your folder structure and where is the script located relative to the html page? — aUserHimself, Mar 03 '17 at 10:07
just a side note: its always a good practice to add scripts at the end of the body — ANshul Sharma, Mar 03 '17 at 10:08
the styles.js is located within a 'js' folder, this folder is within the same parting as the html pages. — etwestlake, Mar 03 '17 at 10:09
@ANshulSharma offtopic: it's debatable whether scripts should "always" go at the end of the body. If they use `document.ready` then it makes little difference - as long as they are in correct order of course. http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file — freedomn-m, Mar 03 '17 at 10:15

score 0 · Answer 1 · answered Mar 03 '17 at 10:09

A few things to check first:

Check your styles.js file is actually being included, make sure you have no HTML errors when including it and that your file path is correct.
Make sure styles.js is included further down in the source code than jQuery.

If both of the above seem OK, it could be that something is overwriting $ before your code is ran, try wrapping your code in this:

(function($) {
    // Your code here
})(jQuery);

This will force $ to be jQuery within the scope of the function.

Thank you so much, this works great now! The linking was fine, thinking that there was maybe one too many '});' in the last part. — etwestlake, Mar 03 '17 at 10:16

Creating custom .js file

1 Answers1