CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
AnneKok
AnneKok

Reputation: 35

jQuery Bootstrap isn't functioning

Sorry if this has been answered before, please link me if so, I couldn't find anything..

Basically, my jQuery worked fine on Bootstrap, up to the point I made a favicon. Now I think either my script / head tag alignment is off, so I tried to fix that for the past hour, but nothing is working.

Also putting the script at the end of the body, like normal, doesn't work. Not sure what I've done wrong here.

    <html lang="en"><head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- jQuery -->
    <script src="js/jquery-1.12.4.min.js"></script>

    <!-- CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Exo+2:400,300,700,900,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

 <!-- snip html -->

    <!-- jQuery Version -->
    <script src="js/jquery-1.12.4.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>




</body></html>

I know it's in there twice now, but neither works. What's wrong? :(

Edit: Dropdown doesn't work, this is the HTML for the dropdown: 

        <!-- Navigation -->
 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logo/logo.png" class="img-responsive img-icon" /></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-default">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

I changed some CSS for buttons, is that the problem? 

/* Navbar Colours - Fixing Dropdown */

.nav > li a {
    color: #e97117;
}

.nav > li a:hover, a:focus {
    color: #e97117;
}

/* Navbar link Colours */

.navbar-default a:hover, a:focus {
    color: #e97117 !important;
}

/* Button Colour */

.btn {
    color: #fff;
    font-family: 'Exo 2', sans-serif;
}

.btn-default:hover,
.btn-default:focus {
    color: #e97117;
    background-color: transparent;
    border-color: #e97117;
}

.btn-secondary {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: #fff;
    background-color: #e97117;
    border-color: #fff;
}

Upvotes: 1

Views: 169

Answers (6)

AnneKok
AnneKok

Reputation: 35

The problem was in the CSS.

I had added an overflow:hidden function which I read over because I was tunnel visioned onto jQuery.

J Delaney helped me find it and it's all fixed now.

Thanks everyone that tried to help me! You couldn't possibly have known without the whole code, but I still really appreciate your help!

Upvotes: 0

JonSG
JonSG

Reputation: 13087

As @jdelaney indicated, you are missing a key ID.

<div class="collapse navbar-collapse navbar-default" id="bs-example-navbar-collapse-1">

Also, in your code example the path to your js and css is "page relative" rather than "site relative" or "fully qualified". So, if you are testing on a page that is not your "homepage" it is quite possible that you are not loading those assets at all. Do you happen to see 404 errors at all in the console?

Anyways, this example seems to work for me with the @jdelaney suggested edit.

.nav > li a {
    color: #e97117;
}

.nav > li a:hover, a:focus {
    color: #e97117;
}

/* Navbar link Colours */

.navbar-default a:hover, a:focus {
    color: #e97117 !important;
}

/* Button Colour */

.btn {
    color: #fff;
    font-family: 'Exo 2', sans-serif;
}

.btn-default:hover,
.btn-default:focus {
    color: #e97117;
    background-color: transparent;
    border-color: #e97117;
}

.btn-secondary {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: #fff;
    background-color: #e97117;
    border-color: #fff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="img/logo/logo.png" class="img-responsive img-icon" />
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-default" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Upvotes: 3

dino
dino

Reputation: 31

I tried your example html and css code and I only changed the inclusion of jquery and bootstrap (removed the jquery from section and included jquery and bootstrap from cdn) and as you can see it works without any problems.

Double check if your jquery and bootstrap are included correctly (path to the files / version conflicts?).

    /* Navbar Colours - Fixing Dropdown */

    .nav > li a {
        color: #e97117;
    }

    .nav > li a:hover,
    a:focus {
        color: #e97117;
    }


    /* Navbar link Colours */

    .navbar-default a:hover,
    a:focus {
        color: #e97117 !important;
    }


    /* Button Colour */

    .btn {
        color: #fff;
        font-family: 'Exo 2', sans-serif;
    }

    .btn-default:hover,
    .btn-default:focus {
        color: #e97117;
        background-color: transparent;
        border-color: #e97117;
    }

    .btn-secondary {
        color: #fff;
        background-color: transparent;
        border-color: #fff;
    }

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: #fff;
        background-color: #e97117;
        border-color: #fff;
    }
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- CSS -->
    <link  href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- Fonts -->
    <link href='//fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Exo+2:400,300,700,900,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
    <body>

        <!-- Navigation -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="img/logo/logo.png" class="img-responsive img-icon" /></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-default">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <!-- jQuery Version -->
        <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    </body>

Upvotes: 0

Eesa
Eesa

Reputation: 2859

I think the problem arises when you include JQuery two times. I can see in your code you're referencing <script src="js/jquery-1.12.4.min.js"></script> at the two places. Remove the one in the head tag & try again.

Upvotes: 0

imvain2
imvain2

Reputation: 15847

<!DOCTYPE html>
   <html lang="en"><head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Exo+2:400,300,700,900,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
	
	<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
          </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-default">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



</body></html>

First thing I would try is in the head:

change

<script src="js/jquery-1.12.4.min.js"></script>

to

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Upvotes: 0

J Delaney
J Delaney

Reputation: 589

Look at the line defining the collapse button:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Notice how it has data-target. That refers to what element to look for to collapse. If you look at the example on the Bootstrap site you'll notice that the main navbar content div has that ID (which your HTML is missing):

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

Upvotes: 1

Related Questions