Develop Reference

load li class active to bootstrap nav loaded dynamically to an html page

I have a bootstrap navbar loaded dynamically to an html page via script
<script>
$(function(){
$("#nav-placeholder").load("menu.html");
});
</script>
it loads perfect!, what I need now is to set the class="active"
this is my menu.html loaded into let's say our mision page
<div class="container navbar-fixed-top">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img alt="Brand" src="media/35px_carinhands_logo2.png">
</a>
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>our mision</li>
<li>services</li>
<li>why us</li>
<li>fees</li>
<li>faq</li>
<li>contact us</li>
</ul>
<div class="navbar-brand">
<a class="btn btn-social-icon btn-twitter" href="http://www.twitter.com" target="_blank"><span class="fa fa-twitter"></span></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com" target="_blank"><span class="fa fa-facebook"></span></a>
<a class="btn btn-social-icon btn-instagram" href="http://www.instagram.com" target="_blank"><span class="fa fa-instagram"></span></a>
</div>
</div>
</nav>
what I want is when menu is loaded in "our.html" <li>our mision</li> li goes <li class="active">our mision</li>
this is what I've tried:
<!-- Navigation -->
<script>
$(function(){
$("#nav-placeholder").load("menu.html");
});
</script>
I add the place holder into body
<div id="nav-placeholder"></div>
then I try to call the class
<script>
$(document).ready(function(){
$(".navbar-default .navbar-nav > .active").find("li:nth-child(1)").addClass("active");
});</script>

I deleted my old answer and edit your code litle. I hope this help.
<!-- Navigation -->
<script>
$(function(){
$("#nav-placeholder").load("menu.html", function() {
//wait for ajax load n add active class
//$(".navbar-default .navbar-nav > .active").find("li:nth-child(1)").addClass("active");
$('a[href="' + decodeURIComponent(window.location.pathname.replace(/^\/|\/$/g, '')) + '"]').parent().addClass('active');
});
});
</script>

this is what worked out.
add this code in all page (changing the li child element number) or link the .js in the correct page
<!-- Navigation -->
<script>
$(function(){
$("#nav-placeholder").load("menu.html", function() {
$("ul.nav.navbar-nav").find("li:nth-child(1)").addClass("active");
});
});
</script>
thank you #Mustafa Çetin for that light in the sea

bootstrap navbar doesn't set the active page when the brand is clicked

I have seen a ton of solutions for how to toggle the active class on navbar pages, but nothing addresses the issue of what happens when you set the navbar brand link to go to home page, and how to set the Home link to active in that case, while disabling previously active one. Here's the navbar:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header row">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
<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="#!/">KitchBlocks</a>
</div>
<div class="collapse navbar-collapse navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Purchase
</li>
<li>
Download
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<img src="images/a.png" height="32" style="margin-top:1px" >
</li>
</ul>
</div>
</div>
</nav>
Here's the jquery code:
<script type="text/javascript">
$(document).ready(function() {
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
});
</script>
So again, to re-create the issue: Navigate to main page, by default "home" is active. Navigate to "download", and that becomes active. Hit the brand link which redirects to "home" but "download" is STILL active. Anyway to fix that?

Here is the simple modification of your example. Working fiddle is Here
$(document).ready(function() {
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$(".navbar-brand").on("click", function(){
$(".nav").find(".active").removeClass("active");
$('.nav a[href="#!/"]').parent().addClass("active");
});
});

change icon on menu link click

On my menu I have a font awesome icon that I would like to be able to change once click on parent link.
I am trying to get it if menu link is closed will show
And if menu link is open will show
Currently my java script not working.
I can only get it to change if change it manually but trying to get java script to do so.
<?php echo Modules::run('admin/common/header/index');?>
<div id="wrapper">
<nav class="navbar navbar-inverse" role="navigation">
</nav>
<div class="menu">
<ul class="nav navbar-nav menu">
<li>
<a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> System <span class="pull-right"><i class="fa fa-angle-right"></i></span></a>
<ul id="setting" class="collapse">
<li class="third-level">
<a data-toggle="collapse" data-target="#user"><i class="fa fa-angle-double-right"></i> First Level</a>
<ul id="user" class="collapse">
<li>
<i class="fa fa-angle-double-right"></i> Second Level
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-tachometer"></i> Dashboard <small>Dashboard Home</small></h1>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.parent').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa fa-angle-down');
});
</script>
<?php echo Modules::run('admin/common/footer/index');?>

You need to attach the listener to the object that is actually collapsing:
$('#setting').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa-angle-down');
});
#setting is the element being collapsed, so the event happens there.

What's wrong here is you jquery syntax
$('.parent').on('shown.bs.collapse', function() {});
The correct syntax looks like $('.parent <sub classes>').on('click', function() {});

clicking on drop down menu with href="#nav" using doubletaptogo.js causes page to jump down

I have a responsive page with a drop down navigation using doubletaptogo.js, problem is when I click on the #nav link to show the drop down items this causes the page to scroll down so the menu is now at the top of the page.
here is the page: http://goligraphist.com.au/development
I have found that when I remove all the content below the nav this issue is fixed but this obviously isn't an option. I'm new to javascript and this has really got me stuck, any ideas?
Sample Code :
<nav id="nav" role="navigation">
<a href="#nav" title="show menu" class="menu-button">
<img src="img/menu.png" alt="menu icon">
</a>
<a href="#" title="hide menu" class="menu-button">
<img src="img/menu.png" alt="menu icon">
</a>
<ul>
<li class="active">
Home
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
jQuery Script :
<script src="js/doubletaptogo.js"></script>
<script>
$( function() {
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

Putting the following code within DOM ready should stop your page from jumping:
$('[href^=\\#]').on('click', function(event){
event.stopPropagation();
});

I can see what the issue is here.. You have defined the nav further down the page under the main site image, have you tried moving it right at the top of the page so it defaults to this place?
Also have you tried alternatives - I have achieved this same thing using bootstrap:
<nav id="Navbar" class="navbar navbar-fixed-top navbar-inverse" role="navigation" >
<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 class="define-spinner">
</div>
<a class="homeLogo" href="#/"><i class="fa fa-home fa-2x icon-color fa-inverse"></i></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="controller">
<div id="h2Header"><g:message code="default.title" args="[meta(name:'app.name')]"/> </div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" >
<li class="dropdown controller">
<a class="dropdown-toggle" role="button" data-toggle="dropdown">
<span id="userMessage">
<span class="glyphicon glyphicon-user"></span>
<g:message code="default.user.label" default="{{user.username}}" />
</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-dark" role="menu">
<li>
<a class="fa fa-gear icon-color" onclick='window.location.href="#/updateusername"' title="${message(code: 'default.username.update', default: 'Update Username')}">
<g:message code="default.username.update" default="Update Username"/>
</a>
</li>
<li>
<a class="fa fa-gear icon-color" onclick='window.location.href="#/updatepassword"' title="${message(code: 'default.password.update', default: 'Update password')}">
<g:message code="default.password.update" default="Update Password"/>
</a>
</li>
</ul>
</li>
<li class="controller">
<a data-ng-controller='UserCtrl' data-ng-click='logout()' title="${message(code: 'security.signoff.label', default: 'Log out')}">
<span class="glyphicon glyphicon-log-out"></span> <g:message code="security.signoff.label" default="Sign Off"/>
</a>
</li>
</ul>
</div>
</div>
</nav>

OK I finally figured this out. Turns out that doubletaptogo.js only works when the nav is at the top of the page and there is no way around this; if the nav is below any other content such as header etc forget about using this script as it will always cause the nav to jump to the top of the page.
I have opted for an alternative drop down that simply uses html and css, no js or jquery needed for this.
See http://goligraphist.com.au/development/ for the update.
That's the end of a major headache.

You can call void(0) for the link like below :
Clickc heere 1
or use e.preventDefault();
$('a[href="#"]').click(function(e){
e.preventDefault();
});
JSFiddle Demo

I think the right way is to write the full URL before the hash (#)
PHP:
<?php
$currentPage = 'http' . ($_SERVER["HTTPS"] && $_SERVER["HTTPS"] != 'off' ? 's' : '') . '://';
$currentPage .= $_SERVER["HTTP_HOST"] . htmlentities($_SERVER["REQUEST_URI"], ENT_QUOTES);
?>
<a href="<?php echo $currentPage; ?>#nav" title="show menu" class="menu-button">
<a href="<?php echo $currentPage; ?>#" title="hide menu" class="menu-button">
Smarty:
..
..

Bootstrap 3 navbar dropdown menu not toggling on a page with affix.js element

My navbar has a dropdown menu in it that will not toggle when a user navigates to a page with the affix.js functionality on it. I'm building this in Visual Studio 2012, so its a master/content page setup. On any other page, the navbar works fine, so I assume it has to do with affix.js because it is the only differing element.
Master navbar:
<nav class="navbar navbar-default" id="navbar" 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-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="Home.aspx">
<img src="../Images/#######.png" class="img-responsive" alt="Bauen Group logo"/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Products & Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Consulting</li>
<li>Filler</li>
<li>Product Documentation</li>
</ul>
</li>
<li class="dropdown">
Company <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</li>
<li>Customer Portal</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On the content page, I added an extra reference to my jquery and bootstrap .js files in the header because I was getting an exception that jquery was not defined. The .js files are also referenced at the bottom of the master page.
Content page:
<script type="text/javascript">
$(document).ready(function () {
$('#sidebar').affix({
offset: {
top: 245
}
});
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
});
</script>
<div class="container" id="top">
<div class="row">
<div class="col-lg-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
//<li><a>side bar content</a></li>
</ul>
</div>
<div class="col-lg-9">
//content
</div>
</div>
Not too sure whats going on. I wonder if anyone else has had this problem. Any help would be appreciated.

I took the javascript references out on the content page. I solved my issue with the dropdown list by taking the jquery script in the content page header and inserting it into the code of the master page below the javascript references.