We Keep Coding

Hide dropdown with JS

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;
});

How to add animation when page change each other?

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>

Make an overlay on mouse over

I have a trouble with an effect I want to achieve.
When I put the mouse over this element :
<div class="process">
<h3 class="text-center">Process</h3>
<ul class="row text-center list-inline wowload bounceInUp animated" style="visibility: visible; animation-name: bounceInUp;">
<li data-id="Reflexion">
<span><i class="fa fa-flask"></i><b>Reflexion</b></span>
</li>
</ul>
</div>
I want to have an overlay over all the page and over this overlay my <ul>...</ul>
I have tried with z-index and position but it doesn't work, my overlay is always over all the page and over the <ul>...</ul>
Here is the style of <ul></ul> and .overlay
.process ul li{
width: 10em;
height: 10em;
border: 1px solid #CEEBF0;
padding: 0;
border-radius: 50%;
margin: 0 1.25em;
line-height: 13.5em;
color: #21ABCA;
-webkit-transition: border-color 0.5s ease-in; /* Safari */
-moz-transition: border-color 0.5s ease-in; /* Firefox */
transition: border-color 0.5s ease-in;
}
.process ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
.process ul li span i{font-size: 3em;}
.process ul li span b{display: block;font-size: 1em;font-weight: 300;}
.process ul li:hover {
border-color:#3498db;
background-color: rgba(52, 152, 219,1.0);
}
.overlay {
position: fixed;
z-index: 50;
background-color: red;
height: 100vh;
width: 100vw;
}
Here is the script I'm using to listen mouse event :
$(".process ul li").on({
mouseenter : function() {
$('#overlay').addClass('overlay');
},
mouseleave : function() {
$('#overlay').removeClass('overlay');
},
});
Update
There is a Fiddle that show better than words my trouble

When I make overlays I usually use absolute positioning to get it right. Without knowing what effect you want specifically, here's a generic demo of how an overlay might work.
fiddle
By setting the overlay's position to absolute, and all of its positional attributes to 0, it covers the box it's bound to completely without having to worry about setting widths or heights.
Hope this helps!
EDIT
I know you've solved the issue, but for those who may look later, here's a link to a fiddle wherein the issue has been solved.
fiddle

The Z-index property only works when both elements are positioned manually. Make sure the list has position: relative or position: absolute too, not just the overlay. Then you need to give a higer value to the z-index of the list.
EDIT: try adding this to your code:
.process {
position: relative;
z-index: 100;
}
You'll have to actually play with Z-index to make sure only the hovered panel is in front of the overlay if that's what you want, but this proves that you need to set a position attribute on what you want to be manually z-positioned.

Show/hide in a jQuery sticky menu (positioned in the middle)

I have a few problems with trying to make a sticky menu that shows/hides with a click button, which is why I'm thinking about getting rid off the whole show/hide option completely and probably rewriting it from scratch in the future.
I can identify 2 major problems:
How to make the show/hide button move along with the sticky menu but to make it in such a way so that it does not disappear with it when the hide button is clicked?
I tried quite a few options on how to animate the menu so that it toggles from right to left (and vice versa) but somehow each time there was something wrong (either with my code or the option I found). How do I do it properly? If I manage to animate it so that 90% of the div hides there will still be place for a hide/show button (and this will also solve problem #1).
Here is my code so far:
http://jsfiddle.net/ohkegetn/
(edit: correct jsfiddle link added)
HTML:
<div class="menuWrapper">
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div id="toggle">Show/Hide</div>
CSS:
body {
background: black;
font-family: Open Sans;
font-size: 180%;
line-height: 200%;
height: 100%;
color: white;
}
a{
color: white;
text-decoration: none;
}
.menuWrapper {
position: absolute;
top: 225px;
text-align: center;
width: 300px;
left: 0;
}
#toggle {
top: 450px;
position: absolute;
}
#menu {
width: 150px;
background: #0E586D;
color: white;
position: relative;
top: 0;
}
li {
color: #e5e5e5;
transition: 1s;
padding: 0 0 0 10px;
text-align: left;
display: block;
}
#menu ul a li:hover {
transition: 0.3s;
color: white;
background-color: #0f6a84;
}
p {margin: 200px}
JS/jQuery:
// Toggle - show/hide
$(document).ready(function(){
$("#toggle").click(function(){
$(".menuWrapper").fadeToggle("slide");
});
});
// Sticky Menu
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#menu').position();
sticky_offset = original_position_offset.top;
$('#menu').css('position', 'relative');
});
$(window).scroll(function () {
var sticky_height = $('#menu').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll) > sticky_offset) {
$('#menu').css('position', 'fixed');
}
if((where_scroll) < (sticky_offset + sticky_height)) {
$('#menu').css('position', 'relative');
}
});
Final notes:
The html/css code is probably a bit of a mess, sorry for that but its just a test version. They are not that relevant anyway. The jQuery part is.
Also I would like to stick to Javascript/jQuery without plugins if possible.
Big thanks for any help!

I solve your problem
but this solution is as you think or not i donot know
see this link
$(".scroll").mouseover(function() {
var pos = $(this).offset();
var width = $(this).outerWidth();
$("#toggle").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left+width) + "px"
})
});

How do I wrap my text within a sliding navigation panel?

I have a panel that slides up and down when you click on it. When the panel slides down, some navigation text appears. When the panel slides up, the text is supposed to slide up with it, but it isn't. The panel slides and the text stays on the back. It hides but doesn't slide with the panel.
HTML:
<div id="panel">
<ul class="nav">
home
proj
about
</ul>
</div>
<div id="flip"></div>
Javascript:
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
CSS:
#flip {
content: url("Some image to click on");
margin: auto;
z-index: 100;
}
#panel {
padding: 5px;
text-align: right;
background-color: #fff;
display: block;
z-index: 100;
opacity: 0.7;
/* position:fixed;
width: 100%; */
}

Sorry mate, I don't know jQuery, but very quickly you could try and implement this via CSS transitions.
Once you have set the transition as
transition: property duration timing-function delay, property duration timing-function delay;
e.g.
transition: height 0.5s ease-in, opacity 0.25 ease-in 0.5s;
when you hover over the #panel (pseudo class :hover ), you can set different values for the #panel height and opacity.
Don't forget vendor-specific versions of the transition property (like -webkit-, -o- and so on).