$(".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
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>
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>
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
jqueryas the first before otherJS scriptsat the bottom of<BODY>tag
HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. <head> tags and let the rest including the jquery to be called on the bottom <body> tag.Put
CSS styleon top of<HEAD>tag after the other more priority tags
HEAD makes pages appear to be loading faster. This is because putting style sheets in the HEAD allows the page to render progressively.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