This is the core content of my index.html file:
<div role="navigation" class="navbar navbar-default navbar-static-top navbar-inverse " data-ng-contoller="NavController">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap theme
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isHome()}">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>New Message</li>
<li>List Messages</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div data-ng-view="" id="main-container" class="container" role="main"></div>
This is how my app is bootstrapped:
define(['app', 'jquery', 'bootstrap', 'angular' ], function(app, jQuery, bootstrap, angular) {
jQuery('.dropdown-toggle').dropdown();
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
});
All of the other controllers work just fine. The only thing I can guess is that for some reason it's being ignored by the bootstrap.
All of the dependencies are loaded with requirejs, and I can see that the code is loaded fine with no errors in the console (including the controller that doesn't work). Any ideas on how to track this down?
It was a typo. I had contoller not controller.
Related
I can't get the bootstrap dropdown to work or the button when the menu collapses in tablet/mobile view. Here is my html for nav:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 alt="brand" height="50" width="100" src="media/expend-logo.svg"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
These are the scripts:
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
What am I doing wrong? Thanks in advance!
You didn't included scripts properly. This is what worked for me.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 alt="brand" height="50" width="100" src="media/expend-logo.svg"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
try this. hope it works.
<nav class="navbar navbar-default navbar-fix-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">
<img src="imgs/your image here" width="300" height="300" class="img-responsive">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" 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>
<div id="nav-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="page one">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
Home
</a>
</li>
<li>
<a href="another page">
About
</a>
</li>
<li>
<a href="third link">
Contact us
</a>
</li>
<li>
<div id="nav-options" class="btn-group pull-right hidden-xs">
<button type="button" class="btn btn-default dropdown-toggle thumbnail" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-education" aria-hidden="true"></span>
Academics
</button>
<ul class="dropdown-menu">
<li><p class="text-center"> Link page</p> </li>
<li role="separator" class="divider"></li>
<li><p class="text-center"> Linkpage 2</p></li>
<li role="separator" class="divider"></li>
<li><p class="text-center"> Link page 3</p></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
and remember this
I'm trying to use bootstrap.css with Angular. I referenced Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning but when I try to implement this code, my navbar doesn't collapse and the dropdown doesn't work either.
Code:
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="NavBarCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<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="#">Title</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li>home</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
var myApp = angular.module('myApp', ['ui.bootstrap']);
function NavBarCtrl($scope) {
$scope.isCollapsed = true;
}
Why won't it collapse? Here's the JSFiddle.
Have you checked in the developer tool? It is showing
https://fiddle.jshell.net/code.angularjs.org/1.2.9/angular.js Failed to load resource: the server responded with a status of 404 (Not Found)
ui-bootstrap-tpls.js:7 Uncaught ReferenceError: angular is not defined
Because angular wasn't able to load hence angular bootstrap is not able to initial as well.
So please try to add another angular cdn and test.
I think you need to add the class show on this part
<div ng-class="collapse navbar-collapse" [ngClass]="{'show':!isCollapsed}">
I want have something like navbar-toggle. When user click on it the large div in width and height open open up just like when clicking on navbar-header containg button with class "navbar-toggle"
Any idea of how can I do this using bootstrap?
I have something like this for simple drop down menu but it's a navbar I hope you understand me.
<div class="bs-example">
<nav id="myNavbar" style="width:95%;" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Category</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Profile</li>
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
You can create it by jQuery click function. it's very simple.
jQuery(".classNameWhichWillShow").hide();
jQuery(".class_name_where_click").click(function(){
jQuery(".classNameWhichWillShow").slideToggle(100);
});
I have an external Bootstrap navbar header which I include in every page as
<?php include("header.html");?>
The external header html file is given below:
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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"><a href="homepage.php" >Home</a></li>
<li >About Us</li>
<li>Events</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Members<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4th Year</li>
<li>3rd Year</li>
<li>2nd Year</li>
<li>1st Year</li>
</ul>
</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="register"><span class="glyphicon glyphicon-user"></span>Register</li>
<li><span class="glyphicon glyphicon-log-in"></span>Login</li>
</ul>
</div>
</div>
</nav>
The problem I am facing is changing the active menu. I tried various ways but no success yet.
Please help if you have any idea.
You can either send a variable through POST/GET using php and set the class accordingly, or you can try using jquery to find specific elements that exist in each page and add a class accordingly, for example
if ($('#specific-page-element-1').length) {
$('menuelement-1').addClass('active');
}
I am trying to make a menu in bootstrap 3. When it gets down to mobile size, I have two collapse nav-toggle buttons. As default, when one is open, it just gets stacked on top of each other. What I would like is one drop down open at a time.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-search">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" 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>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div id="test2" class="nav-search collapse">
<div class="search_box">
<ul class="nav navbar-nav">
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
</ul>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div><!-- /.container-fluid -->
</nav>
I searched and found this, but that is for bootstrap 2:
Bootstrap Menu - Two Collapse buttons which toggle each other? Meaning, only 1 open at a time
I feel like I am missing something easy. Below is a jsfiddle link:
http://jsfiddle.net/Bootstrap714/RfsS9/4/
You have got the name of the event wrong. You need to call it on on('show.bs.collapse'... instead of just on on('show'....
Here is a fixed fiddle
Found a kind of "hackish" solution
if, the sibilings button, doesn't have a collapsed class, click on it.
$('.navbar-toggle').on('click', function () {
if(!$(this).siblings('.navbar-toggle').hasClass('collapsed')) {
$(this).siblings('.navbar-toggle').click();
}
});
http://jsfiddle.net/t96Ry/