I have an issue with my navbar updating...After login with my credentials my navbar is not updating..however my response is success..but how to update change my header..it have to show logout after login..Her is my Html code.How to write authentication for this..Please help me out.I am at end of my project..
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" id="header">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" class="navbar-toggle collapsed">
<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="#/"><i class="ion-ios7-pulse-strong">Onio</i><img src="images/onio1.png"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul ng-if="isAuthenticated()" class="nav navbar-nav">
<li>Home</li>
<li >About</li>
<li >Products</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-left">
<li>Home</li>
<li >About</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
<li>Login</li>
<li>Sign up</li>
</ul>
<ul ng-if="isAuthenticated()" class="nav navbar-nav pull-right">
<li>Logout</li>
<li><a href="#" data-toggle="dropdown" class="navbar-avatar dropdown-toggle">Welcome, {{userInfo}}
</a></li>
</ul>
<!--<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">-->
<!--<!–<li><button class="btn btn-facebook" ng-click="fbLogoutUser()">FBLogOut</button></li>–>-->
<!--<li class="fb-login-button" data-max-rows="1" ng-click="FBLogin()" data-size="large" data-show-faces="false"> </li>-->
<!--</ul>-->
</div>
</div>
Why isn't there an official navbar example?
https://angular-ui.github.io/bootstrap/
Searching on the web, I've found a few examples but they don't work on the latest released AngularUI version and Bootstrap. All the examples I've found were for older versions.
Here is one I forked and got working:
AngularJS v1.3.15
angular-ui-bootstrap 0.12.1
Bootstrap v3.3.2
<nav class="navbar navbar-default" ng-controller="NavbarController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="true">
<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>
<div class="navbar-collapse collapse in" collapse="isCollapsed" aria-expanded="true">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown" dropdown>
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="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>
</ul>
</div>
</div>
</nav>
http://plnkr.co/edit/2KQrqtrvHSiGjWZiHMB3?p=preview
I want to use Bootstrap to create a hybrid single page application (for example like Ionic Tabs) that has fixed tabs at the bottom, a dynamic header at the top and a scalable content. Which attributes of the bootstrap framework can I use to achieve this?
Try this template
http://getbootstrap.com/examples/sticky-footer-navbar/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</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>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
I have a responsive fixed-top navbar (using Twitter Bootstrap 3) as follows:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><img src="/images/citylightslogo.png" alt="logo" id="cllogo"/>
</div>
**<h1 id="topline2">• Tagline1 </h1>
<h1 id="topline3">• Address • Call Anytime! xxx xxx xxxx </h1>
<div id="adspace" >
<h1 id="headline33" class =".visible-xs" >100% Satisfaction Guaranteed! Call us Anytime! </h1>
</div>
<div id="logospace"><img src="/images/ab2.gif" alt="logo" id="alogo2"/><img src="/images/ab2.gif" alt="logo" id="alogo3"/>
</div>**
</div>
</div>
I just want to make sure that I am learning this correctly: Currently, the elements in bold above overflow all over the place (into other rows) when collapsed.
Question: How could I make sure that they are either invisible when collapsed or partially visible in mobile or tablet screens when collapsed?
Is the fact that I am not including those elements in the "navabar-header" class the problem or should I be wrapping them in a separate div to begin with (if so what div?)?
It seems the bootstrap docs are focused on explaining how to make navbar links responsive and I cannot seem to find anything on making non-link content (like headers) responsive as well.
Thanks!
Dont understand the goal entirely but let me take a crack at it... It sounds like you want more than just menu items to collapse...Right? Great! See below
--> http://www.bootply.com/118940
<nav class="navbar navbar-default" role="navigation">
<!-- 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>
<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>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<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 -->
</nav>
everything inside of
class="collapse navbar-collapse"
will collapse...
see it here --> http://www.bootply.com/118940
So the problem comes when trying the project I'm working on the phone, the links I have inside my navbar are all with hash tag links (#) since it's AngularJS... Now I did find a way to make it to work perfectly in jQuery
$('.nav li a').not('.dropdown-toggle').on('click', function(){
$('.navbar-ex1-collapse').removeClass('in').addClass('collapse');
});
but since they always say to stop using plain jQuery or DOM manipulation...so how am I suppose to do this? I'm new to AngularJS and I'm not to good at starting to create my own directive, or should I just have $watch? but then how can I watch a certain class to be clicked then? I tried to do this example twitter-boostrap-navbar-with-angular-js-collapse-not-functioning but it was made specifically for Bootstrap 2.3 and some properties have changed too, so I'm getting a little confused. I could leave the jQuery, but you know...I'm trying to learn the proper way of doing... :)
Oh and if that help, my navbar Bootstrap 3 menu looks like this
<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=".navbar-ex1-collapse">
<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-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Portfolio<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add</li>
<li>Undo</li>
<li>List</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Probably a bit late, but here is a bootstrap 3.x version of the answer I gave in the question you referenced - http://jsfiddle.net/N99dQ/
This time, I have used ng-init instead of a controller, but both ways will work. Also worth mentioning, if you are not using the dropdowns, you'll only need to include ['ui.bootstrap.collapse']
HTML:
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-init="isCollapsed = true" 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="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<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">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<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">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></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>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
Javascript:
var myApp = angular.module('myApp', ['ui.bootstrap']);
As an alternate to my previous answer, this one uses ng-repeat to condense the html. http://jsfiddle.net/m5TZw/
HTML
<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="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<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 ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</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 ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JS
var myApp = angular.module('myApp', ['ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle']);
function NavBarCtrl($scope, $location) {
$scope.isCollapsed = true;
$scope.menu1 = [
{text: 'first', link : '/first'},
{text: 'second', link : '/second'},
{text: 'third', link : '/third'},
{text: 'fourth', link : '/fourth'},
{text: 'fifth', link : '/fifth'}
];
$scope.go = function(path) {
$scope.isCollapsed = true;
$location.path('#/' + path);
}
}
Rather importing a heavy "ui.bootstrap" I feel that this will be simple JS fix:
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
If this code is not working correctly then see that it's binding correctly, so place it in controller that loads page.