How to add jQuery code into HTML Page

Question

$(".icon-bg").click(function () {
    $(".btn").toggleClass("active");
    $(".icon-bg").toggleClass("active");
    $(".container").toggleClass("active");
    $(".box-upload").toggleClass("active");
    $(".box-caption").toggleClass("active");
    $(".box-tags").toggleClass("active");
    $(".private").toggleClass("active");
    $(".set-time-limit").toggleClass("active");
    $(".button").toggleClass("active");
});

$(".button").click(function () {
    $(".button-overlay").toggleClass("active");
});

$(".iconmelon").click(function () {
    $(".box-upload-ing").toggleClass("active");
    $(".iconmelon-loaded").toggleClass("active");
});

$(".private").click(function () {
    $(".private-overlay").addClass("active");
    $(".private-overlay-wave").addClass("active");
});

Can anyone help? It's for an upload function I found at http://codepen.io/iremlopsum/pen/YPWPap. Trying to get it into my website

I'm quite confused. If you just want to add it: put it in a file, and link to that JS-file in your html? If you don't know how to do that, I suggest you have a look here. Also, check this page — Jordumus
– Jordumus, Commented Apr 22, 2015 at 11:32
Before copy paste this code, does you page have the elements that is matching the selectors in this code ? — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Apr 22, 2015 at 11:32
Possible duplicate stackoverflow.com/questions/14106864/linking-jquery-in-html — Manoj Kumar
– Manoj Kumar, Commented Apr 22, 2015 at 11:33

Animesh Mishra · Accepted Answer · 2017-05-20 09:13:37Z

57

1) Best practice is to make new javascript file like my.js. Make this file into your js folder in root directory -> js/my.js . 2) In my.js file add your code inside of $(document).ready(function(){}) scope.

$(document).ready(function(){
    $(".icon-bg").click(function () {
        $(".btn").toggleClass("active");
        $(".icon-bg").toggleClass("active");
        $(".container").toggleClass("active");
        $(".box-upload").toggleClass("active");
        $(".box-caption").toggleClass("active");
        $(".box-tags").toggleClass("active");
        $(".private").toggleClass("active");
        $(".set-time-limit").toggleClass("active");
        $(".button").toggleClass("active");
    });

    $(".button").click(function () {
        $(".button-overlay").toggleClass("active");
    });

    $(".iconmelon").click(function () {
        $(".box-upload-ing").toggleClass("active");
        $(".iconmelon-loaded").toggleClass("active");
    });

    $(".private").click(function () {
        $(".private-overlay").addClass("active");
        $(".private-overlay-wave").addClass("active");
    });
});

3) add your new js file into your html

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</head>

edited May 20, 2017 at 9:13

Animesh Mishra

397 bronze badges

answered Apr 22, 2015 at 11:40

nikssa23

8657 silver badges8 bronze badges

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

3 Comments

Asara Over a year ago

its even better to download the jquery file and load it locally from your server and not from google

StefanE Over a year ago

@Asara why is this better? The way I understood is that the use of a CDN can greatly improve performance

nathanfranke Over a year ago

Be careful copying the final code block; It is not the latest version now

Aravind Bharathy · Accepted Answer · 2015-04-22 11:34:10Z

27

Before the closing body tag add this (reference to jQuery library). Other hosted libraries can be found here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

And this

<script>
  //paste your code here
</script>

It should look something like this

<body>
 ........
 ........
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script> Your code </script>
</body>

answered Apr 22, 2015 at 11:34

Aravind Bharathy

1,6103 gold badges16 silver badges32 bronze badges

Comments

eQ19 · Accepted Answer · 2019-06-18 14:18:17Z

I would recommend to call the script like this

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</body>

The js and css files must be treat differently

Put jquery as the first before other JS scripts at the bottom of <BODY> tag

The problem caused is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname.
So select 2 (two) most important scripts on your page like analytic and pixel script on the <head> tags and let the rest including the jquery to be called on the bottom <body> tag.

Put CSS style on top of <HEAD> tag after the other more priority tags

Moving style sheets to the document HEAD makes pages appear to be loading faster. This is because putting style sheets in the HEAD allows the page to render progressively.
So for css sheets, it is better to put them all on the <head> tag but let the style that shall be immediately rendered to be put in <style> tags inside <HEAD> and the rest in <body>.

You may also find other suggestion when you test your page like on Google PageSpeed Insight

mpalencia · Accepted Answer · 2019-07-29 06:59:31Z

7

for latest Jquery. Simply:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

answered Jul 29, 2019 at 6:59

mpalencia

6,0875 gold badges49 silver badges62 bronze badges

Comments

Rinus · Accepted Answer · 2015-04-22 12:04:24Z

4

Create a file for the jquery eg uploadfuntion.js.
Save that file in the same folder as website or in subfolder.
In head section of your html page paste: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

and then the reference to your script eg: <script src="uploadfuntion.js"> </script>

4.Lastly you should ensure there are elements that match the selectors in the code.

answered Apr 22, 2015 at 12:04

Rinus

1401 silver badge9 bronze badges

Comments

user13369396 · Accepted Answer · 2020-11-22 05:23:17Z

0

Make sure that you embedd the jQuery library into your page by adding the below shown line into your <head> block:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

edited Nov 22, 2020 at 5:23

answered Apr 21, 2020 at 8:06

user13369396

191 bronze badge

1 Comment

Paul van den Dool Over a year ago

Hi, thank you for your (first) post. This answer does not give any context. How does this solve any of the issues that still exist in this thread?

Collectives™ on Stack Overflow

How to add jQuery code into HTML Page

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related