classList toggle(show) doesn't show the dropdown content - javascript

I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Would someone help me explain it?
html:
function myFunction(){
document.getElementById("drop").classList.toggle("show");
}
div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
</div>
</div>
The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.

You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}
<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->

it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)

There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}
div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
}
<div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
</div>
</div>

Related

Responsive navigation menu aligning

I have a problem with my responsive navigation. My menu is aligned only on contact page. I tried different approach like changing it from inline-block to block to flex, but with no success.I put to sidemenu text-align:center. Can someone help me to fix it?
<header class="header">
<div class="logo">
<img src="assets/img/ermita-logo.png" alt="Solaia" height="40px" width="auto">
</div>
<nav>
<div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i>
</div>
<div id="menu" class="sidemenu">
Home
Wines
Winery
Awards
Contact
×
</div>
</nav>
</header>
CSS
#media screen and (max-width: 600px){
#mainbox{
display:flex;
float:right;
padding-right: 30px;
}
.header{
height: 70px;
position: absolute;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display: inline-block;
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color:black;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
text-align: center;
float:none;
}
.sidemenu a{
display:block;
padding:20px 10px;
text-decoration: none;
font-size: 20px;
color:white;
}
Javascript
function openFunction(){
document.getElementById("menu").style.width="100%";
document.getElementById("mainbox").style.marginLeft="300px";
}
function closeFunction(e){
e = e || window.event;
e.preventDefault();
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
;
}
#m
edia screen and (max-width: 600px){
#mainbox{
display:flex;
float:right;
padding-right: 30px;
}
.header{
height: 70px;
position: absolute;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display: block;
top: 0px;
right: 0px;
height: 100%;
background-color: black;
z-index: 1;
overflow-x: hidden;
transition: all .5s;
float: none;
}
.sidemenu a{
display:block;
padding:20px 10px;
text-decoration: none;
font-size: 20px;
color:white;
}
}

Scroll position problem with resposive navigation

I have problem with resposive navigation that i worked on.The problem is that when i open and then closed the menu it's take me back to the beginning of the page.I want when open and then closed the menu scroll position to be the same as that before opening the menu.How to make that?
HTML
<header class="header">
<div class="logo">
<h2>LOGO</h2>
</div>
<nav>
<div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i></div>
<div id="menu" class="sidemenu">
Home
About
Contact
Login
×
</div>
</nav>
</header>
CSS
#mainbox{
font-size: 24px;
cursor: pointer;
transition: all .6s;
display:none;
}
.sidemenu{
background-color: #222;
color:#999;
float:right;
}
.sidemenu a{
padding:20px 20px;
text-decoration: none;
font-size: 20px;
color: #999;
display: inline-block;
}
.sidemenu a:hover{
color: white;
}
.sidemenu .closebtn{
position: absolute;
top: -15px;
right: 15px;
font-size: 36px;
margin-left: 0px;
display:none;
}
.fas{
color:#999;
margin-top:20px;
margin-right:32px;
}
.fas:hover{
color:white;
}
#media screen and (max-width: 600px){
#mainbox{
display:block;
float:right;
}
.header{
position: fixed;
top: 0;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display:block;
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color: #222;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
text-align: center;
}
.sidemenu a{
display:block;
text-decoration: none;
font-size: 20px;
color: #999;
}
}
Javascript
function openFunction(){
document.getElementById("menu").style.width="100%";
document.getElementById("mainbox").style.marginLeft="300px";
}
function closeFunction(){
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
It's because of your href="#", just add e.preventDefault() to close function.
html
×
js
function closeFunction(e){
e = e || window.event;
e.preventDefault()
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
Hope it will work for you

How to change active link color in navigation bar

Just like this http://www.w3schools.com/html/default.asp "HTML HOME" button color is green because that's the active link.
So how to do the same on my website?
My HTML code:
<!-- Website fixed header-->
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><div class="hoverwebsite">Website Name</div></button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
My CSS:
/* Top header orange color */
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a:active {
background-color: yellow;
}
</style>
Here is my JSFiddle. Let me know if you need more details.
Add class="active" in the anchor tag which you want to keep active
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
height:38px;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a{
height:38px;
display:block;
padding-top:16px;}
a.active {
background-color: #4CAF50;
color: #f2f2f2;
}
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website">Website Name</button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
</div>
EDIT 1:
Have this js code in the page where you want anchor tag to remain active. I have removed active class from anchor tag in html code. Have script reference to jquery library too.
JS:
$(document).ready(function() {
$('#website').addClass('active');
});
EDIT 2:
You possibly can't deal with margins in button, make button position absolute instead of fixed and align them using top, left, right, bottom css properties
.dropbtn.website {
top:0px;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
position:absolute;
left:10px;
width:150px;
}
.dropdown.website {
Top:43px;
position: fixed;
display: inline-block;
margin-right:10px;
}
Codepen
Use this css to see how it can be aligned.
EDIT 3:
Use this in your index file
<script>
$(document).ready(function() {
$('#website').addClass('active');
if($('#website2').hasClass('active'))
$('#website2').removeClass('active');
});
</script>
and this script in your yooo.html file
<script>
$(document).ready(function() {
if($('#website').hasClass('active'))
$('#website').removeClass('active');
$('#website2').addClass('active');
});
</script>
Also check the updated html i have changed the id of second anchor tag to website2

menu wont show or work

My menu on my page will not work, it is not at all visible. I set it up on a codepen which works fine but now when I have tried to implement it, it failed to work. Where is it?
Still new to coding but would appreciate help.
HTML:
<body>
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>home.</li>
</a>
<a href="#" class="menu-link">
<li>portfolio.</li>
</a>
<a href="#" class="menu-link">
<li>about.</li>
</a>
<a href="#" class="menu-link">
<li>contact.</li>
</a>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".menu-opener").click(function(){
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>
<div class="hero1">
<div id="hero1title"><h1>simplicity, craft and format <br>is what excites me as a designer</h1></div>
</div>
</body>
CSS:
html,body {
padding:0;
margin:0;
height:100%
}
body {
overflow:hidden
}
/*--Homepage*/
p.footertext {
position:absolute;
left:20px;
bottom:10px;
font-size:12px;
z-index:1
}
#media only screen and (max-width : 400px) {
p.footertext {
display:none
}
}
.hero1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: rgb(247,200,198);
}
div #hero1title h1{
color: white;
font-size: 90pt;
position: absolute;
width: 100%;
height: 100%;
top: 30%;
text-align: center;
}
/* Menu styling*/
%transition {
transition: 250ms all;
}
.menu-opener {
background: none;
cursor: pointer;
height: 4rem;
margin: 1rem;
position: absolute;
user-select: none;
width: 4rem;
}
.menu-opener-inner {
background: white;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
#extend %transition;
&::before, &::after {
background: white;
content: '';
display: block;
height: 8px;
width: 2.5rem;
#extend %transition;
}
&::before {
transform: translateY(-.75rem);
}
&::after {
transform: translateY(.25rem);
}
&.active {
background: transparent;
&::before {
transform: translateY(0rem) rotate(-45deg);
}
&::after {
transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
}
}
}
.menu {
background: rgb(152, 211, 189);
height: 100%;
position: absolute;
top: 0px;
user-select: none;
width: 0rem;
z-index: -1;
#extend %transition;
&.active {
width: 100%;
#extend %transition;
& .menu-link {
color: white;
}
}
}
.menu-inner {
display: block;
flex-direction: row;
height: 450px;
list-style-type: none;
margin-top: 15%;
padding: 0;
}
.menu-link {
color: transparent;
display: flex;
flex: 1 1 auto;
font-size: 70px;
font-family: 'Calibre-Semibold';
height: 25%;
text-align: center;
text-decoration: none;
li {
margin: auto;
}
}
I dropped it all into a fiddle, and I find the following things:
The z-index shouldn't be -1
It's there. But you need to highlight it to see it.
The text is styled horribly, so it doesn't look so great.
Your text color in menu-list is set to "transparent".
Your HREFs should be inside the "li" not outside.

jQuery animations work on one element and not another

I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK

Categories