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 stackoverflow.com/questions/13739568/… — Matt.S
– Matt.S, Commented Jan 8, 2019 at 8: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
– tester, Commented Jan 8, 2019 at 8:17
yeah thats how you do it... you can write as many functions as you want in the .js file — Matt.S
– Matt.S, Commented Jan 8, 2019 at 8:20

AJAY MAURYA · Accepted Answer · 2019-01-08 08:18:52Z

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 8, 2019 at 8:18

AJAY MAURYA

5513 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tester Over a year ago

i have tried in the same as well but it is not working i mean it is not calling that js file

Matt.S Over a year ago

did you link the .js file before linking your jquery?

AJAY MAURYA Over a year ago

include it in last where you included your other js library's

Rutwick Gangurde · Accepted Answer · 2019-01-08 08:26:05Z

0

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

answered Jan 8, 2019 at 8:26

Rutwick Gangurde

4,93212 gold badges56 silver badges91 bronze badges

Collectives™ on Stack Overflow

How to combine multiple jquery functions to sinle custom jquery file

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related