Item Active for Bootstrap Navbar - javascript

I have made a navigational bar in Bootstrap.
It is in a file called header.html.
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li class="item active">Home</li>
<li>Courses</li>
<li>Projects</li>
<li>Publications</li>
<li>Patents</li>
</ul>
I use an include virtual on all 5 pages on the navbar to display my menu bar.
<!--#include virtual="/templates/header.html" -->
I am trying to figure out a way to apply the "item active" class to the page that the browser is viewing, all while using an included header file.
The only solution I thought of would be creating a CSS sheet per page, and only loading that specific CSS sheet depending on the page loaded.
That specific CSS sheet would style that specific li item.
I am open to using JavaScript if needed.

Related

I have a list of links for a drop down menu and i am adding a new link to click but i dont want to go through every file to add to the copy paste

I want to be able to have a centralized menu like CSS files where you change it at the source and all the files change but for lists. I'm trying to add a new link to the menu without having to go to each file on the website to add to the copy and pasted list that we have.
<nav id="menu">
<div class="inner">
<h2>Menu</h2>
<ul class="links">
<li>Home</li>
<li>Sponsors</li>
<ul class="links">
<li>Sponsor Application</li>
</ul>
<li>Media</li>
<ul class="links">
<li>2019 Season</li>
<li>2018 Season</li>
<li>2017 Season</li>
<li>View More Seasons</li>
</ul>
</div>
</nav>
being able to add a html to the list and it changes for every part you go to.

history function for bootstrap navbar and jquery load-function

I am new to this area.
I build a navbar with bootstrap 3 and the "load"-function. If I want to use the back button of the browser, it does not work.
What do I have to do to make it work?
Here my simplified code:
index.html:
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</nav>
Thanks Schulz
There is no easy way to do this. You would have to use the history object and change the URL every time you click on something that you want to come back to later.
Basically on click you don't only load the remote content but also update the URL. You would also have to use a hash (#) in URL so the page won't refresh. This implies creating a routing mechanism for your app.

Foundation 6 - Dropdown items do not activate links when clicked

Context: I have created a top-bar menu using Foundation 6 (following the docs), with it displayed horizontally on large screens, and as a responsive vertical menu on medium and down. There is one item with children which is displayed as a dropdown on large screens, and as a drilldown menu on medium screens and below.
I created the site using the Zurb 'Yeti Launch' app, so as far as I can tell, I have all js libraries included.
Issue: Nothing happens when either the dropdown parent or any of the child items are clicked. Any help getting to the bottom of this is much appreciated!
My markdown for the menu is as follows:
<div class="top-bar" id="main-menu">
<div class="row">
<div class="large-12 columns">
<div class="top-bar-left">
<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown">
<li>Home</li>
<li>What's On</li>
<li>Listen Again</li>
<li>Community</li>
<li>
About
<ul class="menu vertical">
<li>Presenters</li>
<li>Volunteers</li>
<li>The Board</li>
</ul>
</li>
<li>Get Involved</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
Did you added the init code?
$(document).foundation();
The CodePen example with the same HTML as you provided worked.
http://codepen.io/shoaibik/pen/PNravB
Update:
It look likes you can called Foundation JS and jQuery second time in app.js file, Please remove once instance and confirm again.

ui-sref css incorrect on Safari

I have a boostrap navbar with white links on black. When I reload the page the links are black until I select them with my cursor which causes the white to appear as I slide. The problem is solved if I add a blank href="" attribute. However I would like to figure out why this is happening and if there is another solution.
<ul class="nav navbar-nav pull-right">
<li><a ui-sref="home">Home</a></li>
</ul>
This solves issue:
<ul class="nav navbar-nav pull-right">
<li>Home</li>
</ul>
Attached is a shot of what I mean - I am slidig the mouse from left to right over the link.

bootstrap navbar class=active change when coming from a separate page

I've been trying out solutions to similar cases but none of them work so far.
Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.
Here's from the index.html file:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="current">Home</li>
<li>About</li>
<li class="support" >Support</li>
<li >Contact</li>
</ul>
</div>
and here's from support.html:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="current">Support</li>
<li >Contact</li>
</ul>
</div>
This is one of the solutions that I tried with no results:
https://stackoverflow.com/a/11539359
JS is not my strong suit, thank you so much for your help!
There were lot of issues with the way you are loading scripts for example
$(document).ready(function() {
$('#ind').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions
I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now
One more thing make your contact height same as other container or remove extra margin/padding from Physicians section

Categories