When I click on the hamburger menu when the page first refreshes, it works fine and the menu drops down as expected. After redirecting to a different page from the submenu, the hamburger button no longer drops down and will only drop down again after a page refresh.
However, my ng-click is still being registered.
This is my HTML:
<body ng-app="app">
<create-merchant ng-if="loaded && loaded.all_root_collections"></create-merchant>
<create-ticket ng-if="loaded && loaded.all_root_collections"></create-ticket>
<!-- Navigation Bar-->
<header id="topnav" ng-if="authenticated && userPermissions" ng-cloak>
<!-- Topbar Start -->
<div class="navbar-custom">
<div class="container-fluid">
<ul class="list-unstyled topnav-menu float-right mb-0">
<li class="dropdown notification-list">
<!-- Mobile menu toggle-->
<script>console.log(navigationOpen);</script>
<a class="navbar-toggle nav-link" ng-click="navigationOpen = !navigationOpen" ng-class="{'open': navigationOpen}">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
<!-- End mobile menu toggle-->
</li>
<li ng-show="!hideNavBar" class="dropdown notification-list">
<a class="nav-link" href="#/notifications" role="button">
<i class="fe-bell noti-icon"></i>
<span class="badge badge-danger rounded-circle noti-icon-badge">{{rootAlertCount||0}}</span>
</a>
</li>
This is in my app.js :
$rootScope.navigationOpen = false;
console.log($rootScope.navigationOpen);
This is my directive:
(function () {
'use strict';
angular
.module('app')
.directive("navbarDirective", ['$timeout', function ($timeout) {
function link(scope, element, attrs) {
$(element).find('.has-submenu').children('a').on('click', function (event) {
if(window.innerWidth < 992){
event.preventDefault();
$(this).parent().find('.submenu').stop().slideToggle();
$(element).find('.submenu').find('a').unbind( "click" ).bind('click', function (event) {
if(window.innerWidth < 992){
console.log(scope.navigationOpen);
scope.navigationOpen = !scope.navigationOpen;
console.log(scope.navigationOpen);
scope.$apply();
}
})
}
});
}
return {
resrict: 'A',
link: link
};
}])
})();
Related
I have a Bootstrap 4 tabs set in a Wordpress website and want to link to a specific tab from another page link:
Index.php:
Discover More
Services.php:
<!-- Nav tabs -->
<ul class="nav nav-tabs text-xs-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true">
<h4>Innovation &<br/>Investigation</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false">
<h4>Electronic<br/>Engineering</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false">
<h4>Manufacturing</h4>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content clearfix">
<!-- Innovation -->
<div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true">
<div data-aos="fade" data-aos-duration="2000" class="col-sm-5">
Content
</div>
</div>
<!-- Electronic Engineering -->
<div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="electronic-engineering" role="tabpanel" aria-expanded="false">
<div class="col-sm-5">
Content
</div>
</div>
<!-- Manufacturing -->
<div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="manufacturing" role="tabpanel" aria-expanded="false">
<div class="col-sm-5">
Content
</div>
</div>
</div>
Javascript:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
I had tried this solutions but without success:
- Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
Thanks
I would recommend something like this / use pushState - otherwise your browser scrolls to your ID:
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
history.pushState({}, '', e.target.hash);
});
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
});
It's not working because you need to attach the shown.bs.tab handler before calling .tab('show') on page load.
// wire up shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log("tab shown...");
});
// read hash from page load and change tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
Bootstrap 4 - Active Tab on Page Load
Code: http://www.codeply.com/go/Yu8wbjeGMZ
Demo: http://www.codeply.com/render/Yu8wbjeGMZ#tab2
This is where I landed with Bootstrap 4. You just need to make sure your hash it the id of the anchor (a href) tag.
$(function() {
$(document.location.hash).tab('show');
});
I have this code for a sidebar (similar to WordPress).
I have multiple Parent classes <li class="panel parent">. One of the parent has a child container with Notes Received, and Notes Sent. Currently when I click the parent the child is working, and if I select other parents the child is closing as well.
I have used the addClass in jQuery to select both parent and child.
The Issue is
When I reload the page, addClass disappeared from the parent. I believe you can make it work with localStorage but i don't know how to use it.
Can you help me out. Sorry for my English.
<div id="sidebar-wrapper">
<div id="sidebar">
<ul id="accordion" class="sidebar-menu grandparent">
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#notes" href="#"> Vegetables </a>
<div id="notes" class="panel-collapse collapse">
<!-- children -->
<ul class="children">
<li> Potato </li>
<li> Tomato </li>
...
</ul>
</div>
</li>
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Fruits</a>
<div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
</li>
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Spices</a>
<div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
</li>
...
</ul>
</div
</div>
Here's my jQuery
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
});
Thanks.
OLD ANSWER
you should exec this
window.localStorage.setItem('OPEN', 'YES');
or this
window.localStorage.setItem('OPEN', 'YES');
depending if you are going to show or close the side menu.
Then your jQuery should become like this
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
if( window.localStorage.getItem('OPEN') ==='YES' ) {
/* put here your code to add the class "addClass" to the parents you want */
}
});
EDIT: NEW ANSWER BASED ON JSFIDDLE
this javascript code will do the magic
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
window.localStorage.setItem('OPEN', $(this).html());
alert("set OPEN to "+$(this).html());
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
if( window.localStorage.getItem('OPEN') ) {
$('.grandparent').find('li a').each(function( index ) {
if($(this).html() === window.localStorage.getItem('OPEN'))
$(this).click();
});
}
});
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"
I am having issues with the nav bar collapsing when in full screen view. I want the nav bar to collapse in the hamburger via the mobile screen and i wrote a custom directive. Now when in full screen and you click a link the nav bar collapses and is causing an annoying flicker! Any ideas or help would be greatly appreciated!
Here is my code:
js:
.directive('collapseMenu', function () {
return {
link: function (scope, elem, attrs) {
$('.nav a').on('click', function(){
$('.navbar-toggle').click()
});
}
}
});
html:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div collapse-menu class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Show Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="#/home"></a><a <img src="images/phone.png" alt="press to call"></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><a class="home" href="#/home">Home</a></li>
<li><a class="about" href="#/about">About</a></li>
<li><a class="con" href="#/contact">Contact</a></li>
<li><a class="review" href="#/review">Reviews</a></li>
<li><a class="admin" href="#/admin">Admin</a></li>
</ul>
</div>
</div>
</nav>
So, if you want to eliminate the collapse on larger screens, you'll have to add a screen width check to your link click function. And, if it's less than a certain size, you fire off the .navbar-toggle click function. Otherwise, you do nothing. You could check the screen width using $(window).width(). So, your directive code would become:
.directive('collapseMenu', function () {
return {
link: function (scope, elem, attrs) {
$('.nav a').on('click', function(){
if ($(window).width() <= 1200) {
$('.navbar-toggle').click();
}
});
}
}
});
I'd like to have a menu button that opens a custom slide-in nav and a specific bootstrap accordion panel (within the nav) simultaneously on one click. I have the slide-in menu and accordion working independently. The button currently opens the menu but can't figure out how to have it also expand a panel. Ideally I'd like the panel to open after the menu opens with a slight delay.
Please check this working JSFIDDLE for details
Thanks!
jQuery(document).ready(function($) {
var open = false;
var openSidebar = function() {
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
open = true;
}
var closeSidebar = function() {
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
open = false;
}
$('.toggle-menu').click(function(event) {
event.stopPropagation();
var toggle = open ? closeSidebar : openSidebar;
toggle();
});
$(document).click(function(event) {
if (!$(event.target).closest('.menu--slide-right').length) {
closeSidebar();
}
});
});
<header class="navbar nav-main navbar-fixed-top" role="banner">
<ul class="nav nav--right">
<li class="v-button--slide-right" id="toggle-menu">
<button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
<span class="toggle"></span>
<span class="menu">menu</span>
</button>
</li>
</ul>
<nav id="menu--slide-right" class="nav menu--slide-right">
<ul class="main-menu">
<li>Home</li>
<ul aria-multiselectable="true" role="tablist" id="accordion" class="panel-group">
<li class="panel">
<a aria-controls="dropdown-menu--resources" aria-expanded="false" data-target="#dropdown-menu--resources" data-parent="#accordion" data-toggle="collapse">Resources <span class="expand-icon fa fa-angle-down"></span></a>
<div aria-labelledby="headingOne" role="tabpanel" class="panel-collapse collapse" id="dropdown-menu--resources">
<ul class="v-dropdown-menu">
<li><span class="link-icon fa fa-angle-right"></span> Blog</li>
<li><span class="link-icon fa fa-angle-right"></span> FAQ</li>
<li><span class="link-icon fa fa-angle-right"></span> Glossary</li>
<li><span class="link-icon fa fa-angle-right"></span> Shipping info</li>
</ul>
</div>
</li>
</ul>
<!-- end panel-group -->
<li>Capabilities</li>
<li>Contact</li>
</ul>
</nav>
</header>
use the in and collapse classes
var openSidebar = function(){
...
$('#dropdown-menu--resources').addClass('in');
open = true;
}
var closeSidebar = function(){
...
$('#dropdown-menu--resources').removeClass('collapse');
open = false;
}
Try this
Added $(".collapse").collapse('show'); in openSidebar and $(".collapse").collapse('hide'); in closeSidebar.
var openSidebar = function(){
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
$(".collapse").collapse('show');
open = true;
}
var closeSidebar = function(){
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
$(".collapse").collapse('hide');
open = false;
}