admin管理员组文章数量:1399945
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 = ".1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = ".12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
<script type = "text/javascript"
src=".3.7/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href=".3.7/css/bootstrap.min.css"/>
<!-- Font Awesome -->
<script src=".js"></script>
<!-- Google Fonts -->
<link href="+Script|Sofia" rel="stylesheet">
</head>
My CSS:
(which works just fine)
body {
margin-top: 60px;
background-image: url(".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 ments suggested and still nothing.
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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
<script type = "text/javascript"
src="https://cdnjs.cloudflare./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./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Font Awesome -->
<script src="https://use.fontawesome./7dd8dcb030.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis./css?family=Dancing+Script|Sofia" rel="stylesheet">
</head>
My CSS:
(which works just fine)
body {
margin-top: 60px;
background-image: url("https://flowerillust./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 ments suggested and still nothing.
- what error message do you receive in the console? – ZombieChowder Commented Jul 11, 2017 at 16:07
- Hit F12 in your browser and check the error console. Get used to doing that. – James Commented Jul 11, 2017 at 16:09
- @ZombieChowder Uncaught ReferenceError: $ is not defined at script.js:1 – Ryan Commented Jul 11, 2017 at 16:18
- This is because jquery is loaded after bootstrap. When bootstrap loads it look for jquery. Hence the error. – Ved Commented Jul 11, 2017 at 16:20
3 Answers
Reset to default 2Ideally, 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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQueryUI -->
<script type = "text/javascript" src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
<script type = "text/javascript" src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome./7dd8dcb030.js"></script>
<!-- custom script -->
<script type = "text/javascript" src="script.js" charset="utf-8"></script>
change the order of your js files
use JQuery first
<script type = "text/javascript"
src = "https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type = "text/javascript"
src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
本文标签： javascriptWhy is my jQuery script not workingStack Overflow
版权声明：本文标题：javascript - Why is my jQuery script not working? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744225271a2596057.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论