I can't manage to successfully link jQuery to my html. I have made the most simple jQuery code possible just so I know it's right, and I've tried everything I can think of - searching hasn't been helpful..
my html(file name: "test.html":
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="css/text" href="test.css"/>
<script type="text/javascript" src="test.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="orange"></div>
</body>
</html>
my CSS(file name: "test.css"):
#orange {
height: 100px;
width: 100px;
background-color: orange;
border-radius: 5px;
border: 3px solid black;
margin-left: 100px;
margin-top: 100px;
display: none;
}
my JS(file name: "test.js"):
$(document).ready(function() {
$('div').fadeIn('slow');
});
The console is showing that the jQuery link is loading in 6.52s.
I have also tried to link from the jQuery file I downloaded at
<script src="C:\jQuery\jquery.js"></script>
which also failed miserably...
I did however manage to link jQuery UI somehow and run ".accordion()"... =/
This question is related to
jquery
Add your test.js file after the jQuery libraries. This way your test.js file can use the libraries.
Seeing the answers I have nothing else to add but one more thing:
in your test.html file you have written
link rel="stylesheet" type="css/text" href="test.css"/
see where you have written
type="css/text"
there you need to change into
type="text/css"
so it will look like that
link rel="stylesheet" type="text/css" href="test.css"/
and in this case the CSS file will be linked to HTML file
I had a similar issue, but in my case, it was my CSS file.
I had loaded my CSS file before the JQuery library, since my jquery function was interaction with my css file, my jquery function wasn't working. I found this weird, but when I loaded the CSS file after loading the JQuery library, it worked.
This might not be directly related to the Question, but it may help others who might be facing a similar problem.
My issue:
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="slider.js"></script>
My solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="slider.js"></script>
Source: Stackoverflow.com