Twitter Bootstrap Question posted in

Why is my jQuery script not working? – Twitter bootstrap

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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search