Dropdown mobile menu sliding in from top by pressing the Icon - javascript

I want my mobile dropdown menu to slide in from top when the user clicks the "header-downbar-menu" icon and slide out to the top when the user clicks it again. For now the button can only show the menu but I don't know how to properly write JS for this part...
var DropdownMenuDown = false;
function OpenDropdownMenu() {
if (DropdownMenuDown == false) {
document.getElementById("header-dropdown-menu").style.top = "0px";
}
}
.header-dropdown {
width: 100%;
position: relative;
}
.header-dropdown-menu {
width: 100%;
height: 80vh;
background-color: white;
position: absolute;
top: -80vh;
}
<div class="header-downbar-menu" onclick="OpenDropdownMenu()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="header-dropdown">
<div id="header-dropdown-menu" class="header-dropdown-menu">
</div>
</div>
I can't make the var "DropdownMenuDown" work

I'd recommend you using toggle for this.
Look here:
function showMenu() {
var topmenu = document.querySelector('.topmenu');
topmenu.classList.toggle('show-me');
}
body {
margin: 0;
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #AEAEAE;
}
.topmenu {
position: absolute;
height: 60px;
top: -60px;
width: 100%;
background-color: red;
z-index: 99;
}
.show-me {
top: 0 !important;
}
button {
position: absolute;
top: 60px;
left: 0;
}
<div id="bg">
<div class="topmenu">
</div>
<button onclick="showMenu()">Menu pls!</button>
</div>

i just have read your question. i think you are not aware of the selector of document. in your case, the code should be like this.
var DropdownMenuDown = false;
function OpenDropdownMenu() {
if (DropdownMenuDown == false) {
document.getElementByClassName("header-dropdown-menu").style.top = "0px";
}
}
"header-dropdown-menu "is not id, but classname!

Related

How can I dim the content with a semitransparent overlay when hovering a dropdown menu?

I'm new to programming and currently working on my portfolio. I've created a dropdown list that appears when a user hovers over it. Once it appears I want to make the rest of the website darker so the dropdown list can stand out from the rest.
I'm trying to use the body::after pseudo class for that and it works but not when I hover over the dropdown so I must be doing something wrong. Could anyone please help me?
The dropdown list has a class of .dropdown
body::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
}
.dropdown:hover body::after {
opacity: 0.5;
}
Link to my project in case that helps:
https://annaxt.github.io/product_landing_page/plant_store.html
Thank you!
You could add the overlay as it's own element and then control the opacity using JavaScript. Everything you would want to show above it would need to have a z-index higher than what you're setting on the overlay and everything that would be affected by the overlay should have a lower z-index (default is 0).
let overlay = document.getElementById("overlay");
function showOverlay() {
overlay.style.zindex = 9;
overlay.style.opacity = 0.3;
}
function hideOverlay() {
overlay.style.zindex = -1;
overlay.style.opacity = 0;
}
#overlay {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
transition: opacity .8s;
}
.dropdown {
font-size: 50px;
background: #369;
color: white;
font-family: sans-serif;
}
<body>
<div class="dropdown" onmouseout="hideOverlay()" onmouseover="showOverlay()">Hover me</div>
<div id="overlay" />
</body>
I am not sure whether we can do this with css or not. but what you are trying to achieve can be easily done by js.
Below is code to help you.
$(document).ready(function() {
$(".dropdown").mouseenter(function() {
$("body").addClass("open");
});
$(".dropdown").mouseleave(function() {
$("body").removeClass("open");
});
});
.main {
display: flex;
}
.open {
height: 100%;
width: 100%;
background: #232323;
transition:.5s;
}
.dropdown {
background-color: #f5f5f5;
height: 200px;
width: 200px;
margin-right: 15px;
transition:.5s;
}
.main:hover .dropdown{
filter:blur(1px);
}
.main:hover .dropdown:hover {
background-color: red;
filter:blur(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="dropdown">
dropdown1
</div>
<div class="dropdown">
dropdown2
</div>
<div class="dropdown">
dropdown3
</div>
<div class="dropdown">
dropdown4
</div>
</div>
</body>

Why is my js code not capturing the margin-right value from id="article_toggle"?

function articleToggle() {
if (document.getElementById('article_toggle').style.marginRight == 0) {
document.getElementById('article_toggle').style.marginRight = "400";
} else {
document.getElementById('article_toggle').style.marginRight = "0";
}
alert(toggle);
}
article {
position: fixed;
top: 170px;
right: 0;
width: 400px;
bottom: 40px;
background: #ffffff;
}
#article_toggle {
margin-right: 0;
}
<article id="article_toggle">
<div onclick="articleToggle()">
<a href="#">
<p class="articlebar_title articlebar_toggle">Article Index</p>
</a>
</div>
</article>
I have a right sidebar menu that has a tab on the left side. When the menu is closed, the tab should be aligned to the right edge of the screen exposing the tab, but the menu should be hidden. When I click on the tab, the margin-right should change from -400px to 0, the menu with the tab attached should slide out to the left the width of the menu. And when I click again on the tab, the margin-right should change from 0 to -400px closing the menu.
So, where am I going wrong in my code? I do not want to use jquery.
Thanks.
function articleToggle() {
if (parseFloat(document.getElementById('article_toggle').style.marginRight) == 0)
{
document.getElementById('article_toggle').style.marginRight = "50px";
}
else
{
document.getElementById('article_toggle').style.marginRight = "0";
}
}
article {
position: fixed;
top: 50px;
right: 0;
width: 400px;
bottom: 40px;
background: #ffffff;
}
#article_toggle {
margin-right: 0;
}
<article id="article_toggle">
<div onclick="articleToggle()"><p class="articlebar_title articlebar_toggle">Article Index</p>
</div>
</article>

I am not able to add and remove the classes

My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.
Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>
Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.

Sliding images inward from different direction

I would like to have the first image slide from left to right. The second image slides from left to right, and the third image will be coming from the bottom to top. I managed to slide the first image from left to right with the answers I found here on stackoverflow. But when I modified the script & css for the other images, they're not sliding. I am not so knowledgeable in javascript.
$(document).ready(function() {
function animateImgs() {
$('ul.slide1 li:not(.visible)').first().animate({
'margin-right': '500px'
}, 2000, function() {
$(this).addClass('visible');
animateImgs();
});
}
animateImgs();
});
.content {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #000;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
.img1 {
max-width: 300px;
max-height: 300px;
z-index: 2;
}
.img2 {
max-width: 260px;
max-height: 260px;
z-index: 3;
left: 200px;
top: 100px;
}
.img3 {
max-width: 200px;
max-height: 200px;
z-index: 4;
left: 65px;
top: 235px;
}
/* -------------------------------------------------------------------- */
ul {
padding: 0;
margin: 0;
overflow: hidden;
}
ul.slide1 li {
float: right;
margin: 0 10px 0 0;
margin-right: 9999px;
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
<ul class="slide1">
<li>
<img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" class="img1 slideLeft" />
</li>
</ul>
<img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" class="img2 slideRight" />
<ul class="slide3">
<li>
<img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" class="img3 slideUp" />
</li>
</ul>
</div>
Steps:
Define a container element with class slideContent
Within container define slide elements with class slide
Specify sliding direction to slide elements with either slideUp, slideDown, slideLeft or slideRight
Specify data-margin to place element in container by sliding
Do not define following in CSS (instead use data-margin attribute in slide element):
margin-bottom for slideUp element
margin-top for slideDown element
margin-right for slideLeft element
margin-left for slideRight element
$(document).ready(function() {
function animateImgs() {
// Animation duration
var duration = 200;
// Get element reference needs to be shown
var el = $('.slideContent .slide:not(.visible)').first();
if (el.length === 0) {
console.log('No more elements found');
return;
}
// Read the margin value
var marginValue = el.attr('data-margin');
// Direction
var marginDirection,
animationProp = {};
// Animate now
if (el.hasClass('slideLeft')) {
marginDirection = 'margin-right';
} else if (el.hasClass('slideRight')) {
marginDirection = 'margin-left';
} else if (el.hasClass('slideUp')) {
marginDirection = 'margin-bottom'
} else if (el.hasClass('slideDown')) {
marginDirection = 'margin-top'
}
if (typeof marginDirection === 'undefined') {
// No valid animation direction defined
console.log('Invalid animation direction');
return;
}
animationProp[marginDirection] = marginValue;
el.animate(animationProp, duration, function() {
$(this).addClass('visible');
animateImgs();
});
}
animateImgs();
});
.slideContent {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #000;
overflow: hidden;
}
.slideContent .slide {
position: absolute;
}
.slideContent .slideLeft {
right: -100%
}
.slideContent .slideRight {
left: -100%
}
.slideContent .slideUp {
bottom: -100%
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.img1 {
max-width: 300px;
max-height: 300px;
}
.img2 {
max-width: 260px;
max-height: 260px;
top: 100px;
}
.img3 {
max-width: 200px;
max-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideContent">
<img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" data-margin="500px" class="img1 slide slideLeft" />
<img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" data-margin="600px" class="img2 slide slideRight" />
<img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" data-margin="600px" class="img3 slide slideUp" />
</div>

multiple pop up div's in the same page

In one of my projects, I have requirement of multiple pop up div's on the same page. That means when user clicks on a link, some content should open in a pop up. There will be many such links with their own pop ups. With little knowledge of javascript, I have tried to write a javascript for it but it works only for one pop up. When I click on second, third... links, only first pop up opens rather than opening second, third... pop ups. Here is my code. Please tell the modifications to it.
<!DOCTYPE html>
<html >
<head>
<script>
window.document.onkeydown = function (e)
{
if (!e)
{
e = event;
}
if (e.keyCode == 27)
{
lightbox_close();
}
}
function lightbox_open()
{
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close()
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<style>
#fade
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light
{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
</head>
<body>
Open 1
<div id="light">div 1</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 2
<div id="light">div 2</div>
<div id="fade" onClick="lightbox_close();"></div>
Open 3
<div id="light">div 3</div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>
Here's a way to achieve what you want. I'm sure it can be improved, but it's up to you then.
First, IDs should be unique across the page. If you want to group elements, give them a shared class instead.
With the changes, your HTML would look like this:
Open 1
<div class="light">div 1</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 2
<div class="light">div 2</div>
<div class="fade" onClick="lightbox_close()"></div>
Open 3
<div class="light">div 3</div>
<div class="fade" onClick="lightbox_close()"></div>
Your CSS:
html, body {
width: 100%;
height: 100%;
}
.fade {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.light {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
And your Javascript:
window.document.onkeydown = function (e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
// Note that the function is receiving the clicked element reference.
function lightbox_open(el) {
window.scrollTo(0,0);
// All the anchors that have a class lightbox.
var anchors = document.querySelectorAll('a.lightbox');
// All the elements with class light.
var light = document.querySelectorAll('.light');
// All the elements with class fade.
var fade = document.querySelectorAll('.fade');
// Iterate over the anchors elements.
for (var i = 0; i < anchors.length; i++) {
// If the anchor matches the clicked one.
if (anchors[i] == el) {
// Look for the light and fade with the same index
// and display them.
light[i].style.display = 'block';
fade[i].style.display = 'block';
}
}
}
function lightbox_close() {
// All the elements with class light or fade.
var els = document.querySelectorAll('.light, .fade');
// Loop through the list.
for (var i = 0; i < els.length; i++) {
// Hide them.
els[i].style.display = 'none';
}
}
Demo

Categories