Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have tried without "https:" and "//" as well. But still no luck.
Please let me know if I need to do anything else besides this.
If you are running the code locally, your HTML file should look like this:
<!DOCYTPE html>
<html>
<head>
<script src="url here"></script>
</head>
<body>
</body>
</html>
If that still does not work, you should put your code through the W3 Validator. You can view the errors with your HTML there.
In Codepen you need to go to settings.
Then choose JS and there you can add external libraries.
Thank you for the answers, Actually, I got the solution, I mistakenly added js/main.js instead of <script src="main.js"></script> .
And next thing I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.
Related
i am trying to link the moment.js library with my code , just getting started with javascript and i know the code works because i did it on another pc , now i transferred it to another pc and i changed the script tag yet idk what is the problem , i saved it with UTF - 8
<!DOCTYPE html>
<html>
<head>
<!-- reference Moment.js library -->
<script src="C:\Users\Rajarshi\Desktop\Internship\Raj_Intern\Date_Calculator_Project\moment.js" type="text/javascript"></script>
</head>
<body>
the code is fine and its just not working here
Your code is not working because you dont have that file on your computer. Add this script tag instead.
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
It will load MomentJS from CDN. Since you are a begginer you can use it this way until you get more into coding. :)
Firstly sorry for the post, I'm pretty new to coding, I'll try and keep it short and sweet.
Simply put, when I include my jQuery code inline, I.E. beneath my HTML, it works fine - the element I am trying to animate 'hides' and then 'shows' as it should.
However, when I make my own separate jquery.js file and put the code in there, it fails to render.
I've got the cdn script from google and included that, alongside a script and src to where my file is located inside my project folder, but still no luck.
Inside my project folder I have a 'script.js' folder, and then within that a 'jquery.js' file.
Here's the code:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="script.js/jquery.js"></script>
</head>
<div class="content">
<h2> Hi there</h2>
<h3> Take a look...</h3>
</div>
Here's the jQuery:
<script>
$(document).ready(function() {
$(".content").hide(1000).show(1000);
});
</script>
(Upon 'inspecting' the problem in chrome I get an error which says "jquery.js:1 Uncaught SyntaxError: Unexpected token <) - But I can't see where I am mis-using a '<'.
Thanks in advance, and please feel free to tell me if I have left out anything important.
You need to remove the <script> tags from your jquery.js file, those are HTML tags that are used for implementing inline JS, the error you are getting is because those tags are not valid JavaScript. Your JS file should just look like this:
$(document).ready(function() {
$(".content").hide(1000).show(1000);
});
As far as folder naming, there's nothing wrong with having a period in your folder name, but as others have suggested it would probably be a good idea to remove the .js part from your folder name even though it's not technically wrong and not what is causing your issue.
Don't call your folder script.js, just call it "script".
I downloaded the code from codepen.io and it does not work locally.
http://codepen.io/nanarth/pen/raarXe
I suspect that references to some libraries are not exported, but can figure out which.
Can anyone help me with this (I am new to this)
Thank you
UPDATE: Added the following code. Still not working
<head>
<meta charset="utf-8">
<title>Floor Plan - local coordinate map layers for D3.js</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script type="text/javascript" src="http://codepen.io/nanarth/pen/yyyqdL"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
Update #2: The screenshot of the error I am getting.
You're right, this pen is including external JS libs. Here's quick gif How to get there.
Those errors You got mean that jQuery libraries are not defined by the time that code runs. Ensure that:
You have copied JS code from the right pane in codepen
You have copied inline JS code from the left (html) pane in codepen
You wrap javascript in jQuery ready function
So what happens, is when then files are exported, one of the files is for some reason empty.
replacing
<script src='js/yyyqdl.js'></script>
with
<script src='http://codepen.io/nanarth/pen/yyyqdL.js'></script>
solved the issue.
Or the file can be downloaded and used locally and keep the old reference
I'm using this:
http://codesandnotes.com/sticky-elements/ (see the jsfiddle)
but I'm having problems in getting it to work. The pink css pulls through but it doesn't stick/doesn't change to red.
I've changed the article to an aside in the html and js. I'm using wordpress. I've added the js to the js folder and called it in the header which is pulling into the correct template. I've added the css to the main style.css. The js and css files are in different locations- could this be what's stopping the js being called?
Any help would be much appreciated. Thanks
is it fixed?
Anyway!
First add css and jQuery Library link to your WordPress Header. Then add html codes from the jsfiddle. after all the things done.
include copied js script file from the jsfiddle to the bottom of the page. See below code will help you to understand. but it's in html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="copied_css_file_from_the_jsfiddle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!-- jQuery Library -->
</head>
<body>
<p>This is the proper way <small>How to use css js and html in correct way</small></p>
<!-- add the html code from the JSFIDDLE-->
<script type="text/javascript">
$( document ).ready(function() {
//Copy and paste the script from the JSFIDDLE
});
</script>
</body>
Contact me by searching yeshansachithak in any social network. Thanks
I'm very new to the HTML5 world and I could use some help with how to use this javascript file.
jquery.autoanchors-0.3
It is found here. http://fredibach.ch/jquery-plugins/autoanchors.php
How do I do use this? How can I include this in the html file in the and the js file how will it automatically add the anchors/links to the html file?
<script src="js/jquery.autoanchors-0.3.js"></script>
Any help would be great.
Thanks
damon
as sachleen points out you'll need jQuery first.
Download jQuery (http://jquery.com/download/)
Include both jQuery and autoanchors into the head of your html file
Follow the instructions on the autoanchors page (http://fredibach.ch/jquery-plugins/autoanchors.php#usage)
Add this to the head section of your webpage, which will add jQuery to your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" /></script>
Download the Autoanchors.js file and add it to your site (put it in a folder named js):
<script type="text/javascript" src="js/jquery.autoanchors-0.3.js"></script>
Then follow the instructions on that site under "usage" which would look like this (this goes in the head, right under the line above):
<script>
$(document).ready(function(){
$("div.demo").autoAnchors();
});
</script>