Jump to content
Please Use CODE Tags

Bootstrap, how can I make a navbar class="active" when navbar is a single file

Guest
By Guest
in Programming
 Share
Go to solution Solved by BlueDragon,

Ah ha!!! I got it. Bootstrap uses the <li> element for its active styling... just update this function in your fetch.js

function setPage(nav) {	hrefString = document.location.href ? document.location.href : document.location;	console.log(extractPageName(hrefString));	if (document.getElementById(extractPageName(hrefString)) != null){		document.getElementById(extractPageName(hrefString)).className = "active";		if (document.getElementById(extractPageName(hrefString)).parentNode.tagName == "LI")				document.getElementById(extractPageName(hrefString)).parentNode.className = "active";	}}
Posted

I have several pages and just put my navbar on every page using jquery. The single problem so far though is that I can't change a navbar item's class to "active" like other sites do. Any solutions? https://github.com/whitephoenix0/whitephoenix0.github.io, <--- my entire site

 

navbar is stored in template/template.html, jquery used to get it is in js/fetch.js

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Really this would work much better if done server side.

 

If you insist on doing it on the client side you will need to use some JS to get the current page using window.location.pathname and then using that to determine the page you are on and highlight the correct menu item.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Really this would work much better if done server side.

 

If you insist on doing it on the client side you will need to use some JS to get the current page using window.location.pathname and then using that to determine the page you are on and highlight the correct menu item.

Serverside is not a choice, github pages is frontend only

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 Add this script (You probably will want to put it in its own .js file and probably call it 'nav.js' and then include it in the head section of your template file)

function extractPageName(hrefString){	var arr = hrefString.split('/');	return (arr.length < 2) ? hrefString :  arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();} function setActiveMenu(arr, crtPage){	for (var i=0; i < arr.length; i++)	{		if(extractPageName(arr[i].href) == crtPage)		{			if (arr[i].parentNode.tagName != "DIV")			{				arr[i].className = "active";				arr[i].parentNode.className = "active";			}		}	}} function setPage(nav){	hrefString = document.location.href ? document.location.href : document.location;		if (document.getElementById(nav) !=null )	setActiveMenu(document.getElementById(nav).getElementsByTagName("a"), extractPageName(hrefString));}

Then for the body tag you need to do:

<body onLoad="setPage('id')>       ...</body>

Replace the id of the setPage function with the id of your nav bar... 

 

That's it!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Try using this edited version of this function... (Original was designed for my website xD)

function setActiveMenu(arr, crtPage){	for (var i=0; i < arr.length; i++)	{		if(extractPageName(arr[i].href) == crtPage)		{				arr[i].className = "active";		}	}}
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 

Try using this edited version of this function... (Original was designed for my website xD)

 

Didn't work, there's just stuff on my pages like "======= >>>>>>> 0c5b38659d6a5ffb2ac38f3ca85d4477a1b2f3a0"

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Wait thats not related wtf happened

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Try putting the setPage bit in the index.html file

 

and also include the nav.js file in the index.html file

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Try putting the setPage bit in the index.html file

 

and also include the nav.js file in the index.html file

Didn't work

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I'm going to download it and try and come up with a solution :)

Feel free to make a PR if you get it, thanks for helping :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Success!!!!!

 

I combined the nav.js and fetch.js...

 

Here's what fetch.js now looks like:

function extractPageName(hrefString){	var arr = hrefString.split('/');	return (arr.length < 1) ? hrefString : (arr[arr.length-1].toLowerCase()).split('.')[0];} function setPage(nav){	hrefString = document.location.href ? document.location.href : document.location;		console.log(extractPageName(hrefString));		if (document.getElementById(extractPageName(hrefString)) !=null )		document.getElementById(extractPageName(hrefString)).className = "active";}$(function(){  $("#include_navbar").load("template/template.html", function(){  	setPage('nav');  }); });

Then I edited the template.html file to look like this:

<div id="nav" class="navbar navbar-inverse navbar-fixed-top">	<div class="container-fluid">		<div class="navbar-header">			<a href="index.html" id="index" class="navbar-brand">Whitephoenix</a>			<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">				<span class="icon-bar"></span>				<span class="icon-bar"></span>				<span class="icon-bar"></span>			</button>		</div>		<div class = "collapse navbar-collapse navHeaderCollapse">			<ul class="nav navbar-nav navbar-left">				<li class="dropdown">					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Topics <b class="caret"></b></a>					<ul class="dropdown-menu">						<li>							<a href="topic_programming.html">Programming</a>						</li>						<li>							<a href="topic_linux.html">Linux</a>						</li>						<li>							<a href="topic_3dmodeling.html">3D Modeling</a>						</li>					</ul>				</li>				<li>					<a href="#">Projects</a>				</li>				<li>					<a href="about.html" id="about">About</a>				</li>				<li>					<a href="#">Contact</a>				</li>			</ul>			<form class="navbar-form navbar-right" role="search">				<div class="form-group">					<input type="text" class="form-control" placeholder="Search">				</div>				<button type="submit" class="btn btn-default">					<span class="glyphicon glyphicon-search"></span>				</button>			</form>		</div>	</div></div>

Basically to get it to work now, you just have to set the id of the link to the file name without the extension... so "index.html" has the id of "index", so that's all you have to do if you want to add a link that could get the "active" class if it is the current page!!!

 

Also... remove the inclusion of nav.js and also get rid of the onLoad="setPage('nav')"

 

Other than that it should all be golden!!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Other than that it should all be golden!!!

Alright, what am I setting the id of?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

The html elements that you want the "active" class to be applied to.

 

So if you want this element:

<a href="topic_linux.html">Linux</a>

To have the "active" class added to it when the user is on the page "topic_linux.html" then you change it to:

<a href="topic_linux.html" id="topic_linux">Linux</a>
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 

The html elements that you want the "active" class to be applied to.

 

So if you want this element:

<a href="topic_linux.html">Linux</a>

To have the "active" class added to it when the user is on the page "topic_linux.html" then you change it to:

<a href="topic_linux.html" id="topic_linux">Linux</a>

I must have done something wrong, I changed the a elements in template.html and nothing happened

e.g. <a href="index.html" id="index" class="navbar-brand">Whitephoenix</a>

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Have u updated the fetch.js file?

Yes, I'll commit to github, I have no idea what I'm doing wrong

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Yes, I'll commit to github, I have no idea what I'm doing wrong

 

Okay, cool I'll have a look xD

 

Update: seams like you haven't updated the fetch.js file

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Okay, cool I'll have a look xD

 

Update: seams like you haven't updated the fetch.js file

That's weird I saved it I thought

 

I still only see one difference, and that is this

  b3Dwt45.png?1

also I commited it again

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

That's perfect, you just have to sort out the styling of the active class!!!! 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Okay, I figured it out, the active class must be applied to an li element for bootstrap to handle it, that should be a fairly easy tweak I would guess? Sorry I am really shit at js

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

Ah ha!!! I got it. Bootstrap uses the <li> element for its active styling... just update this function in your fetch.js

function setPage(nav) {	hrefString = document.location.href ? document.location.href : document.location;	console.log(extractPageName(hrefString));	if (document.getElementById(extractPageName(hrefString)) != null){		document.getElementById(extractPageName(hrefString)).className = "active";		if (document.getElementById(extractPageName(hrefString)).parentNode.tagName == "LI")				document.getElementById(extractPageName(hrefString)).parentNode.className = "active";	}}
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Awesome! Thank you! I just have a few minor tweaks for the whitephoenix part and I'll update the site

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×