CODEWITHSUNDEEP
javascripthtmljquery
justin_graham92
justin_graham92

Reputation: 617

How to add jQuery code into HTML Page

$(".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

Upvotes: 58

Views: 426993

Answers (6)

user13369396
user13369396

Reputation: 19

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>

Upvotes: 0

mpalencia
mpalencia

Reputation: 5997

for latest Jquery. Simply:

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

Upvotes: 6

eQ19
eQ19

Reputation: 10691

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

Upvotes: 19

nikssa23
nikssa23

Reputation: 855

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>

Upvotes: 56

Rinus
Rinus

Reputation: 140

  1. Create a file for the jquery eg uploadfuntion.js.
  2. Save that file in the same folder as website or in subfolder.
  3. 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.

Upvotes: 4

Aravind Bharathy
Aravind Bharathy

Reputation: 1610

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>

Upvotes: 27

Related Questions