I am writing a code to open and close navigation bar with the button
my code is as follows
#DIV1{
display:block;}
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1')
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
</script>
It wont work what should I do or what am I doing wrong? There are other CSS properties for navigation bar which I have skipped.
It doesn't work because you have to set its display with javascript or with inline style to get something by yourDiv.style.display. In your case, when you click on your button, the display is not set and then you can't enter nor in your if neither in your else if statement. So try this:
var togg = document.getElementById('DIV1');
togg.style.display="block"; /* => I set a display value */
function abc(){
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
#DIV1 {
display:block;
}
/*you can remove this rule. You are changing the display via javascript */
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
Another way: you could simply create a class to "hide" your div and then toggle it using classList and toggle:
function abc(){
var togg = document.getElementById('DIV1')
togg.classList.toggle("myClass");
}
.myClass {
display:none;
}
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
here is the correct code:
<style> #DIV1{
display:block;}
</style>
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1');
if (togg.style.display == "block")
{
togg.style.display="none";
}
else
{
togg.style.display="block";
}
}
</script>
if i understood your question try this one:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div1{
display:block;}
</style>
<script>
function abc()
{
var togg = document.getElementById("div1")
if (togg.style.display === "none")// 3 ===
{
togg.style.display="block";
}
else {
togg.style.display="none";
}
}
</script>
</head>
<body>
<div id="div1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onclick="abc()">HIDE</button>
</body>
</html>
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>
$('.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
This may be a silly question but I cannot figure out why my menu displays when the page is loaded. I would like to have it closed and then opened when it is clicked but it is the other way around and I can't seem to fix it.
<html>
<head>
<script>
$(document).ready(function () {
$('#nav p')
.css({ cursor: "pointer" })
.on('click', function () {
var txt = $(this).text() == "MENU" ? "CLOSE" : "MENU";
$(this).text(txt);
$(this).next('ul').toggle();
})
});
</script>
</head>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>
$(document).ready(function(){
$('#nav p')
.css({cursor: "pointer"})
.on('click', function(){
var txt = $(this).text() === "MENU"?"CLOSE":"MENU"; // 3 egals verification
$(this).text(txt);
$(this).next('ul').toggle();
})
});
ul{
display: none; /* ADD this */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li></ul>
</div>
</body>
</html>
You can do most of the stuff from CSS. Create .closed class and assign it to #nav.
#nav.closed > ul{
display: none;
}
That's it. You are done with minor changes in jQuery click event!
See the snippet below.
$(document).ready(function(){
$('#nav p').on('click', function(){
$(this).parent().toggleClass("closed");
});
});
#nav{
cursor: pointer;
}
#nav.closed p::after{
content : "CLOSE";
}
#nav p::after {
content: "MENU";
}
#nav.closed > ul{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
<p></p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>
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;
}
I would like to Highlight the Menus Dynamically by using Php & javascript. Below code working for only Menu's. But I want when I click Submenu for that menu it should be Highlighted.Please check the Code once
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Please Help me. Thanks in advance.
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
If I understood right, that's what you are looking.
BTW, you have some syntax problems.
You didn't close the <style>.
The <ul id="id"> is outside the <body>, isn't closed and apparently does nothing.
You are missing the <head>.
Final code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
});
</script>
<style>
.active {
background: #4FA9E4;
color:#FFF;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">
Company
<ul>
<li class="has-parent">a</li>
<li class="has-parent">b</li>
</ul>
</li>
<li class="has-sub">
Patners
<ul>
<li class="has-parent">c</li>
<li class="has-parent">d</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>