jquery and bootstrap.js not working
Question
Hello people please help!
I have gone through all the jquery issues in stackoverflow. I tried some of the solutions but i am not getting the result as i want. I am making a one page website for my company but i am having trouble in bringing responsiveness to it.
The code is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css" />
</head>
<body>
<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Top Accountant</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#"class="dropdown-toggle" data-target=".dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- End of Navigation -->
<!--Image slider-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--images size should be 1920-741 px -->
<div class="item active">
<img src="img/accountancy-services.png" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/images.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/accountant-9-tips.png"/>
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="Prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="Next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--End Image slider-->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.js"></script>
There are few things which i have made so far.
1.) When the website is viewed in mobile or tab the nav bar disappears and a toggle button appears. This is working fine.
2.) I have dropdown menu in services which is not working for me. 3.) I have made a carousel as well which is sliding perfectly but not responding to the the left and right click icon.
I don't know what's the problem as 1 is working fine but 2 & 3 are not working.
Please help me in this matter and advise me where am i going wrong.
Thanks in advance.
5 answers
solution1
2 ACCPTED 2016-02-09 13:18:15
Double check the docs for working markup examples. There are few problems with your markup. Use data-toggle="dropdown" for the dropdown, and your href/class attributes are not spaced. Remove the data-target for the dropdown.
As far as the carousel goes, next and prev are case sensitive so you need to use data-slide="prev" . Also, since you're using navbar-fixed-top don't forget to add body {padding-top: 50px;} or the navbar will overlay your carousel content.
Here's a working update: http://codeply.com/go/gJvCndru8B
solution2
0 2016-02-09 13:15:32
Script elements should put in the Header element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Top Accountant</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#"class="dropdown-toggle" data-target=".dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- End of Navigation -->
<!--Image slider-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--images size should be 1920-741 px -->
<div class="item active">
<img src="img/accountancy-services.png" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/images.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/accountant-9-tips.png"/>
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="Prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="Next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--End Image slider-->
</body>
</html>
solution3
0 2016-02-09 13:15:39
Replace your entire html code with this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Top Accountant</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 1</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- End of Navigation -->
<!--Image slider-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--images size should be 1920-741 px -->
<div class="item active">
<img src="img/accountancy-services.png" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/images.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/accountant-9-tips.png"/>
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
<p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="Prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="Next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--End Image slider-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
solution4
0 2016-02-09 13:15:53
To repair your dropdown :
data-toggle=".dropdown" => data-toggle="dropdown" without the .
For the carousel, I don't understand your problem, but take a look at the documentation
solution5
-1 2016-02-09 13:09:32
从他们的官方网站下载Jquery。然后添加头<script src="js/jquery"></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.
Related Question
jquery.js and bootstrap.js conflict
Bootstrap.js has to load before jQuery
RequireJS and local bootstrap.js file not working
How to open a Bootstrap modal without jQuery or bootstrap.js javascript?
Local fallback for jquery.js, bootstrap.css and bootstrap.js incase CDNs are down or locall internet is not working
how to bootstrap.js confliction with two versions of jquery
Jquery And Bootstrap.js - DIV would show but not hide
Django served bootstrap.js file not working in mobile
Nested Objects in Bootstrap.js
Load dependecy in bootstrap.js
Related Tags