I have constructed an accordion which just works fine but I want to close this if someone clicks outside the element in JavaScript
I tried to add a click listener that captures click outside the div and turn its display to off but it doesn't work as it considers the link itself an outside of the div link and thus stops opening the div
function toggleaccordition() {
var link = document.getElementById('acrd_link');
var accrdion = document.getElementById("acc");
link.classList.toggle('active');
accrdion.classList.toggle('active');
}
nav ul {
display: flex;
}
nav ul li {
display: block;
margin-right: 20px;
margin-left: 2px;
list-style: none;
text-decoration: none;
}
nav ul li a {
text-decoration: none;
}
#acrd_link.active {
text-decoration: underline;
color: deepskyblue;
}
.accrd {
display: block;
height: 0px;
width: 450px;
color: blue;
opacity: 0.0;
transition: opacity 0.5s;
transition: height 0.5s;
padding-top: 30px;
position: relative;
z-index: 4;
background: #ff0036;
}
.internal {
background: gray;
}
.internal span {
color: yellow;
}
.accrd>* {
display: none;
}
.accrd.active {
display: block height: 500px;
opacity: 1.0;
transition: height 1s;
transition: opacity 1s;
}
.accrd.active>* {
display: block;
}
<nav>
<ul>
<li>xxxxxxx</li>
<li>Click two open/close accordion</li>
<li>yyyyyyyy</li>
</ul>
</nav>
<div class="accrd" id="acc">
<div class="internal">
This is my accordion that works fine.<span>I just want this to be closed when i click outside this accrdion<span></div>
</div>
Simply add an event listener on the document that closes the accordion after verifying that it wasn't the accordion you clicked on.
Also, don't use hyperlinks when clicking them won't result in navigation - - that is semantically incorrect and will mess with screen readers. Just apply the click event to any other element that you like.
Lastly, don't do your event handling inline with HTML (onclick). Here's why. Do all the event binding in JavaScript.
// Set up DOM element references outside of callbacks so you only
// go get the references one time, not every time the callback runs.
var link = document.getElementById('acrd_link');
var accordion = document.getElementById("acc");
var internal = document.querySelector(".internal");
link.addEventListener("click", toggleaccordition);
function toggleaccordition() {
link.classList.toggle('active');
accordion.classList.toggle('active');
}
// Set up handler for clicks that occur outside of the accordion
document.addEventListener("click", closeaccordition);
function closeaccordition(event) {
// Since accordion is part of the document, we need to make
// sure this click didn't originate with the accordion.
if(event.target !== link && event.target !== accordion && event.target !== internal){
link.classList.remove('active');
accordion.classList.remove('active');
}
}
nav ul {
display: flex;
}
nav ul li {
display: block;
margin-right: 20px;
margin-left: 2px;
list-style: none;
text-decoration: none;
cursor:pointer;
}
#acrd_link.active {
text-decoration: underline;
color: deepskyblue;
}
.accrd {
display: block;
height: 0px;
width: 450px;
color: blue;
opacity: 0.0;
transition: opacity 0.5s;
transition: height 0.5s;
padding-top: 30px;
position: relative;
z-index: 4;
background: #ff0036;
}
.internal {
background: gray;
}
.internal span {
color: yellow;
}
.accrd>* {
display: none;
}
.accrd.active {
display: block height: 500px;
opacity: 1.0;
transition: height 1s;
transition: opacity 1s;
}
.accrd.active>* {
display: block;
}
<nav>
<ul>
<li>xxxxxxx</li>
<li id="acrd_link">Click two open/close accordion</li>
<li>yyyyyyyy</li>
</ul>
</nav>
<div class="accrd" id="acc">
<div class="internal">
This is my accordion that works fine.<span>I just want this to be closed when i click outside this accrdion</span>
</div>
</div>
Related
I have a small carousel that plays automatically on page load, using HTML, CSS and JavaScript and definitely no jQuery.
To add a pause/play option there is a span with role="checkbox" followed by a label.
The label itself is hidden and has no content. The span has two pseudo elements. On first showing, the pseudo element shows the ⏸ character, controlled by a CSS ::after class. When clicked, the span has the class "is-clicked" added, at which point the ▶ character is displayed, controlled by another ::after class
It is focusable and can be activated with the keyboard by hitting the Enter key, but when I check with Lighthouse, I keep getting the "Focusable elements should have interactive semantics".
Why is this?
Here is the code:
/* detect keyboard users */
function handleFirstTab(e) {
if (e.key === 'Tab') { // the 'I am a keyboard user' key
document.body.classList.add('user-is-tabbing');
window.removeEventListener('keydown', handleFirstTab);
}
}
let checkboxEl = document.getElementById('checkbox');
let labelEl = document.getElementById('checkboxLabel');
labelEl.onclick = function handleLabelClick() {
checkboxEl.focus();
toggleCheckbox();
}
function toggleCheckbox() {
let isChecked = checkboxEl.classList.contains('is-checked');
checkboxEl.classList.toggle('is-checked', !isChecked);
checkboxEl.setAttribute('aria-checked', !isChecked);
}
checkboxEl.onclick = function handleClick() {
toggleCheckbox();
}
checkboxEl.onkeypress = function handleKeyPress(event) {
let isEnterOrSpace = event.keyCode === 32 || event.keyCode === 13;
if(isEnterOrSpace) {
toggleCheckbox();
}
}
.link {
height: auto;
border: 1px solid #000;
margin-bottom: 1rem;
width: 80%;
display: block;
}
#carousel-checkbox {
margin-bottom: 1rem;
height: 50px;
width: 100px;
display: inline-block;
}
#carousel-checkbox input {
display: none;
}
#carousel-checkbox label {
display: inline-block;
vertical-align: middle;
}
#carousel-checkbox #checkbox {
position: relative;
top: 0;
left: 30px;
padding: 0.5rem 1rem;
background: rgba(255,255,255, 0.5);
}
#carousel-checkbox #checkbox:hover {
cursor: pointer;
}
#carousel-checkbox #checkbox:focus {
border: 1px dotted var(--medium-grey);
}
#carousel-checkbox #checkbox::after {
content: "⏸";
font-size: 1.5rem;
color: var(--theme-dark);
}
#carousel-checkbox #checkbox.is-checked::after {
content: "▶";
}
<div class="link">A bit of text with a dummy link to demonstrate the keyboard tabbing navigation. </div>
<div id="carousel-checkbox"><span id="checkbox" tabindex="0" role="checkbox" aria-checked="false" aria-labelledby="checkboxLabel"></span><label id="checkboxLabel"></label></div>
<div class="link">Another link to another dummy link</div>
Why is this? Is it because the pseudo elements don't have a name attribute or something like that?
I have tried a different way, by dropping the pseudo elements and trying to change the span innerHTML depending on whether the class 'is-clicked' exists or not, but although I can get the pause character to display initially, it won't change the innerHTML to the play character when the span is clicked again.
Short Answer
This is a warning rather than an error, it is telling you to check that the item actually is interactive.
Now you have got the interactivity on the element so you can ignore that issue.
Long answer
Why not just use a <input type="checkbox"> and save yourself an awful lot of extra work?
You can hide a checkbox with a visually hidden class.
This then allows you to do the same trick with a pseudo element as the visual representation of the state.
I have made several changes to your example that mean you don't have to worry about capturing keypresses etc. and can just use a click handler so your JS is far simpler.
Notice the trick with the label where I add some visually hidden text within it so the label is still visible (so we can still use psuedo elements!).
I then use #checkbox1 ~ label to access the label with CSS so we can change the state.
The final thing to notice is how I changed the content property slightly. This is because some screen readers will try and read out pseudo elements so I added alt text that was blank. Support isn't great at just over 70%, but it is worth adding for browsers that do support it.
Example
The below hopefully illustrates a way of achieving what you want with a checkbox.
There may be a few errors as I just adapted your code so please do not just copy and paste!
note: a checkbox should not work with Enter, only with Space. If you want it to work with both it should instead be a toggle switch etc. so that would be a completely different pattern.
let checkboxEl = document.getElementById('checkbox1');
let labelEl = document.querySelector('#checkboxLabel');
function toggleCheckbox() {
let isChecked = checkboxEl.classList.contains('is-checked');
checkboxEl.classList.toggle('is-checked', !isChecked);
checkboxEl.setAttribute('aria-checked', !isChecked);
}
checkboxEl.onclick = function handleClick() {
toggleCheckbox();
}
.link {
height: auto;
border: 1px solid #000;
margin-bottom: 1rem;
width: 80%;
display: block;
}
#carousel-checkbox {
margin-bottom: 1rem;
height: 50px;
width: 100px;
display: inline-block;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
#carousel-checkbox label {
display: inline-block;
vertical-align: middle;
}
#carousel-checkbox #checkbox1 {
position: relative;
top: 0;
left: 30px;
padding: 0.5rem 1rem;
background: rgba(255,255,255, 0.5);
}
#carousel-checkbox #checkbox1 ~label:hover {
cursor: pointer;
}
#carousel-checkbox #checkbox1:focus ~ label {
border: 1px dotted #333;
}
#carousel-checkbox #checkbox1 ~label::after {
content: "⏸" / "";
font-size: 1.5rem;
color: #000;
}
#carousel-checkbox #checkbox1.is-checked ~label::after {
content: "▶" / "";
}
<div class="link">A bit of text with a dummy link to demonstrate the keyboard tabbing navigation. </div>
<div id="carousel-checkbox">
<input type="checkbox" id="checkbox1" class="visually-hidden">
<label for="checkbox1" id="checkboxLabel">
<span class="visually-hidden">Pause animations</span>
</label>
</div>
<div class="link">Another link to another dummy link</div>
In the end, I gave up on using a checkbox, due to the difficulties with iPad/iOS not responding to checkbox events. Whilst it worked in codepen on iOS it wouldn't work on the actual site. So I switched to a button.
Here is the code, which is fully accessible with no 'interactive semantics' warnings, shown with some dummy slides. The animation is based on having only three slides. If you wanted more or less, then the timings would have to be adjusted accordingly. All I need now is to style the pause button.
let element = document.getElementById("pause");
function toggleButton() {
element.classList.toggle("paused");
if (element.innerHTML === "⏸") {
element.innerHTML = "▶";
}
else {
element.innerHTML = "⏸";
}
}
element.onclick = function handleClick() {
toggleButton();
}
#carousel {
height: auto;
max-width: 1040px;
position: relative;
margin: 4rem auto 0;
}
#carousel > * {
animation: 12s autoplay6 infinite linear;
position: absolute;
top: 0;
left: 0;
opacity: 0.0;
}
#carousel .one {
position: relative;
}
.homeSlides {
height: 150px;
width: 400px;
background-color: #ff0000;
}
.homeSlides.two {
background-color: #0fff00;
}
.homeSlides.three {
background-color: #e7e7e7;
}
#keyframes autoplay6 {
0% {opacity: 0.0}
4% {opacity: 1.0}
33.33% {opacity: 1.0}
37.33% {opacity: 0.0}
100% {opacity: 0.0}
}
#carousel > *:nth-child(1) {
animation-delay: 0s;
}
#carousel > *:nth-child(2) {
animation-delay: 4s;
}
#carousel > *:nth-child(3) {
animation-delay: 8s;
}
#carousel-button {
position: relative;
height: 100%;
width: auto;
}
#carousel-button button {
position: absolute;
top: -3.5rem;
right: 5rem;
padding: 0 0.5rem 0.25rem;;
background: #fff;
z-index: 98;
font-size: 2rem;
cursor: pointer;
}
body.user-is-tabbing #carousel-button button:focus {
outline: 1px dotted #333;
}
body:not(.user-is-tabbing) #carousel-button button:focus {
outline: none;
}
#carousel-button button:hover {
cursor: pointer;
}
#carousel-button ~ #carousel * {
animation-play-state: running;
}
#carousel-button button.paused ~ #carousel * {
animation-play-state: paused;
}
<div id="carousel-button"><button id="pause" class="">⏸</button>
<div id="carousel">
<div class="homeSlides one">This is div one</div>
<div class="homeSlides two">This is div two</div>
<div class="homeSlides three">This is div three</div>
</div>
</div>
The transition of my header and navigation finish in the desired places and have the correct look I am going for, however, the transition is jumpy, almost as if something is trying to restrict the translation from happening. Any advice on how I can go about fixing this erratic transition behavior?
With a similar problem, the padding of the initial element style was the problem (before JavaScript changed the style class.)
I expect the transition to be smooth and seamless, not fighting to transition into it's proper end place.
Thanks again for any help.
PS: I'm not sure how to reference the JS file at the bottom of the HTML code to allow the JS code snippet to change the html elements properly. The CSS which is supposed to make the 'headerLogoBackground' sticky at the very top of the window and change is not being applied which is needed to answer the question. However, I don't have this problem on my local machine - sorry guys, working on fixing this in the stackoverflow code snippet editor:/
// JavaScript
window.onscroll = function() {
headerSlide_and_change();
}; // end window.onscroll
function headerSlide_and_change() {
if (document.body.scollTop > 30 || document.documentElement.scrollTop > 30) {
// vars
var headerLogoBackground = document.getElementById("headerLogoBackground");
var headerLogo = document.getElementById("headerLogo");
headerLogoBackground.classList.remove("headerLogoBackground"); // header background
headerLogoBackground.classList.add("headerLogoBackGroundTransform");
headerLogo.classList.add("headerMove"); //header title slide
} else {
/*---header background---*/
var headerLogoBackground = document.getElementById("headerLogoBackground");
headerLogoBackground.classList.remove("headerLogoBackGroundTransform");
headerLogoBackground.classList.add("headerLogoBackground");
/*---header---*/
var headerLogo = document.getElementById("headerLogo");
headerLogo.classList.remove("headerMove");
headerLogo.classList.add("headerLogo");
} // end else
} // end navChangeOnScrollUp
html,
body {
margin: 0;
height: 100vw;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #796651;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
// Initial CSS
// header
.headerLogoBackground {
background-color: none;
transition: background-color .2s linear;
}
.headerLogo {
text-align: center;
transition: all .2s;
}
.headerLogo a {
font-family: 'Squada One', cursive;
font-size: 40px;
text-decoration: none;
color: #d8cfc3;
}
.headerLogo a:focus {
outline: none;
color: darkslategrey;
}
// navigation bar
.navRaise {
position: -webkit-sticky;
position: static;
z-index: 2;
}
nav {
text-align: center;
font-weight: bold;
width: 100%;
margin-bottom: 8%;
}
.navUlStyle {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.26);
height: 45px;
line-height: 45px;
}
nav li {
float: left;
width: 8%;
padding-left: 12.5%;
padding-right: 12.5%;
}
nav a {
font-family: 'Squada One', cursive;
font-size: 20px;
text-decoration: none;
color: #d8cfc3;
display: block;
text-align: center;
position: relative;
z-index: 3;
}
// JavaScript CSS Classes used to change initial CSS
.headerLogoBackGroundTransform {
/* to replace 'headerLogoBackground' */
position: sticky;
top: 0;
background-color: white !important;
transition: all .2s linear;
z-index: 10;
}
.headerMove { /* to replace 'headerLogo' */
margin-block-start: 0;
transform: translate(-10%, 0px) !important;
transition: transform .2s;
display: inline-block;
width: 30%;
float: left;
}
<html>
<head>
<title>...</title>
<link href="https://fonts.googleapis.com/css?family=Pinyon+Script|Squada+One&display=swap" rel="stylesheet">
</head>
<body id="body">
<div id="Welcome"><!--Wrapper div-->
<!-------------------------Top Section------------------------->
<header id="headerLogoBackground" class="headerLogoBackground">
<!--header-->
<h1 id="headerLogo" class="headerLogo"><a id="headerLogoLink" href="index.html">Lorem Dolo</a></h1>
<!--navigation-->
<nav id="navRaise" class="navRaise">
<ul id="navUl" class="navUlStyle">
<li><a id="topNav" title="Top" href="#Welcome"> Top </a></li>
<li><a id="servicesNav" title="Services" href="#Services"> Services </a></li>
<li><a id="contactNav" title="Contact" href="#Contact"> Contact </a></li>
</ul>
</nav>
</header>
</div><!-- end wrapper div -->
<!------------------------JavaScript Documents--------------------------->
<!-- I don't think path to external JavaScript file is relevant for stackoverflow code snippet -->
</body>
</html>
I want to create an effect where if I hover over a certain element a paragraph element will be gradually displayed and vice versa (If the cursor is no longer hovering on the element the paragraph should gradually fade). I've already created the effect using pure CSS, but it was a bit cumbersome and it will only work if the paragraph is a direct child of the element I'm hovering on (which made it even more cumbersome). But here's how I created using CSS:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
overflow: hidden;
}
.FlexContainerRow {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1;
}
.FlixItem_Images {
width: 50rem;
}
#CheiftianTwo {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#welcome {
position: absolute;
z-index: 2;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
text-align: center;
transition: background-color color linear;
transition-duration: 1s;
color: transparent;
background-color: transparent;
margin-left: 13.75em;
margin-top: 6.4em;
padding: 0.2em;
border-radius: 0.4em;
}
#divForLayers {
position: absolute;
z-index: 1;
}
#divForhover {
height: 33.5em;
width: 100rem;
position: absolute;
z-index: 3;
}
#divForhover:hover #welcome {
transition: background-color color linear;
color: white;
background-color: black;
transition-duration: 1s;
}
<header>
<div id="divForhover">
<div id="divForLayers">
<div id="HeaderImagesContainer" class="FlexContainerRow">
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
</div>
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
</div>
</div>
</div>
<p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
</div>
</header>
<nav></nav>
<footer></footer>
But I've just learned that you can do the same thing with JavaScript and it will be much much simpler:
addEventListner('mouseover', function(evt) {
document.body.querySelector( /*ID_of_the_element*/ ).style.property = 'value';
})
The problem is that I only know how to to display the paragraph when the user hovers on the element, and that's it. If the cursor is no longer on the element, the paragraph will still be displayed. I don't know how to undo the addEventListener. I tried to do it with removeEventListener, but apparently I have the syntax wrong. Please tell me how to do it.
Here's the version with the JavaScript:
document.querySelector("#welcome").style.visibility = "hidden";
var imgOne = document.body.querySelector("#CheiftianOne");
imgOne.addEventListener('mouseover', function(evt) {
var textBox = document.querySelector("#welcome");
textBox.style.visibility = "visible";
});
imgOne.removeEventListener('mouseover', function(evt) {
var textBox = document.querySelector("#welcome");
textBox.style.visibility = "hidden";
});
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
overflow: hidden;
}
.FlexContainerRow {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1;
}
.FlixItem_Images {
width: 50rem;
}
#CheiftianTwo {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#welcome {
position: absolute;
z-index: 2;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
text-align: center;
transition: background-color color linear;
transition-duration: 1s;
color: white;
background-color: black;
margin-left: 13.75em;
margin-top: 6.4em;
padding: 0.2em;
border-radius: 0.4em;
}
#divForLayers {
position: absolute;
z-index: 1;
}
<header>
<div id="divForhover">
<div id="divForLayers">
<div id="HeaderImagesContainer" class="FlexContainerRow">
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
</div>
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
</div>
</div>
</div>
<p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
</div>
</header>
<nav></nav>
<footer></footer>
Assign the event handler function to a variable, or give it a proper name. Then add and remove that.
Your removeEventListener call is failing because you're passing it a unique function.
Also, you actually don't want to undo the event listener to achieve the effect you want. Instead, listen to separate events: mouseover and mouseout. For example:
var btn = document.getElementById('btn');
var par = document.getElementById('par');
btn.addEventListener('mouseover', function (e) {
par.style.visibility = 'visible';
});
btn.addEventListener('mouseout', function (e) {
par.style.visibility = 'hidden';
});
<button id="btn">Hover over me</button>
<p id="par" style="visibility: hidden;">This shows when hovering over the button</p>
The mouseover event occurs when the mouse hovers over an element, and conversely the mouseout event occurs when the mouse leaves the element.
When you call removeEventListener, you have to pass it the same function you passed addEventListener, not a different-but-equivalent one. This will never remove a listener:
imgOne.removeEventListener('mouseover', function (evt) { /* ... */ });
...because by definition, that exact function wasn't ever added previously.
Remember the one you used when adding, and use that same one when removing.
Separately: Adding the handler and then immediately removing it doesn't make a lot of sense. Nothing can happen that will trigger the handler between the calls to addEventListener and removeEventListener in your code. (Edit: Ah, rossipedia has picked up on why you did that, and his answer tells you want to do instead.)
Thanks, everyone. I figured out how to do it without a removeEventListener. (I used two addEventListener).
Thanks, again!
When hover over a div (Selector), a dropdown is displayed. When clicking in an element, a JS function is called and several tasks are performed. That's OK. My problem is that I want the dropdown to disappear after the click, but cannot use .style.display= "none" for example, since I want it to apperar when hovering again over Selector.
I'm not familiar with JQuery, so feel more comfortable with plain JS.
function TheJSFunction(What) {
//alert (What);
// First try: remove classes to dropdown, and then add class 'dropdown-content' (vis: hidden and opacity 0):
// document.getElementById("dc").className = '';
// document.getElementById("dc").classList.add('dropdown-content');
// Second try: set opacity to 0 (or visibility to hidden)
// But then dropdown is not displayed again when hovering over Selector:
//document.getElementById("dc").style.opacity = 0;
}
.Selector {
display: inline;
float: left;
padding: 8px;
background: #282828;
color: #ffffff;
width: 300px;
text-align: center;
}
.Selector:hover {
background-color: #800000;
transition: all 0.5s ease;
}
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #ff8080;
margin-top: 8px;
margin-left: -8px;
width: 316px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.Selector:hover .dropdown-content {
visibility: visible;
opacity: 1;
transition: all 0.5s ease;
}
.dropdown-content .DD_content {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
cursor: pointer;
}
.dropdown-content .DD_content:hover {
background-color: #ffb3b3;
transition: all 1s ease;
}
<div class="Selector">Lizards
<div class="dropdown-content" id="dc">
<div class="DD_content" onclick="TheJSFunction('New');">New Specie</div>
<div class="DD_content" onclick="TheJSFunction('Edit');">Edit record</div>
</div>
</div>
you can add onmouseover to div
<div class="Selector" onmouseover="reset()">Lizards
<div class="dropdown-content" id="dc">
<div class="DD_content" onclick="TheJSFunction('New');">New Specie</div>
<div class="DD_content" onclick="TheJSFunction('Edit');">Edit record</div>
</div>
</div>
then add a function to reset opacity to 100
function reset() {
document.getElementById("dc").style.opacity = 100;
}
To do this effectively, you will need to do a bit of JS to do that. You could either add a class or set the visibility property on click, wait for onmouseout event and then remove the class/property to reset it. This should work even for touch devices.
Example code:
var dropdown = document.querySelector(".dropdown-content");
dropdown.addEventListener("click", function() {
dropdown.style.visibility = "hidden";
});
dropdown.addEventListener("mouseout", function() {
dropdown.style.visibility = "";
});
EDIT:
As a bonus, you could easily just toggle the property in the same line. As these things cause a DOM reflow, it should mean that if it is controlled via CSS selectors it should not show back up. So simply just...
function ClickHandler(element) {
element.style.visibility = "none";
element.style.visibility = "";
}
You need to add an event listener to override the opacity specified in the 'TheJSFunction' function
document.getElementsByClassName('Selector')[0].addEventListener("mouseover", function(){
document.getElementById("dc").style.opacity=1;
});
I am looking for way to make slowly changing of pages after I press button. I want to use only JS without jQuery. Now I have script which change blocks, but I use display none; I am not sure that I can add slowly changing of pages with this. I tryied to use tramsform property but doesn't work good. I need dont have any overflow. It has to look close to this https://tympanus.net/Development/PageTransitions/
var acc = document.getElementsByClassName("btn-arrow");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function showNext(){
var parent = this.parentElement;
var nextToOpen = parent.nextElementSibling;
nextToOpen.style.display ="block";
parent.style.display ="none";
}
}
.big{
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: initial;
overflow: hidden;
}
.one{
background:pink;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
}
.two{
background:green;
width: 100vw;
height: 100vh;
display:none;
}
.icon-arrow-down2{
font-size: 60px;
color: silver;
margin-bottom: 50px;
}
.btn-arrow{
background-color : rgb(255, 238, 192);
box-shadow: none;
border: none;
}
.btn-arrow:hover{
border: none;
}
button,
button:active,
button:focus {
outline: none;
}
<div class="big">
<div class="one">
<button class="btn-arrow" onclick="showNext()">
<span class="icon-arrow-down2"></span>
</button>
</div>
<div class="two"></div>
</div>
You have to play with css animations. I have added some modifications to point you in the right direction. But basically, my recommendation is:
All your pages have the same class with common styles (.page), and then each of them have different background-color.
You need a specific class (.page-visible) that will be added to the next page you want to display, and removed from current visible page. This class just controls visibility. Please notice that the previous class (.page) has display: none;, as is the common one for all the pages.
You will need a different animation for each movement (move up, move down, from left to right, from right to left). I just added one as an example in the code snippet.
And then the magic comes listening to the animationend event: you apply the animation to both pages (the current visible and the next page), make next page visible applying the .page-visible class, and listen to endanimation event. When it happens, just hide the prev page removing .page-visible class, and remove animation classes.
The code works for just this 2 pages (one and two), but you can easily optimize it. I recommend you to take a look at the original page you posted, check their css and their js (open chrome developer tools and go to Sources, they don't have the files minified so you will see how they do everything :).
Does this make sense to you? I hope it helps and point you in the right direction. Animations are super fun! :)
(EDIT: Ah! I added some width&height to the button to be able to see it, hehe, it's up in the left corner now).
var acc = document.getElementsByClassName("btn-arrow");
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function showNext(){
var visibleElement = document.getElementsByClassName('page-visible')[0];
var nextToOpen = visibleElement.nextElementSibling;
nextToOpen.addEventListener('animationend', () => {
visibleElement.classList.remove('page-visible');
visibleElement.classList.remove('page-moveUp');
nextToOpen.classList.remove('page-moveUp');
});
visibleElement.classList.add('page-moveUp');
nextToOpen.classList.add('page-visible');
nextToOpen.classList.add('page-moveUp');
}
}
.page{
display: none;
overflow: hidden;
width: 100vw;
height: 100vh;
justify-content: center;
}
.page-moveUp {
animation: moveUp .6s ease both;
}
#keyframes moveUp {
from { }
to { transform: translateY(-100%); }
}
.page-visible {
display: block;
}
.one {
background:pink;
}
.two {
background:green;
}
.icon-arrow-down2{
font-size: 60px;
color: silver;
margin-bottom: 50px;
}
.btn-arrow{
background-color : rgb(255, 238, 192);
height: 20px;
width: 50px;
box-shadow: none;
border: none;
}
.btn-arrow:hover{
border: none;
}
button,
button:active,
button:focus {
outline: none;
}
<div class="big">
<button class="btn-arrow">
<span class="icon-arrow-down2"></span>
</button>
<div class="page page-visible one"></div>
<div class="page two"></div>
</div>