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>