when I click on link in mobile it is not working.
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
Related
I'm trying to change the class of a <span> tag depending on whether aria-expanded is true or false but it seems to return "undefined" instead so it's not working.
This is my javascript:
$(function () {
if ($('#tester').attr('aria-expanded') === 'true') {
$("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open");
}
});
And my html looks like this (using bootstrap):
<div class="col-sm-6">
<a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false">
<h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3>
</a>
<div class="collapse" id="collapsible">
<div class="card card-block">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
</div>
You can change it to click function, you can use selector you want instead of h3. Hope it helps:
$(function () {
$("h3").click(function () {
$("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-sm-6">
<a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false">
<h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3>
</a>
<div class="collapse" id="collapsible">
<div class="card card-block">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
</div>
I am messing around trying to make a custom bootstrap 3 website however I'm currently stuck up on this dropdown menu. I have tried everything from using the web CDN instead of my local files, copying other peoples dropdown code and nothing seems to want to work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>
<!-- linking bootstrap CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- linking my custom CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:700"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- MDP top banner image -->
<div class="top-banner">
<img class="img-responsive" src="Assets/MDP Website Banner.png" width="2000" height="350" alt=""/>
</div>
<!-- top bar nav -->
<nav class="navbar navbar-inverse navbar-maintop">
<div class="container-fluid align-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active nav-tab">HOME</li>
<li class="nav-tab">ABOUT US</li>
<li class="dropdown nav-tab">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!--<li class="nav-tab">SUSPENSION & LIFT COMPONENTS
</li> -->
<li class="nav-tab">PAGE 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
</body>
</html>
I want to use AngularJS to include a header in every html i use. here is the header.html:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid" id="container-fluid1">
<div class="navbar-header" id="websiteName">
<a class="navbar-brand" href="#">Richazon</a>
</div>
<div id="theLinks">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Navbar Color <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu1">
<li class="greenBg">NB1</li>
<li id="greenBg">NB2</li>
<li id="greenBg">NB3</li>
</ul>
</li>
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 2.0.0 </li>
<li class="divider"></li>
<li>Page 2.0.1 </li>
<li class="divider"></li>
<li>AngularJS List Removal </li>
</ul>
</li>
<li class="dropdown">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu">
<li>Page 3.0.0 </li>
<li class="divider"></li>
<li>Page 3.0.1 </li>
<li class="divider"></li>
<li>Page 3.0.3 </li>
<li class="divider"></li>
<li>Page 3.0.4 </li>
<li class="divider"></li>
<li>Page 3.0.5 </li>
<li class="divider"></li>
<li>Page 3.0.6 </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
in my index1.html file I have this:
<html lang="en" ng-app="myApp">
then inside the body tag
<div appheader></div>
i understand this question has already been asked, hence my implementation. but i keep getting this error in the console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
this is the code at the top of my index1.html file which might be causing issues:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<link href="css/index1.css" rel="stylesheet">
and here is my main.js:
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
If this is your main.js
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
you need to create module
angular.module('myApp',[])
I am having some trouble making the dropdown menus in twitter bootstrap work. Here is what I have for the navbar code.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I have seen many different tutorials/examples on this, and I am not to sure what I am doing wrong, I have included jquery and the bootstrap-dropdown.js files at the end of the document.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Any help on this matter would be greatly appreciated.
Thanks in advance,
try this
//use bootstrap css
//latest jquery
//add bootstrap.js
//and paste your html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<style>
.box
{
border: 1px solid red;
height: 100%;
}
</style>
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I've just tested the code and it should work. See this DEMO with your code
One minor update. The .brand element should be the child of navbar and not of ul, since that is invalid:
<div class="navbar">
<a class="brand">Title of website</a>
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
You don't event have to call $('.dropdown-toggle').dropdown(); - as you can see the demo above
I don't find any error in your code, seems like you are
missing or not being loaded bootstrap-dropdown.js file
moreover please add bootstrap.js core file (as added in jsfiddle in below link)
check this jsfiddle, http://jsfiddle.net/mastermindw/kbzxV/
Your code seems to run.
Check out this example: http://jsfiddle.net/vZQ7S/
You could try to check the developer console for any error messages there.
Maybe you are not linking the javascript libraries to the correct file path?
Also try to run
$('.dropdown-toggle').dropdown()
in the developer console and watch for error messages.
Any ideas why this Twitter Bootstrap dropdown isn't working?
Javascript in head:
<script src="/assets/js/bootstrap.js" type="text/javascript"></script>
Menu HTML:
<li class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
Put the dropdown class on a div that is wrapping the li rather than on the li itself. Like this...
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
That example is from the bootstrap site
Your code should look like this...
<!DOCTYPE html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script>
<link href="../theme/bootstrap.css" rel=stylesheet type="text/css">
</head>
<div class="dropdown">
<ul class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</ul>
</div>
I tried making a nested list, but it didn't work with bootstrap. I think it gets the two dropdowns confused.
Make sure you are using the latest version of JQuery
This is easily solved. The element wrapping your code is a li, but it needs to be a div. This works for me:
<div class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
If you want it to look like a button, just add "btn" to the class list like this:
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">
My header section looks like this:
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'>
<script src='js/jquery-2.0.0.min.js' type='text/javascript'>
<script src='js/bootstrap.min.js' type='text/javascript'>
You may want to leave out the responsive css if you're not doing anything for mobile devices.