We Keep Coding

Create a menu file with dynamic tabs

I am trying to make my website's menu in one file only and just include it in the rest of the .html pages. I am copy and pasting the menu each time I make a new page because I want the tab that is active to be highlighted for each different page. This is the reason why I can't make one file only for every page, and I have no idea how can I make it work to set the tab active in each different page.
This is the code I am copy-pasting in each page.
<!-- BEGIN MENU -->
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
<li>Home</li>
<li>Downloads</li>
<li>Media</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Research <span
class="fa fa-angle-down"></span></a>
<ul class="dropdown-menu" role="menu">
<li>D3</li>
</ul></li>
<li>Team</li>
<li class="active">Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
<a href="#" id="search-icon"> <i class="fa fa-search"> </i>
</a>
</div>
</nav>
</section>
<!-- END MENU -->
In this case the contact tab is highlighted:
<li class="active">Contact</li>
If the case is that the home page is active, then I would need to do this:
<li class="active">Home</li>
I hope I made myself clear, my English is terrible. I appreciate any idea, I am really new at web development.

One thing you can do is to read the URL and on base of that you add the active class to that link in your menu.
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

Using D3
<script>
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
d3.select("#navbar").selectAll("a").each(function(d){
if(d.tecode here == pgUrl )
d.attr("class","active");
});
</script>

I think this way more useful:
$(function(){
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
$("#nav ul li a[href='"+ pgUrl +"']").addClass('active');
});

How to set the class="active" to two separate links based on scrolling

Trying to find a way to set a link as active for a navbar when a certain area of the webpage is scrolled to in a one page site.
I have this working for my main menu that is seen by larger resolution displays, however I also have a secondary menu for mobile devices and despite all attempts it seems to never work. I have tried setting both or just setting the mobile by itself to no avail. Any help is appreciated below is a copy of my navbar code along with the java script to set active that I've used.
<!-- Start Header Section -->
<div class="hidden-header"></div>
<header class="clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Start Contact Info -->
<ul class="contact-details">
<li><i class="fa fa-phone"></i> +1 (000) 000 0000</li>
<li><i class="fa fa-envelope-o"></i> email#domain.com</li>
</ul>
<!-- End Contact Info -->
</div>
<!-- .col-md-6 -->
<div class="col-md-6">
<!-- Start Social Links -->
<ul class="social-list">
<li><a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<!-- End Social Links -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</div>
<!-- .top-bar -->
<!-- End Top Bar -->
<!-- Start Logo & Naviagtion -->
<div class="navbar navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- End Toggle Nav Link For Mobiles -->
<a class="navbar-brand" href="index.html">
<img alt="AltTxt" src="images/logo.svg">
</a>
</div>
<div id="menu-center" class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Naviagtion -->
</header>
<!-- End Header Section -->
And here is the javascript I've been using to modify the primary menu:
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('#menu-center a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('#menu-center ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
Edit: Here's the new code I'm working with which is working for both menu's but not all sections.
var navItems = jQuery('.menu-item a');
var win = jQuery(window);
var items = jQuery('.item');
navItems.click(function(e){
var item = jQuery(this);
jQuery('.menu-item a.active').removeClass('active');
item.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var item = jQuery(value);
console.log(win.scrollTop(), item.offset().top);
if(win.scrollTop() >= item.offset().top){
jQuery('.menu-item a.active').removeClass('active');
var id = item.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});

Ok found the error that was causing the new code to not entirely work. Go figure use another persons code and accidentally had a repeat class. For anyone else trying to do this the following works for me:
var navItems = jQuery('.nav-item a');
var win = jQuery(window);
var items = jQuery('.segment');
navItems.click(function(e){
var segment = jQuery(this);
jQuery('.nav-item a.active').removeClass('active');
segment.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var segment = jQuery(value);
console.log(win.scrollTop(), segment.offset().top);
if(win.scrollTop() >= segment.offset().top){
jQuery('.nav-item a.active').removeClass('active');
var id = segment.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});
Make sure to set any menu item's <li> to class="nav-item" and set any <section> to class="segment"

bootstrap 3 customized fixed navigation on scroll with fade effect

I am trying to fade in the navigation bar and stick to top while scrolling to bottom of the page. Its fade effect works only the first time. My code is below.
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var ht = $('header').height()+70;
if($(this).scrollTop() >= ht){
$("#navb").addClass("navbar-fixed-top navOpacity")
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
}else{
$("#navb").removeClass("navbar-fixed-top navOpacity");
$(".row:first").css("padding-top","0px");
}
});
});
</script>
<div class="container">
<header class="page-header">
<h1>Hello world</h1>
</header>
<nav id="navb" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown" href="#">Page 1
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-4">
<h3>h1. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h2. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h3. Bootstrap heading</h3>
Hello world and Mario.
<img src="rsz_myimg.jpg" class="img-responsive" />
</div>
</div><!-- end or row class-->
</div><!-- end container class-->

Your problem is that after the first time fadeTo is executed, your element is left with a style="opacity: 1" attribute, which is left there. So you have to remove it when you scroll to the top.
I've also changed the way the navbar is hidden, I suggest using .hide(), cause it also uses the elements' style attribute, that way it will not be overridden. And there's also a navbarVisible var that is used to determine if the navbar is already faded in and if it is, the code for fading it in is not executed when not needed. This should be a tiny step up in performance.
This seems to work just fine:
<script type="text/javascript">
$(document).ready(function(){
var navbarVisible = false;
$(window).scroll(function(){
var ht = $('header').height()+70;
if ($(this).scrollTop() >= ht) {
if (!navbarVisible) {
$("#navb").addClass("navbar-fixed-top")
.hide()
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
navbarVisible = true;
};
} else {
$("#navb").removeClass("navbar-fixed-top").removeAttr('style');
$(".row:first").css("padding-top","0px");
navbarVisible = false;
}
});
});
</script>
You don't need this part anymore:
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
Here's a link to an example JSFiddle with working code: JSFiddle Link

My two cents...
Just add this Javascript and away you go. Currently configured to graduate over the first 200px of scroll.
var scrollFadePixels = 200;
var fadeNavbar = function (window)
{
var opacity = window.scrollTop() / scrollFadePixels;
$('.navbar-fixed-top').css('background-color', 'rgba(34,34,34,' + opacity + ')');
}
fadeNavbar($(window));
$(window).scroll(function () {
fadeNavbar($(this));
});

update sidebar main-menu and sub-menu class based on url

I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.

<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});

Automatically close Toggle-nav menu upon menu selection

I need help in automatically closing a toggle-nav menu on mobile. Right now it doesn't close when a menu is selected.
HTML:
<!-- fixed header -->
<header id="navbar-top">
<div class="pt_navbar">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- start menu-->
<div id="main-nav">
<i class="fa fa-bars"></i> Miracle Trainer
<ul class="pt_nav nav">
<li class="active">
Welcome
</li>
<li>
Training Videos
</li>
<li>
Pricing
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- end menu-->
</div>
</div>
</div>
</div>
</header>
JS:
I need a way to close the toggle-nav when a menu is selected.
$("body").on('click', '#toggle-nav', function(e){
e.preventDefault();
var nav_menu = $("#navbar-top .pt_navbar ul");
if( nav_menu.height() < 10 ){
nav_menu.addClass('open_menu');
}else{
nav_menu.removeClass('open_menu');
}
});

I am currently using this for a slide-out menu:
$('.slideout-menu-toggle, .select').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
right: "0px"
});
} else {
slideoutMenu.animate({
right: -slideoutMenuWidth
}, 400);
}
});
Some adjustments might work for you.
EDIT: with the above working code in mind, I think your first jQuery line should be like this:
$('#toggle-nav, .select').on('click', function(e){
and add the "select" class to your list items.