Setting navbar items to active onclick - javascript

I am having a lot of trouble making navbar item to active on click.
I have included this navbar file to different pages but when i click on an item it doesn't change its class or its styling.
I have tried many techniques from using jquery onclick functions to add class active on click to changing changing css onclick but nothing is working. Any possible help will be highly appreciated . Navbar code is below :
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<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="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li >
<a style="margin-top: -5%" href="login.php">
<button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block">
<i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>

Normally this should work using JQuery:
$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });
you have also to check what the active class is changing.

I think what you mean is for every <li> item that you click, an active class name would be added to its list of class names. If I'm right in what I'm thinking, here's my suggestion:
HTML
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<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="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right main-ul" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li ><a style="margin-top: -5%" href="login.php"> <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> <i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
CSS
.active {
background: red;
}
JavaScript (JQuery)
$('.main-ul li').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
})
I added a main-ul on the first <ul> so I can easily reference to it and its <li> items then I created .active in CSS. Now whenever you click on an <li> item, a red background is applied to it indicating that it has an active class name.

Related

Nav collapsing and closing

I'm building some website and I want to have menu like on http://www.strv.com (with transition effect on open and close).
I've already done code like:
<div class="menu">
<button id="hamburger" type="button" class="btn pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
JSFiddle: https://jsfiddle.net/eztuhvhL/
(not working there and don't know why), but there is no transition effect on close and I can't solve it.
And also I want to do add "Item1, Item2, Item3" to this menu on mobile screens and I don't know how to figure it out.
Thank you.
Your problem is that you have two buttons with the id hamburger so jquery doesn't know which one you want. If you look at the console for like chromes devtools, you will see that nothing happens when you click it. The solution is to get rid of the first instance of hamburger. Here is what I got:
http://codepen.io/Squeakasaur/pen/mWKzer
<div class="menu">
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
That should fix your problem. You can also just change the id of the first instance to something else :P

CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron

I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->
Your content probably has a container .container. Also wrap your navbar with this.

Bootstrap NavBar: Is there a way to disable a few menu items even the parent for certain pages?

Is there a way to disable certain menu items and or its parent for certain pages, but i'm using a single navbar.jsp for all pages and its being loaded by a javascript on every page.
NavBar.jsp
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
SYSTRIX
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
My Console<b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li>User Management</li>
<li>Patient Management</li>
</ul>
</li>
<li class="dropdown">
New<b class="caret"></b>
<ul class="dropdown-menu">
<li>User</li>
<li>Patient</li>
<li>Admission</li>
</ul>
</li>
<li class="dropdown">
Edit<b class="caret"></b>
<ul class="dropdown-menu">
<li>User Roles</li>
<li>Patient Episode</li>
<li>Patient Staff Assignment</li>
</ul>
</li>
<li>Help</li>
<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-success">Submit</button>
</form>
</ul>
</div>
</div>
</nav>
</body>
Script:
<script>
$(function(){
$("#includedContent").load("navbar.jsp");
});
</script>
I need to disable certain menu items for certain .jsp pages Like the edit should not be available if i'm on the add new page. Thank you for your help.
I think this will work for you:
You should change your part of code to this :
<li class="dropdown">
Edit<b class="caret"></b>
<ul class="dropdown-menu">
<li>User Roles</li>
<li>Patient Episode</li>
<li>Patient Staff Assignment</li>
</ul>
</li>
And use this jquery code :
$(document).ready(function(){
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if(filename == 'Roles.jsp'){
$('#patientepisode').addClass('disabled');
$('#patientstaff').addClass('disabled');
}else if(filename == 'PatientEpisode.jsp'){
$('#userroles').addClass('disabled');
$('#patientstaff').addClass('disabled');
}else if(filename == 'StaffAssignment.jsp'){
$('#userroles').addClass('disabled');
$('#patientepisode').addClass('disabled');
}
});
I hope this'll help you.

Make Social Media Buttons Horizontal on Bootstrap mobile dropdown

How would I go about getting the social media buttons to align next to each other -- that is, horizontally rather than vertically -- in the mobile mode on the drop down menu?
The icons are within a standard bootstrap nav bar, aligned to the right side of the bar.
Whenever someone clicks on the mobile drop down menu it currently lists these icons vertically. I want them horizontal.
Here is my code for the menu div.
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="index.html">Welcome </a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Broadmark Partners</li>
<li>Blog</li>
<li class="dropdown">
<ul class="dropdown-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>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://facebook.com/" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<h3 class="text-muted"> </h3>
<p> </p>
</div>
you just need to apply the nav-pills-class to the list like so.
<ul class="nav navbar-nav navbar-right nav-pills">
see your sample working here: http://www.bootply.com/pm5SsVZrOi

Twitter bootstrap how to replace dropdown select to menubutton

When I am resizing the browser screen to mobile size, desktop menu replaced by dropdown with multiple options:
But how to change that dropdown to menu with button like that:
By clicking the "Menu" button menu showing and hiding
In order to get menu like above we have to follow this markup
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
DEMO

Categories