Menu toogle to control display, height, and width - javascript

currently learning javascript and encounter a problem.
I made a button for mobile screen that if clicked it can expand the background and display the menu. I encounter problem where only the menu content can be clicked back and forth to display and undisplayed, and the background don't.
My goal is
When I clicked the menu button, both the background will expand and the menu will be displayed.
and the background can be toggle on and off by clicking the menu button.
Can anyone help me with this problem ?
document.getElementById("menu_button").addEventListener("click",function()
{
var open1=document.getElementById("opened_menu");
var open2=document.getElementById("menu_background");
open2.style.width = '100%';
open2.style.height = '100vh';
if(open1.style.display=="none")
{
open1.style.display="block";
}
else {
open1.style.display="none";
}
})
.mobile_background {
display: block;
width: 2rem;
height: 3rem;
background-color: red;
}
.mobile_menu {
display: none;
position: relative;
padding-top: 2rem;
padding-left: 2rem;
}
#menu_button {
position: fixed;
top: 0;
left: 0;
}
<div class="mobile_background" id="menu_background">
<div class="mobile_menu" id="opened_menu">
<p>menu 1</p>
<p>menu 2</p>
</div>
<button type="button" name="button" id="menu_button">
<div class="inner_menu">
<p>MENU</p>
</div>
</button>
</div>
Thanks in advance.

I bet this is what you want.
document.getElementById("menu_button").addEventListener("click", function() {
var open1 = document.getElementById("opened_menu");
var open2 = document.getElementById("menu_background");
if (open1.style.display == "none") {
open1.style.display = "block";
open2.style.width = '100%';
open2.style.height = '100vh';
} else {
open1.style.display = "none";
open2.style.width = '0%';
open2.style.height = '0vh';
}
})
.mobile_background {
display: block;
width: 0%;
height: 0vh;
background-color: red;
}
.mobile_menu {
display: none;
position: relative;
padding-top: 2rem;
padding-left: 2rem;
}
#menu_button {
position: fixed;
top: 0;
left: 0;
}
<div class="mobile_background" id="menu_background">
<div class="mobile_menu" id="opened_menu" style="display: none">
<p>menu 1</p>
<p>menu 2</p>
</div>
<button type="button" name="button" id="menu_button">
<div class="inner_menu">
<p>MENU</p>
</div>
</button>
</div>

Related

Hovering over text and display image in another div and the image stays

I am facing a lot of problem in my attempt to display image in another div when someone hover over a text. I have a menu where there is a list of 5 text lines. I want to display different images at the same position for each hover over these text lines. I managed to display images on hover with CSS but they disappear on unhovering. I want that the images stays after a user hovered over one text and then when the user hovers over another text, related image gets displayed at the same position. I tried some other layout as well but that was not responsive to device size.
Here is my current code:
<p><style>
.parent > p:hover:after {
width: 5px;
content: url(image1.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent1 > p:hover:after {
width: 5px;
content: url(image2.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent2 > p:hover:after {
width: 5px;
content: url(image3.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent3 > p:hover:after {
width: 5px;
content: url(image4.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
.parent4 > p:hover:after {
width: 5px;
content: url(image5.png);
position: absolute;
z-index: 2;
left: 800px;
bottom: 8px;
}
</style></p>
<div class="parent">
<p style="padding-left: 320px;"><strong>menuitem1</strong></p>
</div>
<div class="parent1">
<p style="padding-left: 320px;"><strong>menuitem2</strong></p>
</div>
<div class="parent2">
<p style="padding-left: 320px;"><strong>menuitem3</strong></p>
</div>
<div class="parent3">
<p style="padding-left: 320px;"><strong>menuitem4</strong></p>
</div>
<div class="parent4">
<p style="padding-left: 320px;"><strong>menuitem5</strong></p>
</div>
I am sorry if I made some mistake. My technical knowledge is not that much.
The only way to do this is through using JavaScript and the mouseOver function, Set the display to none and once the h1 is hovered over it runs the function mouseOver() which sets the span display to block(visible). You can also set the state after such as adding a class to the span which makes it close after a couple of seconds automatically.
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse
over
me</h1>
<span id="span" style="display:none;">Hey! Click me to close</span>
<script>
function mouseOver() {
document.getElementById("span").style.display = "block";
}
function mouseOut() {
}
window.onclick = function(event) {
if (event.target == span) {
span.style.display = "none";
}
}
</script>
function setURL(newUrl){
var url=newUrl;
return function(){
document.getElementById('picture').setAttribute('src',url);
}
}
document.getElementById('text1').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg'));
document.getElementById('text2').addEventListener('mouseover',setURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'));
.container{
width:200px;
display:flex;
margin-left:auto;
margin-right:auto;
}
.container > div{
width:50%;
}
img{
width:30px;
height:30px;
}
<div class="container">
<div>
<p id="text1">picture1</p>
<p id="text2">picture2</p>
</div><!--END TEXT-->
<div>
<img id="picture" src="">
</div><!--END PICTURE-->
</div><!--END CONTAINER-->

How to make smooth opening dropdown with basic javascript code?

How can I make the red backgrounded "Content" area open smoothly from top to bottom when click to "Clicker" with this piece of code? And extra question is, how can I add more Clickers in the same Html with the same javascript code? If I duplicate these, only one is working.
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.accordion {
position: relative;
width: 100%;
height: auto;
background:red;
}.grider{
display: block;
width: 100%;
background: #fff;
}
#myLinks {
display:none;
}
.content {
height:50px;}
<div class="accordion">
<a href="javascript:void(0);" onclick="myFunction()" class="grider clearfix toggle">
<span>Clicker</span>
</a>
<div class="content clearfix" id="myLinks">Content</div>
</div>
You don't need Javascript for all animations. Why don't you try with CSS?
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
e.target.classList.toggle('open')
})
})
html,
body {
margin: 0;
font-family: Arial;
}
nav {
display: flex;
}
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 0.25s;
}
.btn-dropdown.open>.dropdown-content-container {
max-height: 120px;
transition: all 0.4s;
}
<nav>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 1
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 1
</div>
</div>
</div>
</div>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 2
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 2.1<br /> DROPDOWN CONTENT 2.2<br /> DROPDOWN CONTENT 2.3<br /> DROPDOWN CONTENT 2.4<br />
</div>
</div>
</div>
</div>
</nav>

How do I manage multiple overlays on different buttons clicks?

function toggleOverlay_1() {
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox_1');
overlay.style.opacity = .8;
if (overlay.style.display == "block") {
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
function toggleOverlay_2() {
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox_2');
overlay.style.opacity = .8;
if (overlay.style.display == "block") {
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox_1 {
display: none;
position: fixed;
z-index: 3000;
height: 100%;
width: 100%;
background: #FFF;
color: #000;
}
div#specialBox_2 {
display: none;
position: fixed;
z-index: 3000;
height: 100%;
width: 100%;
background: #FFF;
color: #000;
}
div#wrapper {
position: absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
.closebtn {
position: absolute;
top: 0%;
right: 45px;
font-size: 40px;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<div id="overlay">
<div id="specialBox">
<iframe id="myVid_1" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"></iframe>
<div class="closebtn">
×
</div>
</div>
</div>
<div id="overlay">
<div id="specialBox">
<iframe id="myVid_2" src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe>
<div class="closebtn">
×
</div>
</div>
</div>
<div id="wrapper">
<input type="button" name="Google_Red" class="button_red" value="Google" a href="#" onclick="toggleOverlay_1()"></input>
<br>
<input type="button" name="W3Schools Red" class="button_red" value="Sealed Air" a href="#" onclick="toggleOverlay_2()"></input>
<br>
</div>
I am trying to open different videos(in an overlay) on different button clicks. I could this well if I use just one button and its opens the video correctly. But when I try to bind different videos to different buttons, it just binds one videos to all the buttons. Can someone tell me how to solve this issue?
Based on your html and jquery. Here is what you need to do. Instead of making 2 functions. Keep one function for toggle with the iframe id as parameter the toggleOverlay(playerid). As your video iframe id's parent div is the specialbox and the specialbox parent is the overlay itself. You can utilize the .parent() method of jquery to set it up.
function toggleOverlay(playerid){
$("#" + playerid).parent("#specialBox").parent().css("opacity",".8");
$("#" + playerid).parent("#specialBox").parent().toggle();
$("#" + playerid).parent("#specialBox").toggle();
}
Now in the buttons or anywhere you call the toggleOverlay function, add the unique playerid as parameter and your set based on which button handles which overlay.
Also you cant have 2 divs with same ids. So change the second overlay div id to "overlay2".
Here is working example:
http://codepen.io/Nasir_T/pen/pEmEJE
Because you are targeting the div with an ID, the DOM will take the first div with that id (your first video). So you have to target your second overlay with another ID.
Here is a rebuild option, I feel like this might be easier than making all that javascript for each video.
// This part isnt needed but I added it in case you wanted it
// Get the modals
var modal = document.getElementById('id01');
var modal2 = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}
.modal {
z-index: 3;
display: none;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4)
}
.modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
width: 600px
}
.container {
padding: 0.01em 16px
}
.closebtn {
text-decoration: none;
float: right;
font-size: 30px;
font-weight: bold;
}
.closebtn:hover,
.closebtn:focus {
color: red;
cursor: pointer
}
<button onclick="document.getElementById('id01').style.display='block'">Open Video 1</button>
<button onclick="document.getElementById('id02').style.display='block'">Open Video 2</button>
<!-- Video 1 -->
<div id="id01" class="modal">
<div class="modal-content">
<div class="container">
<span onclick="document.getElementById('id01').style.display='none'" class="closebtn">×</span>
<iframe src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</div>
<!-- Video 2 -->
<div id="id02" class="modal">
<div class="modal-content">
<div class="container">
<span onclick="document.getElementById('id02').style.display='none'" class="closebtn">×</span>
<iframe src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</div>

Toggle visibility of 2 divs with 2 buttons

I am having issues with my code
I am trying to show 1 div (show_1) by default and then hide it and show a second div (show_2) when button 2 is clicked. And then when button 1 is clicked hide show_2 and show show_1 again
https://jsfiddle.net/mgzurjgL/4/
It is not working though, nothing happens when I click either buttons.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if (a.style.display == 'block') {
a.style.display = 'block';
a2.style.display = 'none';
} else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
You had your settings wrong in JSFiddle, you need to run the script in the head not onload. Also you passed in the same parameters twice. Also why dont you try something simpler like this.
https://jsfiddle.net/mgzurjgL/5/
function switch_div(show) {
document.getElementById("show_"+show).style.display = "block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div(1);">
1
</div>
<div class="button" onclick="switch_div(2);">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
Two items: script placement and a typo. Working version at JSFiddle, tested in Google Chrome.
The script has to run before the divs. In the JSFiddle Javascript settings, I changed "Load Type" to "No wrap - in <head>." This way the switch_div function exists when the divs are loaded.
There was a typo:
if (a.style.display == 'block')
should be
if (a.style.display == 'none')
Otherwise you are setting block display on an element that's already block :) .
Edit: This code still doesn't do what you appear to want, because the function you have written toggles the div visibility regardless of which button is pressed. What you really want is in this fiddle:
<div class="button" onclick="switch_div('show_1', 'show_2', true);">
and
<div class="button" onclick="switch_div('show_1', 'show_2', false);">
together with
function switch_div(show_1, show_2, should_show_1) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if(should_show_1) {
a.style.display = 'block';
a2.style.display = 'none';
}
else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
That way you get only the div you want.
You need to switch the statements in if-else or change the condition in the if to "if (a.style.display !== 'block') "
When a.style.display is 'block' then you have to set it to 'none' to hide it.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_1);
var a2 = document.getElementById(show_2);
if (a.style.display !== 'block') {
a.style.display = 'block';
a2.style.display = 'none';
} else {
a.style.display = 'none';
a2.style.display = 'block';
}
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_1', 'show_2');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
I changed the js function and the "call" for buttons.
function switch_div(show_1, show_2) {
var a = document.getElementById(show_2);
var a2 = document.getElementById(show_1);
a.style.display = 'none';
a2.style.display = 'block';
}
.button {
width: 100px;
height: 30px;
display: inline-block;
background-color: black;
margin: 0 10px 10px 0;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.button:hover {
background-color: red;
}
.content {
width: 400px;
height: 100px;
display: block;
background-color: gray;
}
.hide {
display: none;
}
<div class="button" onclick="switch_div('show_1', 'show_2');">
1
</div>
<div class="button" onclick="switch_div('show_2', 'show_1');">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
This also works with:
<div class="button" onclick="switch_div(1,2);">
1
</div>
<div class="button" onclick="switch_div(2,1);">
2
</div>
<div class="content" id="show_1">
Show by default (and when button 1 is clicked)
</div>
<div class="content hide" id="show_2">
Show this div when button 2 is clicked
</div>
<script>
function switch_div(n1,n2) {
document.getElementById("show_"+n1).style.display = 'block';
document.getElementById("show_"+n2).style.display = 'none';
}
</script>

How can enable only one container to expand on click?

I'm trying to use expand/collapse container, and everything works except one little detail. I want to restrict end users from opening multiple container at once. Ideally, I want only one container to be expanded at once.
You can hide the other large box elements like
$(window).load(function() {
if ($(".navBoxes").length > 0) {
var html = document.getElementsByTagName("html").item(0);
var hasCSS3 = (html.className.indexOf("no-csstransforms") == -1)
$(".no-csstransforms .larger").toggleClass("undisplayed");
$(".larger").children().toggleClass("undisplayed");
// Expand nav box
$(".nav.plus").click(function() {
var smallerBox = $(this).closest(".navBox");
var largerBox = smallerBox.next();
var $ol = $(this).closest('.navBoxes').find('.navBox.larger').not(largerBox);
if (hasCSS3) {
//smallerBox.siblings(".smaller").toggleClass("contracted");
//smallerBox.siblings(".smaller").toggleClass("hidden");
//smallerBox.children().toggleClass("hidden");
//smallerBox.toggleClass("expanded").delay(600).toggleClass("hidden");
largerBox.toggleClass("atop").delay(600).toggleClass("hidden");
$ol.removeClass('atop').addClass('hidden');
} else {
//smallerBox.toggleClass("undisplayed");
//smallerBox.siblings(".smaller").toggleClass("undisplayed");
largerBox.toggleClass("undisplayed");
$ol.addClass('undisplayed')
}
largerBox.children().toggleClass("undisplayed");
$ol.children().addClass("undisplayed");
return false;
});
// Contract nav box
$(".nav.minus").click(function() {
var largerBox = $(this).parents(".navBox");
var smallerBox = largerBox.prev();
largerBox.children().toggleClass("undisplayed");
if (hasCSS3) {
largerBox.toggleClass("hidden");
largerBox.toggleClass("atop")
//smallerBox.toggleClass("hidden");
//smallerBox.toggleClass("expanded");
//smallerBox.children().toggleClass("hidden");
//smallerBox.siblings(".smaller").toggleClass("hidden");
//smallerBox.siblings(".smaller").toggleClass("contracted");
} else {
largerBox.toggleClass("undisplayed");
//smallerBox.toggleClass("undisplayed");
//smallerBox.siblings(".smaller").toggleClass("undisplayed");
}
return false;
});
}
setOrgChartDimensions();
})(jQuery);
.navBoxes .undisplayed {
display: none;
}
.navBoxes .navBox {
position: absolute;
float: left;
color: #fff;
}
.navBoxes .navBox.smaller {
width: 160px;
height: 160px;
z-index: 2;
}
.navBoxes .navBox.smaller.atop {
z-index: 4;
}
.navBoxes .navBox.larger {
width: inherit;
z-index: 1;
}
.navBoxes .navBox.hidden {
opacity: 0.0;
}
.navBoxes .navBox.larger.atop {
z-index: 3;
}
.navBoxes .navBox.larger .icon {
float: left;
}
.navBoxes .navBox.smaller a {
color: #fff;
}
.navBoxes .navBox.larger .title {
position: relative;
top: 10px;
}
.navBoxes .navBox.larger .body {
margin-top: 20px;
}
.navBoxes .navBox.larger .body a {
color: #fff;
text-decoration: underline;
}
.navBoxes .navBox .nav {
position: absolute;
width: 35px;
height: 30px;
padding-top: 5px;
}
.navBoxes .navBox .nav a {
color: #fff;
}
.navBoxes .navBox .nav.plus {
top: 110px;
left: 110px;
}
.navBoxes .navBox .nav.minus {
position: relative;
float: right;
}
.navBoxes .box1 {
background-color: #185394;
transform-origin: top left;
}
.navBoxes .box1.smaller:hover {
background-color: #214872;
}
.navBoxes .box2 {
background-color: #c94747;
transform-origin: top right;
}
.navBoxes .box2.smaller:hover {
background-color: #b24444;
}
.navBoxes .box2.smaller {
margin-left: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navBoxes">
<div class="navBox box1 smaller">
<div class="title"><a href="#">Heading 1</div>
<div class="nav plus">
<div class="sign"><a aria-expanded="false" href="/">more</a>
</div>
</div>
</div>
<div class="navBox box1 larger hidden">
<div class="body">
<p>- Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text - Some Text -</p>
</div>
<div class="nav minus">
<div class="sign"><a aria-expanded="true" href="/">less</a>
</div>
</div>
</div>
<div class="navBox box2 smaller">
<div class="title">Heading 2
</div>
<div class="nav plus">
<div class="sign"><a aria-expanded="false" href="/">more</a>
</div>
</div>
</div>
<div class="navBox box2 larger hidden">
<div class="body">
<p>- Some Text - Some Text - Some Text - Some Text -</p>
</div>
<div class="nav minus">
<div class="sign"><a aria-expanded="true" href="/">less</a>
</div>
</div>
</div>
</div>
You will need some object to hold application state. you could create a variable such as
var expanded = false;
then wrap your code above in a statement like so that when you click to expand an item
if (!expanded) {
// proceed as normally
expanded = true;
} else {
// stop action from happening
return;
}
EDIT:
you'll also want to changed expanded back to false when you click on the minus
EDIT EDIT:
I made some modifications to your link
http://jsfiddle.net/eo1Ljw97/

Categories