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](http://www.w3schools.com/js/default.asp). Also, check [this page](http://stackoverflow.com/help/how-to-ask) — Jordumus, Apr 22 '15 at 11:32
Before copy paste this code, does you page have the elements that is matching the selectors in this code ? — Vigneswaran Marimuthu, Apr 22 '15 at 11:32
Possible duplicate http://stackoverflow.com/questions/14106864/linking-jquery-in-html — Manoj Kumar, Apr 22 '15 at 11:33

score 55 · Accepted Answer · edited May 20 '17 at 09:13

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>

its even better to download the jquery file and load it locally from your server and not from google — Asara, Aug 28 '18 at 14:17
@Asara why is this better? The way I understood is that the use of a CDN can greatly improve performance — StefanE, Feb 14 '19 at 09:30
Be careful copying the final code block; It is not the latest version now — nathanfranke, Jun 16 '19 at 21:43

score 26 · Answer 2 · answered Apr 22 '15 at 11:34

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>

eQ19 · Answer 3 · 2019-06-18T14:18:17.020

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

score 6 · Answer 4 · answered Jul 29 '19 at 06:59

6

for latest Jquery. Simply:

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

answered Jul 29 '19 at 06:59

mpalencia

5,481
4
45
59

score 4 · Answer 5 · answered Apr 22 '15 at 12:04

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.

user13369396 · Answer 6 · 2020-11-22T05:23:17.640

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 '20 at 05:23

answered Apr 21 '20 at 08:06

user13369396

19
1

2

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? – Paul van den Dool Apr 21 '20 at 08:17

How to add jQuery code into HTML Page

6 Answers6

Linked