display menu in another div using javascript error - javascript

The bellow code works fine
how to clear the div area when another menu i clicked
when i click mobile it should display mobile
and when i click electronics it should display electronics
ERROR IN MY CODE
when i click mobile it display mobile
when i click electronics it display electronics
BUT
- its not clearing the previous clicked value
FULL CODE
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>mobile</li>
<li>electroics</li>
<li>vehicle</li>
<li>home</li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
function mob() {
document.getElementById('mobi').style.display = "block";
}
function ele() {
document.getElementById('elec').style.display = "block";
}
function veh() {
document.getElementById('vehi').style.display = "block";
}
function hme() {
document.getElementById('home').style.display = "block";
}
</script>
</body>
</html>

Following clear the all divs(Hides the all DIVS)
function hidemenus() {
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
}
So in every mouse click request we hide the all DIVs and show the requested DIV.
function mob() {
hidemenus();
document.getElementById('mobi').style.display = "block";
}
Hope this would work for you.

It is because you never hide the previous divs.
What you can do is save the current active one in a variable and close it when the link is clicked.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>mobile</li>
<li>electroics</li>
<li>vehicle</li>
<li>home</li>
</ul>
</div>
<div class="dis123">
display
<div id="mobi" style="display:none;z-index:99;" class="answer_list" >mobiles</div>
<div id="elec" style="display:none;z-index:99;" class="answer_list" >electronics</div>
<div id="vehi" style="display:none;z-index:99;" class="answer_list" >vehicles</div>
<div id="home" style="display:none;z-index:99;" class="answer_list" >home</div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
var currentDisplay = "";
function mob() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('mobi').style.display = "block";
currentDisplay = "mobi";
}
function ele() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('elec').style.display = "block";
currentDisplay = "elec";
}
function veh() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('vehi').style.display = "block";
currentDisplay = "vehi";
}
function hme() {
if (currentDisplay != "")
document.getElementById(currentDisplay).style.display = "none";
document.getElementById('home').style.display = "block";
currentDisplay = "home";
}
</script>
</body>
</html>
Tip: Using Jquery would make things a lot easier.

Related

Javascript dropdown menu toggle button

I am trying to get my option list to hide until the dropdown menu button has been clicked and for it to hide again once it has been clicked however, it is not working. Here is my code. Please let me know what i can do to fix it
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Cocktail App</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap"
rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/recipe.css">
<script src="recipe.js"></script>
</head>
<body>
<h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
<div class="container">
<button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
<div id="myDropdown" class="search-container">
<input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
Margarita
<a href="#>Mojito</a>
Long Island tea
Whiskey Sour
</div>
</div>
<div id="result"></div>
</div>
</body>
</html>
My javascript :
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var dropDown = document.getElementById("myDropdown");
var link = dropDown.getElementsByTagName("a");
for (i = 0; i < link.length; i++) {
textValue = link[i].textContent || link[i].innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
link[i].style.display = "";
} else {
link[i].style.display = "none";
}
}
}
You'll need some CSS to define the class "show", for example add this inside your HTML <head>:
<style>
.hidden {
display: none !important;
}
</style>
Notice that I changed the class name to "hidden" instead of "show" for semantics.
This way, when an element has the class "hidden", it will not be displayed.
Now change your Javascript correspondingly, so it adds and removes the class "hidden":
document.getElementById("myDropdown").classList.toggle("hidden");
First try to add the missing quotation mark after # in:
<a href="#>Mojito</a> and see if it works then.
And remove the 'java' from tags since this is not java but javascript :)
I can't see your css but your .show class needs to defined. Add the following to your stylesheet:
#myDropdown {
display: none;
}
#myDropdown.show
{
display: block;
}
Working:
function myFunction() { document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var dropDown = document.getElementById("myDropdown");
var link = dropDown.getElementsByTagName("a");
for (i = 0; i < link.length; i++) {
textValue = link[i].textContent || link[i].innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
link[i].style.display = "";
} else {
link[i].style.display = "none";
}
}
}
#myDropdown {
display: none;
}
#myDropdown.show
{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>Cocktail App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet" />
</head>
<body>
<h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
<div class="container">
<button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
<div id="myDropdown" class="search-container">
<input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
Margarita
Mojito
Long Island tea
Whiskey Sour
</div>
</div>
<div id="result"></div>
</body>
</html>

(Etch-a-Sketch) Why only the rows and not the columns are generated?

I was working on my Etch-a-Sketch project and there is an issue with populateBoard() function, it seems only the rows are generated, why?
HTML:
<!DOCTYPE html>
<head>
<title>Sketchpad</title>
<link rel="stylesheet" a href="reset.css">
<link rel="stylesheet" a href="styles.css">
</head>
<body>
<div class="flex-conainer">
<div class="title"><h1>Sketchpad</h1></div>
<div class="content">
<div class="board"></div>
<div class="buttons">
<button>Black</button>
<button>White</button>
<button>Random</button>
<button>Reset</button>
</div>
<input type="text" placeholder="Size of Board" value="16" onchange="changeSize(this.value)"/>
<button>Set size:</button>
</div>
</div>
</body>
<script src="Main.js"></script>
</html>
Javascript:
function populateBoard(size) {
let board = document.querySelector('.board');
board.style.gridTemplateColumns = `repeat(${size}, 1fr;)`;
board.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (let i =0 ; i<256; i++) {
let square = document.createElement('div');
square.style.backgroundColor = 'blue';
board.insertAdjacentElement('beforeend', square);
};
}
function changeSize(input) {
populateBoard(input);
};
CSS:
.board {
width: 500px;
height: 500px;
display: grid;
}
Overall I want my grid to be interactive and to be able o change once I input a size.

How to change css property when you click on button?

I want when i click in each one of them to pop the span element with class color but only for that button.
[![enter image description here][1]][1]
I only achieved when i click on one of them to change the visibility to visible on all elements with class colors.
my Code : https://jsbin.com/govowakasa/edit?js
document.getElementById("btn-apple").addEventListener("click", function(e) {
showColor()
});
function showColor() {
const colors = document.getElementsByClassName("color");
for (let i=0; i<colors.length; i++) {
colors[i].style.visibility = 'visible';
}};
You can simply add this line
fruits[i].style.backgroundColor = 'red'
You can not use the same ID for more than 1 element.
I replaced the IDs of buttons with a new class name fruit-btn.
Then I made an array in JS of both buttons and color spans.
Then I looped through each button to add an EventListener.
In the event I added another loop that hides every color span and then makes the i span visible. There is no need for a function.
const fruit_btn = document.getElementsByClassName("fruit-btn");
const color_spans = document.getElementsByClassName("color");
for (let i = 0; i < fruit_btn.length; i++) {
fruit_btn[i].addEventListener("click", function(e) {
for (let i = 0; i < fruit_btn.length; i++) {
color_spans[i].style.visibility = "hidden";
}
color_spans[i].style.visibility = "visible";
});
}
body {
font-size: 2rem;
}
li {
margin: 20px;
list-style: none;
}
button i {
cursor: pointer;
font-size: 3rem;
}
.color {
margin: 10px;
border: 1px solid black;
background-color: blanchedalmond;
display: inline-block;
padding: 10px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits</title>
<link rel="stylesheet" href="list.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha512-0S+nbAYis87iX26mmj/+fWt1MmaKCv80H+Mbo+Ne7ES4I6rxswpfnC6PxmLiw33Ywj2ghbtTw0FkLbMWqh4F7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<p>
FRUITS
</p>
<ul>
<li class="items">
<button class="fruit-btn"><i class="fas fa-apple-alt"></i></button>
<span class="color">red and yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-carrot"></i></button>
<span class="color">orange</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-lemon"></i></button>
<span class="color">yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-pepper-hot"></i></button>
<span class="color">red and green</span>
</li>
</ul>
<script src="/week-4/index.js"></script>
</body>
</html>
I would suggest to add/remove a Class instead of adding/removing directly CSS styling.

$(window).scroll does not fire event when using multiple pages in a html

I would like to implement floating action button into long pages.
It works well when I write simple html page.
But, it does not work properly when I write multiple pages into one html. It does not fire $(window).scroll event after jumping between inner pages. I will show simplified source codes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Floating Action Button Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<!-- PAGEA -->
<section data-role="page" id="pagea">
<header data-role="header">
<h1>PAGE A</h1>
<div class="ui-btn-right">
<a id="logoutButton" class="headerButton" href="#pageb" data-role="button">PAGE B</a>
</div>
</header>
<div data-role="content">
<h1>CONTENT</h1>
<h2>AAA</h2>
<h2>BBB</h2>
<h2>CCC</h2>
<h2>DDD</h2>
<h2>EEE</h2>
<h2>FFF</h2>
<h2>HHH</h2>
<h2>III</h2>
<h2>JJJ</h2>
<h2>KKK</h2>
<h2>LLL</h2>
<h2>MMM</h2>
<h2>NNN</h2>
<h2>OOO</h2>
<h2>PPP</h2>
<h2>QQQ</h2>
<h2>RRR</h2>
<h2>SSS</h2>
<h2>TTT</h2>
</div><!--main-->
<footer data-role="footer">
FOOTER
</footer>
</section>
<!-- PAGEB -->
<section data-role="page" id="pageb">
<header data-role="header">
<h1>INDEX</h1>
<div class="ui-btn-right">
<a id="logoutButton" class="headerButton" href="#pagea" data-role="button">PAGE A</a>
</div>
</header>
<div data-role="content">
<h1>CONTENT</h1>
<h2>aaa</h2>
<h2>bbb</h2>
<h2>ccc</h2>
<h2>ddd</h2>
<h2>eee</h2>
<h2>fff</h2>
<h2>ggg</h2>
<h2>hhh</h2>
<h2>iii</h2>
<h2>jjj</h2>
<h2>kkk</h2>
<h2>lll</h2>
<h2>mmm</h2>
<h2>nnn</h2>
<h2>ooo</h2>
<h2>ppp</h2>
<h2>qqq</h2>
<h2>rrr</h2>
<h2>sss</h2>
</div><!--main-->
<footer data-role="footer">
FOOTER
</footer>
</section>
<!-- ############################################################## -->
Back To Top
</body>
<style>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
}
</style>
</html>
When load this page, scroll event is normally fired and floating action button is displayed. But, after jumping to 'Page B', scroll event will not be fired anymore.
Could somebody tell me what is wrong ?
Hi i have check it and the problem you have got that
jQuery(window).scroll don't work when you click on Page B because the location is changes and simply to fix this change jQuery(window).scroll to jQuery(document).scroll and it will work
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
//here you should change jQuery(window) to jQuery(document) like this
jQuery(document).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});

Get name of dynamically created div in javascript?

I cannot seem to make my javascript .click() method work with my dynamically created divs. In this code I have divs created each under the class name "class1" but my click method does not seem to detect their existence. Here is my code:
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
}
// window.onload = populate;
$(function () {
$("container2").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<div id="myBox">Hello World!</div>
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
#Html.DropDownList("centres")
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
And here is what it returns (taken from google chrome):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Description of your web page goes here." />
<meta name="keywords" content="Keywords for you web page go here. Each keyword or group of keyword phrases are separated by a comma. Keep this list short and relevant to the content and title of this specific page." />
<title>OneEighty Asset Manager
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="logo">
<p></p>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<!-- end #menu -->
<div id="wrapper">
<div class="btm">
<div id="page">
<h1>
<img src="../../Content/Images/1Eighty.png" alt="" style="height: 100px; width: 750px;" /></h1>
<div id="content">
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function populate() {
var select = document.getElementById("centres");
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
}
function divGenerator() {
var div;
for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Space " + i;
div.style.width = "100px";
div.style.height = "100px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
}
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
}
// window.onload = populate;
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#container2").on("click", ".class1", function () {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('#myBox', '128px', '62px', 'hidden');
myBox.apos('170px', '150px');
alert("div clicked");
});
});
</script>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
<select id="centres" name="centres"><option>Southdale</option>
<option>Sasolburg</option>
<option>Sandton City</option>
<option>Greenstone</option>
<option>Morningside</option>
<option>Easgate</option>
<option>Bedfordview</option>
<option>Fourways</option>
<option>Linksfield Terrace</option>
<option>Carlton Centre</option>
<option>testcentre1</option>
<option>testcentre2</option>
<option>testcentre3</option>
</select>
</div>
<div id="container2" style="margin: 10px; float: left;" />
<head>
<script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
<style type="text/css">
#myBox #myBox_content {
padding: 2px;
font-family: verdana, arial, helvetica;
font-size: 12px;
}
</style>
<title></title>
</head>
<body>
<!--
popup
-->
</body>
</div>
<!-- end #content -->
<div style="clear: both;">
</div>
</div>
<!-- end #page -->
</div>
</div>
<div id="footer">
<p>
Copyright (c) 2009 1eightyintra.com. All rights reserved.
</p>
</div>
<!-- end #footer -->
</body>
</html>
Because the element doesn't exist in the DOM on page load, you need to use an event delegate, such as on:
$(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
Or for pre-1.7 jQuery, use delegate:
$(function () {
$("body").delegate(".class1", "click", function () {
alert("The div was clicked.");
});
});
click only binds handlers to elements that were present in the DOM when you called it.
Instead, use the jQuery on method:
$(document).ready(function () {
$("body").on("click", ".class1", function () {
alert("The div was clicked.");
});
});
You will need to re-apply the click handler to the newly created divs.

Categories