How to combine multiple jquery functions to sinle custom jquery file

Question

I have written multiple jquery function in my footer for carousel,hiding toggle bar menu on click etcc.But instead of adding in footer i need to create one custom.js file and paste all this code and call that js file. I have tried in this way but it didn't work.

<script type="text/javascript">
    $(function () {
        $('.nav a').filter(function () { return this.href == location.href }).parent().addClass('active').siblings().removeClass('active')
        $('.nav a').click(function () {
            $(this).parent().addClass('active').siblings().removeClass('active')
        })
    })

        (function () {
            $('#carousel123').carousel({ interval: 2000 });
            $('#carouselABC').carousel({ interval: 3600 });
        }());

    (function () {
        $('.carousel-showmanymoveone .item').each(function () {
            var itemToClone = $(this);

            for (var i = 1; i < 4; i++) {
                itemToClone = itemToClone.next();

                // wrap around if at end of item collection
                if (!itemToClone.length) {
                    itemToClone = $(this).siblings(':first');
                }

                // grab item, clone, add marker class, add to collection
                itemToClone.children(':first-child').clone()
                    .addClass("cloneditem-" + (i))
                    .appendTo($(this));
            }
        });
    }());

    $(function () {
        $('#ChangeToggle').click(function () {
            $('#navbar-hamburger').toggleClass('hidden');
            $('#navbar-close').toggleClass('hidden');
        });
    });

    $(document).on('click', function () {
        $('.collapse').collapse('hide');
        $('#navbar-hamburger').toggleClass('show');
        $('#navbar-close').toggleClass('hidden');
    })
</script>

possible duplicate of https://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file — Matt.S, Jan 08 '19 at 08:15
@Matt.S the question which you have posted was How do I link a JavaScript file to a HTML file? but my question how to write all the jquery function in a single file like keeping as custom.js file i know how to link the file but how to add multiple functions into a single file — tester, Jan 08 '19 at 08:17
yeah thats how you do it... you can write as many functions as you want in the .js file — Matt.S, Jan 08 '19 at 08:20

score 2 · Accepted Answer · answered Jan 08 '19 at 08:18

2

Create custom.js file and past your code in this file, remove <script> from custom.js in custom.js no need to enclose your script with <script type="text/javascript"></script> so remove this.

Include this file from your main page <script src="YOUR_PATH/custom.js"></script>

answered Jan 08 '19 at 08:18

AJAY MAURYA

541
3
11

i have tried in the same as well but it is not working i mean it is not calling that js file – tester Jan 08 '19 at 08:20
did you link the .js file before linking your jquery? – Matt.S Jan 08 '19 at 08:21
include it in last where you included your other js library's – AJAY MAURYA Jan 08 '19 at 08:22

score 0 · Answer 2 · answered Jan 08 '19 at 08:26

Check out the module pattern. Basically you have to put all of these functions in an object or a self invoking function, and put that in your custom file. Import that file, you will have these functions available in the source that uses it. Although you might have to make sure the references for the elements are available there.

https://coryrylan.com/blog/javascript-module-pattern-basics

How to combine multiple jquery functions to sinle custom jquery file

2 Answers2