Why is my jQuery script not working?
Question
I've looked at dozens of Stack Overflow questions and Googled a thousand different solutions and I just can't seem to figure out the problem. I'm a total noob to web development and I just want this simple page to work. Can someone please show me what I'm doing wrong? It's probably a really dumb mistake with an easy solution.I do apologize in advance. Thanks!
My HTML head:
<head>
<meta charset="utf-8">
<title>Sheila Mary Daniels</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Local scripts and sheets -->
<link rel="stylesheet" href="style.css">
<script type = "text/javascript" src="script.js" charset="utf-8"></script>
<!-- jQuery -->
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
<script type = "text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/7dd8dcb030.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Sofia" rel="stylesheet">
</head>
My CSS:
(which works just fine)
body {
margin-top: 60px;
background-image: url("https://flowerillust.com/img/flower/flower-back0950.jpg");
background-size: cover;
}
#image {
display: block;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 900px;
}
p {
font-size: 20px;
margin-bottom: 30px;
margin-top: 20px;
}
#header {
margin-bottom: 10px;
font-size: 70px;
color: Purple;
font-family: Dancing Script;
/* font-family: Sofia */
}
.scripture {
font-family: Dancing Script;
float: right;
margin-right: 150px;
}
a:hover {
text-decoration: underline;
}
My JavaScript:
$(document).ready(function() {
$("#header").hide().fadeIn(5000);
$("#image").hide().fadeIn(5000);
});
I know there's nothing wrong with my code because my CodePen works just fine. Both my CSS and my JS are external files. As you can see the CSS works perfectly. No idea what I'm doing wrong with the JS.
EDIT:
I've reordered my <link> and <script> tags as the comments suggested and still nothing.
3 answers
solution1
1 2017-07-11 16:08:52
change the order of your js files
use JQuery first
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type = "text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
solution2
1 2017-07-11 16:08:56
I guess you need to add Jquery before bootstap.js file. This may be the potential reason.Just try after reordering it.
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
solution3
1 ACCPTED 2017-07-11 16:21:57
Ideally, you want to include jQuery first, then bootstrap (or other downloaded scripts that depends of jQuery), then your custom script
so it would be like this
<!-- jQuery -->
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQueryUI -->
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/7dd8dcb030.js"></script>
<!-- custom script -->
<script type = "text/javascript" src="script.js" charset="utf-8"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.