Can someone tell me why this isn't working?
HTML
<head>
<body id="top" class="home page page-id-1412 page-template-default logged-in stretched open_sans open_sans siteorigin-panels" itemtype="http://schema.org/WebPage" itemscope="itemscope">
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="header_meta" class="container_wrap container_wrap_meta">
<div id="header_main" class="container_wrap container_wrap_logo">
<div id="header_main_alternate" class="container_wrap">
<div class="container">
<nav class="main_menu" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation" data-selectname="Select a page">
<div id="megaMenu-sticky-wrapper">
<div id="megaMenu" class="megaMenuContainer megaMenuHorizontal wpmega-preset-vanilla megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnClick megaFullWidth wpmega-noconflict megaMinimizeResiduals themeloc-avia megaMenu-withjs">
<div id="megaMenuToggle" class="megaMenuToggle">
<ul id="megaUber" class="megaMenu">
<li id="menu-item-8" class="jrm-um-sticky-only menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
<li id="menu-item-1459" class="my_custom_class menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children mega-with-sub ss-nav-menu-item-1 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth mega-colgroup mega-colgroup-6 ss-nav-menu-mega-alignCenter">
<a href="#">
CSS
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
display: none;
}
JS
$(document).ready(function() {
$('.my_custom_class').click(function() {
$('#overlay-2').toggle();
});
});
I want the #overlay-2 to be hidden when the page loads and then toggle show/hide when I use the menu button with a custom class assigned in wordpress nav menu "css classes" metabox. .my_custom_class is what I assigned it.
Why isn't this working?
If you could supply the corrected code that would be great :)
Thanks!
Simply cause you don't have any .my_custom_class in your HTML
If you add a
<button class="my_custom_class">Toggle Overlay</button>
both in your document and inside the overlay you're good to go:
LIVE EXAMPLE
Related
I am bit new to AngularJs so I have got stuck into the problem.
Let me explain what I want to achieve.
I have design two div with child and parent relation.
// first parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
// second parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
When I hover or move the mouse over parent div it should hide/show the respective child div.
But with my code on hover it hides/shows the content of both the child div.What changes do I have to do in code?
See complete code
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()" style="background-color:pink">
<span >Parent one</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()">
<span >Parent two</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
Controller for this code, see below
var app = angular.module("app", []);
app.controller("headerController",function($scope){
$scope.hoverIn = function(){
this.showMe = true;
};
$scope.hoverOut = function(){
this.showMe = false;
};
});
Css file
.top-menu {
overflow: hidden;
}
.top-menu .drop-down {
position: absolute;
top: 20px;
z-index: 10000;
background-color: white;
box-shadow: 0px 0px 3px rgb(241, 241, 241);
border: 1px solid #d1d1d1;
}
.top-menu .drop-down ul {
padding: 0px;
margin: 0px;
list-style-type: none;
min-width: 180px;
}
You have to change the name of your functions since both div's are using the same function and changing the same attribute showMe.
HTML:
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(1)" style="background-color:pink">
<span>Parent one</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[1]" ng-mouseleave="hoverOut(1)" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(2)">
<span>Parent two</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[2]" ng-mouseleave="hoverOut(2)">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
JS:
$scope.showMe=[];
$scope.hoverIn = function(id) {
$scope.showMe[id] = true;
};
$scope.hoverOut = function() {
$scope.showMe[id] = false;
};
I have a hamburger menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as there is no loading so once the user clicks on the nav link they are brought to the location but the dropdown menu will not close. I tried adding .hide to the JS which hides the dropdown on the click of a link but that created my new issue.
After the user clicks one of the nav links it does hide the menu but upon clicking the menu icon again the menu will not open at all. In dev tools I see that upon clicking one of the nav links it is given the style of display:none so I feel that the issue might lie there. Thanks for the help and please let me know if any other information is needed!
HTML:
<nav class="navbar navbar-light navbar-fixed-top">
<div class="wrapping container-fluid">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav navbar-nav float-sm-right mr-0 menu">
<li class="nav-item">
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workshops">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#locations">Location</a>
</li>
<li class="nav-item">
<a class="nav-link last-link" href="#register">Register</a>
</li>
</ul>
<a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
</div>
</nav>
CSS for this menu:
.menu{
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.open{
height: 295px;
}
.hamburger {
cursor: pointer;
padding: 15px 10px 15px 0;
display: block;
float: right;
margin-top: 15px;
}
JS:
$('.hamburger').on('click', function () {
$('.menu').toggleClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').hide();
});
If you're going to use .toggleClass('open') to open the menu, use it for closing the menu as well.
Generally, though, you'll want to use .addClass() and .removeClass() instead:
$('.hamburger').on('click', function () {
$('.menu').addClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').removeClass('open');
});
If your hamburger menu has checkbox behind it, you can simple set it to unchecked to close the hamburger menu
function hideMenu(){
let menuOpen = document.querySelector('.toggler').checked;
if(menuOpen = true){
document.querySelector('.toggler').checked = false;
}
}
window.addEventListener("scroll", hideMenu);
I need help for my personal website. I want to make a one page site with a fixed top navbar (with transparent background). At the scrolling of the page, the color of the menu elements must change dinamically from black to white on the sections that have a dark background (they have a ".dark-bg" class) and return white on the other sections. All sections are 100vh height (except for the menu, of course). This is the HTML main structure of the site:
<section class="section--menu fixed-header">
<nav class="menu" id="navigation">
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
</nav>
</section>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I wrote this jQuery script but it seems to work only for the last section with ".dark-bg" class.
$(document).ready(function() {
$(".dark-bg").each(function() {
detectBg( $(this) );
});
function detectBg(sezione) {
$(window).scroll(function() {
var finestra = $(window).scrollTop();
var sezCurr = sezione.offset().top;
var sezNext = sezione.next().offset().top;
if (finestra >= sezCurr && finestra < sezNext) {
$('.menu__link').css("color", "#ebebeb");
}
else {
$('.menu__link').css("color", "#1c1c1c");
}
});
}
});
Thanks in advance!
You need to handle scroll event of the window, and in that handler, check if any of the dark section is under the menu, if so, then change the color of the menu links. Here is an example of changing the color for all links, but it can be easily extended to do it separately for each link:
$(window).scroll(function() {
var vpHeight = $(window).height();
var isBlack = false;
$(".dark-bg").each(function(i, section) {
if(isBlack) {
return;
}
var offset = $(section).offset().top - $(window).scrollTop();
if(((offset + vpHeight) >= 0) && ((offset + vpHeight) <= vpHeight)) {
isBlack = true;
return;
}
});
$(".menu__link").css("color", isBlack ? "white" : "black");
});
body {
padding: 0;
margin: 0;
}
ul {
position:fixed;
background: orange;
padding: 0;
margin: 0;
list-style-type: none;
}
ul > li {
float: left;
padding: 0 4px;
}
section {
background:red;
height: 100vh;
}
.dark-bg {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I'm learning bootstrap and I'd like my custom horizontal navbar to stick at the top of the page once it reaches it (like this).
I have tried to add an affix class to my CSS as well as a piece of JS code, but that does not work. What is the issue?
See https://jsfiddle.net/bs7bdpmh/
html
<div id="nav" class="container-fluid">
<nav class="navbar-classic">
<li>Who are we?
<ul class="dropdown">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Services Services Services
</li>
<li>Products Products Products
</li>
</nav>
CSS
#nav.affix {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
z-index:10;
}
JS
$('#nav').affix({
offset: {
top: $('header').height()
}
});
You mean something like this ?
See this fiddle
JS :
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
if(scrollTop > 50){
$('#nav').addClass('affix');
}else{
$('#nav').removeClass('affix');
}
});
Of course, it's not perfect, I let you adapt the CSS code and HTML structure ;)
If you are using normal bootstrap the solution is easy
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
and if you want to change the navbar when you scroll to the bottum just use something like:
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height())
{
$('#nav').addClass('affix');
}
});
Here is a pen. I also have a live version.
I created a responsive nav with dropdowns, and everything works perfectly. I was working on making it sticky, as in after you scroll past a certain point, it becomes fixed to the top.
It works fine, except when you resize the page until the responsive hamburger menu shows up and click on it. The page then jumps to the top.
Here's my code for the sticky.
$(window).scroll(function () {
if ($(window).scrollTop() >= $("header").height() + 30) {
$(".sticky").addClass("fixed");
$(".content").addClass("margin");
} else {
$(".sticky").removeClass("fixed");
$(".content").removeClass("margin");
}
});
And here's my css where the hamburger lives.
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #efefef;
height: 70px;
width: 70px;
}
And here is the code for the navbar.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
Nothing has a fixed height outside of the sticky class.
Thanks!
Here is the fixed code.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
To prevent an action happening on click toggle, add href="#!" to the a tag. Now the screen no longer jumps to the top when I click on the hamburger nav.