const hamburger = document.querySelector(
".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector(".header .container");
document.addEventListener("scroll", () => {
var scroll_position = window.scrollY;
if (scroll_position > 250) {
header.style.backgroundColor = "#29323c";
} else {
header.style.backgroundColor = "transparent";
}
});
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>ELITE.</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>Our CEO</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</section>
When I scroll past 250 the background color is not changing from transparent to the expected color in the JS code. How can I make MY JS respond on browser?
You used .header .container instead of #header .container
const hamburger = document.querySelector(
".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector("#header .container");
document.addEventListener("scroll", () => {
var scroll_position = window.scrollY;
if (scroll_position > 250) {
header.style.backgroundColor = "#29323c";
} else {
header.style.backgroundColor = "transparent";
}
});
#header {
position:fixed;
}
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>ELITE.</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>Our CEO</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</section>
<div style="height:500vh"></div>
Related
<span class="hamburger" id="hamburger" onclick="openNav()">
<nav id="nav-bar" class="nav-bar">
×
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Help</li>
<li>Address</li>
</ul>
</nav>
<script>
navBar = document.getElementById('nav-bar');
document.onclick = function(clickEvent) {
if(clickEvent.target.id !== 'nav-bar'){
navBar.classList.remove('active');
}
}
function openNav() {
navBar.classList.toggle('active');
document.body.style.backgroundColor = 'rgba(0,0,0,0.4)';
}
function closeNav() {
navBar.classList.remove('active');
document.body.style.backgroundColor = '#fefefe';
}
</script>
Actually, I'm trying to close the navbar when I click outside the navbar. When I call the onclick openNav function, at the same time document.onclick function also called. This will caused my navbar is not opened. The document.onclick function should not call when I call the openNav onclick function. How can I fix this?
navBar = document.getElementById('nav-bar');
document.onclick = function(clickEvent) {
var clickover = clickEvent.target;
if (!document.getElementById('nav-bar').contains(clickover) && clickover.id!="hamburger" ){
navBar.classList.remove('active');
document.body.style.backgroundColor = '#fefefe';
}
}
function openNav() {
navBar.classList.add('active');
document.body.style.backgroundColor = 'rgba(0,0,0,0.4)';
}
function closeNav() {
navBar.classList.remove('active');
document.body.style.backgroundColor = '#fefefe';
}
ul li{
margin:5px;
display:inline-block;
}
.closebtn{
cursor:pointer;
}
<span class="hamburger" id="hamburger" onclick="openNav()">open Nav</span>
<nav id="nav-bar" class="nav-bar">
<a class="closebtn" onclick="closeNav()">×</a>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Help</li>
<li>Address</li>
</ul>
</nav>
I'm trying to create an e-shop and I want different categories to show up when a div is active.
JAVASCRIPT:
const tab_switchers = document.querySelectorAll('[data-switcher]');
for (let i = 0; i < tab_switchers.length; i++) {
const tab_switcher = tab_switchers[i];
const page_id = tab_switcher.dataset.tab;
tab_switcher.addEventListener('click', () => {
document.querySelector('.sidenav .tabs .tab.is-active').classList.remove('is-active');
tab_switcher.parentNode.classList.add('is-active');
SwitchPage(page_id);
});
}
}
function SwitchPage (page_id) {
const current_page = document.querySelector('.pages .page.is-active');
current_page.classList.remove('is-active')
const next_page = document.querySelector(`.pages .page[data-page="${page_id}]`);
next_page.classList.add('is-active');
}
HTML: ```
<ul class="tabs"></ul>
<li class="tab is-active">
<a data-switcher data-tab="1">Dell</a>
</li>
<li class="tab">
<a data-switcher data-tab="2">Apple</a>
</li>
<li class="tab">
<a data-switcher data-tab="3">HP</a>
</li>
<li class="tab">
<a data-switcher data-tab="4">Toshiba</a>
</li>
<li class="tab">
<a data-switcher data-tab="5">Lenovo</a>
</li>
<li class="tab">
<a data-switcher data-tab="6">Acer</a>
</li>
<li class="tab">
<a data-switcher data-tab="7">Asus</a>
</li>
<li class="tab">
<a data-switcher data-tab="8">Microsoft</a>
</li>
```
I don't know what else to do or look for, I'm still in javascript but I followed an exact tutorial and worked for him
many mistake from your example code: <ul class="tabs"></ul> is closed not including li, onst next_page = document.querySelector(.pages .page[data-page="${page_id}]); quote for page_id is not properly closed.
Here is the working snippet from your example code.
const tab_switchers = document.querySelectorAll('[data-switcher]');
for (let i = 0; i < tab_switchers.length; i++) {
const tab_switcher = tab_switchers[i];
const page_id = tab_switcher.dataset.tab;
tab_switcher.addEventListener('click', (event) => {
document.querySelector('.tabs .tab.is-active').classList.remove('is-active');
tab_switcher.parentNode.classList.add('is-active');
SwitchPage(page_id);
});
}
function SwitchPage (page_id) {
const current_page = document.querySelector('.pages .page.is-active');
current_page.classList.remove('is-active')
const next_page = document.querySelector(`.pages .page[data-page="${page_id}"]`);
next_page.classList.add('is-active');
}
ul.tabs {
display:flex;
padding:0;
margin:0;
}
ul.tabs li {
list-style:none;
margin-right:10px;
cursor:pointer;
}
ul.tabs li.is-active {
text-decoration:underline;
}
.pages .page {
display:none;
}
.pages .page.is-active {
display:block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="tabs">
<li class="tab is-active">
<a data-switcher data-tab="1">Dell</a>
</li>
<li class="tab">
<a data-switcher data-tab="2">Apple</a>
</li>
<li class="tab">
<a data-switcher data-tab="3">HP</a>
</li>
</ul>
<div class="pages">
<div class="page is-active" data-page="1">Page Dell</div>
<div class="page" data-page="2">Page Apple</div>
<div class="page" data-page="3">Page HP</div>
</div>
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
Here is my code when being ran on code snippet, thank you for your assistance in advance :)
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
My hamburger icon is currently not opening, I figure that it is a problem with my JavaScript. Any other tips and tricks when coming to JavaScript are very much welcome as I am a beginner, so your assistance would be very much appreciated.
java.js
$('.open-overlay').click(function () {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up');
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
});
my html
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
It's a bit hard to see what's going on as you're not including your CSS, and there's a lot of unnecessary code there (everything relating to your nav items).
I broke out a simple example that works:
document.getElementById('open-overlay').addEventListener('click', e => {
document.getElementById('overlay-navigation').classList.toggle('active');
})
.bar {
display: block;
height:5px;
width:20px;
margin:2px 0;
background-color: black;
}
#overlay-navigation {
display: none;
}
#overlay-navigation.active {
display: block;
}
<section class="home">
<div id="open-overlay">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</section>
<div id="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
Things that I changed:
open-overlay and overlay-navigation are now ids and not classes
overlay-navigation has it's display set to none by default (hidden)
.active simply sets the display back to block
I cant fix one bug in my code. I create on click slide up/down div, but yet when i click it 4 times very fast my css top value is to height and function stop working. Can you please suggest me some solution or another way to handle this ?
Here is code:
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>
Is this what you want?
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
section { position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>
I think this is better:
$(function() {
$(".nav li a").click(function(event) {
var href=$(this).attr('href');
$(href).toggleClass('offscreen');
event.preventDefault()
});
});
section { position: relative; transition: 0.5s all; top:0 }
.offscreen { top: -500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9 offscreen">About
</section>
I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?
There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}