Develop Reference

HTML/CSS/JS: How to Disable CSS Hover with Clicking? And Enable Again?

Sorry for poor English, it is not my first language.
I have made a toggle button which shows specific information by clicking it(javascript here).
This button has CSS:hover and I want to disable it when I click the toggle button.
And CSS:hover function needs to be back when user hovers the button again.
Is there any way to disable CSS:hover functionally?
Please let me know if you need more info to it.
Current Javascript
let logStyle = document.getElementById("log").style;
let levelStyle = document.getElementById("level").style;
let log = document.getElementById("log");
let level = document.getElementById("level");
odium.addEventListener("mouseover", function (event) {
logStyle.display = "block";
logStyle.animation = "fadein .3s";
levelStyle.display = "block";
levelStyle.animation = "fadein .3s";
}, false);
odium.addEventListener("mouseout", function (event) {
logStyle.display = "none";
levelStyle.display = "none";
}, false);
odium.addEventListener("click", function (event) {
log.classList.toggle('active');
level.classList.toggle('active');
}, false);
Toggle button CSS
#header nav img:hover {
transform: scale(1.2);
}
}
#log.active{
display: flex !important;
animation: fadein .3s !important;
}
Current HTML
<header id="header">
<nav>
<ul>
<li>
<img id="symbol1" src="assets/css/images/symbol-odium.png" style="cursor: pointer;"/><span
id="level"
></span>
</li>
</ul>
</nav>
<p id="nowValue" class="nowValue"></p>
<div id="log" class="log">
<ul>
<li></li>
<li>230104</li>
</ul>
</div>
</header>

It took me a while to understand what you need: a two- or tri-state action button.
hover: grow to look elevated
active: shrink to original elevation
focus: [OPTIONAL] shrink to look pressed elevation
Option 3) has only real effect when the element is a <button> or an <input type="button">. In general: an element that can receive focus, where buttons seem the most logical choice.
The snippet shows some simplified code of how it's done, with a bit more subtle action:
.button_img { cursor: pointer }
.button_img:hover { transform: scale(1.03) }
.button_img:active:not(:focus) { transform: scale(1) }
.button_img:focus { transform: scale(0.98) }
<img class="button_img" src="https://picsum.photos/74?random">

Prevent navigation to the top of the page after click on fixed top menu [duplicate]

This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 7 years ago.
I've been working on a new project recently and used the fixed top menu.
In the top navigation menu I have and unnumbered inline list.
I've got an element which is clickable and after click() it shows the vertical options that are inside the div.
I'm not sure if it's just the css mistake I did or I need to add something to make this work, but every time I click on this <li> element it navigates me to the top of the page and then shows the content of the div.
It's working at least, but I want the users to be satisfied with the functions on website, so I don't want the click() function to navigate me to the top of the page, but just to show fixed <div> from navbar that is aligned to my fixed navbar. Thanks for help.
**EDIT:**I forgot to say that after the <div> show() function I can easily move with that showed div on the site and it's fixed where it should be, but once again when I click on it to collapse it, the click() function navigates me to the top.
Here's the code:
HTML:
<li class="navbar_item navbar_item_left navbar_item_actions" onclick=">
<a class="navbar_item_link navbar_item_link_for_actions refresher" href="#">Click me!</a>
<div class="actions-dropdown">
First link
Second link
Third link
</div>
</li>
CSS:
.actions-dropdown {display: none; position: fixed; background-color: rgba(154, 210, 78, 1); width: 250px;}
.actions-dropdown a {color: rgb(250, 250, 250); padding: 8px; font-size: 15px; text-decoration: none; display: block; text-align: left; float: left; width: 234px;}
JS:
$(document).ready(function(){
$(".navbar_item_actions").click(function(){
var display = $(".actions-dropdown").css('display');
if(display == 'none'){
$(".actions-dropdown").show(400);
} else {
$(".actions-dropdown").hide(400);
}
});
});

Cancel the click so the default action (following the link) will not execute.
$(".navbar_item_actions").click(function(e){
e.preventDefault();
/* rest of code */
});

Use preventDefault on the event.
$(".navbar_item_actions").click(function(event){
var display = $(".actions-dropdown").css('display');
if(display == 'none'){
$(".actions-dropdown").show(400);
} else {
$(".actions-dropdown").hide(400);
}
event.preventDefault();
});

Need to bounce an icon/button without jQuery UI

I have a form with save and reset buttons. And I have a button icon on the top of the form. I am trying to make the button icon bounce when a user clicks the save button. I don't want to use the jQuery UI. I already gave it a try but I just want to use the plain CSS and a simple onclick javascript function to make this work.
Here is the bounce CSS I am using:
.bounce{
position: relative;
-webkit-animation: bounce 1s 5;
}
#-webkit-keyframes bounce{
0%{
bottom:5px;
}
25%, 75%{
bottom: 15px;
}
50%{
bottom: 20px;
}
100%{
bottom: 0;
}
}
The Css works pretty well, but obviously it bounces when the page is loaded as I have added the class="bounce" to the button icon.
<button class="container-list bounce" data-toggle="modal" data-target="#container-modal"><img src="images/container-rack.png"></button>
I have a very long form, and at the end, I have the button container as following which has the save and reset buttons.
<div class="container-buttons">
<button class="btn btn-success" id="save_container" type="submit">Save</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
So, how can I trigger the bounce css property, whenever the save button is clicked? Please help me. :)

You have to add the class when the button is clicked. By removing the class after 1 second (or however long your animation is), you can add it again with the same button.
Now, I don't see your jQuery or anything, so I'm just going to put some generic jQuery here:
$('#save_container').click(function () {
var b = $('.container-list');
b.addClass('bounce');
setTimeout(function () {
b.removeClass('bounce');;
}, 1000);
});
When the #save_container is clicked, .container-list will get the class .bounce and remove it after 1 second (since my animation in the fiddle is 1 second long).
JSFIDDLE
Answer 2
As per Anthony Grist's suggestion, you could flip the operations around and with that get it to work with every single click.
That solution can be found in this fiddle and the jQuery looks like this:
$('#save_container').click(function (e) {
var b = $('button.container-list');
b.removeClass('bounce');
window.setTimeout(function() {
b.addClass('bounce');
}, 1);
});
In this code, the .bounce class gets removed and 1ms after that it gets added again. In the 2nd fiddle $('.container-list') contains button as well, but that's only because the HTML is a bit different.
The reason why you should go for answer two is that it can be triggered over and over again, without you having to wait for the class to be removed first.
Credit for answer 2 goes to #AnthonyGrist!

Remove the .button class from the element and add it on when the user clicks the button:
var button = document.querySelector("button");
button.onclick = function() {
var secondButton = document.querySelector("#second-button");
secondButton.classList.remove("bounce");
secondButton.offsetWidth = secondButton .offsetWidth;
secondButton.classList.add("bounce");
};
.bounce {
position: relative;
-webkit-animation: bounce 1s 5;
}
#-webkit-keyframes bounce {
0% {
bottom: 5px;
}
25%,
75% {
bottom: 15px;
}
50% {
bottom: 20px;
}
100% {
bottom: 0;
}
}
<button>Click Me!</button>
<button id="second-button">Now Click Me!</button>
You'll notice that if you press the button more than once the animation will not repeat. To work around this, use one of the techniques in this article:
var button = document.querySelector("button");
var secondButton = document.querySelector("#second-button")
button.onclick = function() {
secondButton.classList.remove("bounce");
secondButton.offsetWidth = secondButton .offsetWidth;
secondButton.classList.add("bounce");
}
I updated the code snippet.

Click Propagation failing in Jquery

For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.
$('.clickaway').click(function() {
$('body').removeClass(drawerClasses.join(' '));
return true;
});
EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/
The goal is to have the drawer out and still be able to click the button to change the color of the text.

The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.
One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:
.show-drawerHotkey .ColorButton {
position: relative;
}
The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)
Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/

Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:
[EDIT] - Example updated to illustrate clicking a link outside of the containing div.
// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');
i.click(function() {
m.toggle("slow");
});
$(document).mouseup(function(e) {
console.log(e.target); // <-- see what the target is...
if (!c.is(e.target) && c.has(e.target).length === 0) {
m.hide("slow");
}
});
#menuIcon {
height: 15px;
width: 15px;
background-color: steelblue;
cursor: pointer;
}
#menuContainer {
height: 600px;
width: 250px;
}
#menu {
display: none;
height: 600px;
width: 250px;
border: dashed 2px teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a link outside of the container
<div id="menuContainer">
<div id="menuIcon"></div>
<div id="menu"></div>
</div>

trigger visibility of sublist on class change

I've been trying to achieve this for the last two days, but I'm fairly new to javascript, so maybe I'm just not seeing something.
What I'm trying to create is a Sidenavigation, that highlights the current section you are at. I have found a jquery plugin that does that like a charm http://trevordavis.net/blog/jquery-one-page-navigation-plugin/
But I am working with subitems and I would like to trigger the visibility of this subitem, as soon as the current section is active. So the ul would be visible if the containing list item has the class of .current, and if one of the sublist's list items has the class .current.
I have found out, that I'd probably need to trigger an event on the class change. I have tried the following, but it has not yet worked.
Markup:
<ul id="nav">
<li class="current">Section 1</li>
<li>Section 2</li>
<li class="parent">Section 3
<ul class="sublist">
<li>Subsection 1</li>
<li>Subsection 2</li>
<li>Subsection 3</li>
</ul>
</li>
</ul>
For the jquery I have tried this:
$('#nav').on('event', function(){
$('.parent').addClass('current').trigger('visibility');
});
$('.parent').on('visibility', function(){
$('.parent .sublist').addClass('visible');
});
What I am basically trying to do is what Bootrap does in its documentation. When scrolling down, you can see Glyphicons, as soon as you reached this section, the subitems pop open (available glyphs, how to use, examples) http://getbootstrap.com/components/
SASS applied to the Navigation so far:
.overview{
transition: .3s all;
ul{
margin-left: 10px;
ul{
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
}
}
}
.current{
> a{
font-weight: $bold;
}
ul{
max-height: 9999px !important;
transition: max-height 1s ease-out;
}
}
I have been able to show the sublist if the parent is set to current, but as soon as the child is current, the sublist will be hidden, so I figured, I'd need some javascript

I see now :)
What you could do, (there's probably multiple way, but what I'd do) is create a function that checks on scroll if a class is nearing the top of the window, if so, add a class to the relating item in the nav bar.
Should be relatively simple to do without a plugin, something along the lines of:
var checkSide = function(){
$('.container p').each(function(){
var item = $(this).offset().top,
$window = $(window),
navItem = $('#nav a[data-id="'+$(this).data('id')+'"]');
if ($window.scrollTop() >= item) {
if (!navItem.hasClass('current')) {
$('#nav .current').removeClass('current');
navItem.addClass('current');
}
}
});
};
$(window).scroll(function(){
checkSide();
});
See http://codepen.io/jhealey5/pen/GjJFI - Should be able to adapt it to your needs.
Assuming I understood correctly :)