$(".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 . Trying to get it into my website
46 Answers
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=""></script>
<script src="/js/my.js"></script>
</head>Before the closing body tag add this (reference to jQuery library). Other hosted libraries can be found here
<script src=""></script>And this
<script> //paste your code here
</script>It should look something like this
<body> ........ ........ <script src=""></script> <script> Your code </script>
</body>I would recommend to call the script like this
...
<script src=""></script>
<script src="/js/my.js"></script>
</body>The js and css files must be treat differently
Put
jqueryas the first before otherJS scriptsat the bottom of<BODY>tag
- The problem caused is that they block parallel downloads. The
HTTP/1.1 specificationsuggests 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 thejqueryto be called on the bottom<body>tag.
Put
CSS styleon top of<HEAD>tag after the other more priority tags
- Moving style sheets to the document
HEADmakes pages appear to be loading faster. This is because putting style sheets in theHEADallows the page to render progressively. - So for
csssheets, 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
for latest Jquery. Simply:
<script src=""></script>- Create a file for the jquery eg uploadfuntion.js.
- Save that file in the same folder as website or in subfolder.
- In
headsection of your html page paste:<script src=""></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.
Make sure that you embedd the jQuery library into your page by adding the below
shown line into your <head> block:
<script src=""></script>
