I have two borders, one on the bottom of an H1, and the other on the right hand side of a div. I have them change color if the mouse is over either element. My idea is to change both borders to be the new color when the mouse is in neither. I figure my best bet would be some sort of JavaScript logic. Something like: if the mouse is not on a, and not on b, add id1 and id2, though I don't know how this will affect my id1 and id2 when the mouse goes back to them.
Is this the right answer, or is there another way I can do this? In case you're wondering the border is 2px wide. I am very new to JavaScript. So to recap, what I want is, the borders of my h1 and div to change when the mouse hovers over them, when the mouse is on neither, I wan't both borders to change at the same time. I'm after the simplest least messy way of solving this.
You could do it by applying css only when their container is hovered. Check out the snippet!
.container {
display:block;
width:100px;
}
.container:hover h1 {
border-right:solid 2px red;
}
.container:hover div {
border-top:solid 2px blue;
}
<div class="container">
<h1>Hi there</h1>
<div>my friend</div>
</div>
You can use the onmouseleave event to handle what happens when the mouse is not on the elements.
You can have a boolean value for each element that you set to true when the user hovers over them and false when the user leaves them. Then you can have an if statement in your onmouseleave event handler that checks whether the mouse is not on either of the elements.
//Get your h1 element
//Get your div element
var onH1 = false;
var onDiv = false;
function changeBoth() {
//Change both borders
}
h1.onmouseover = function() {
onH1 = true;
//Change h1 border
}
div.onmouseover = function() {
onDiv = true;
//Change div border
}
h1.onmouseleave = function() {
onH1 = false;
if((!onH1) && (!onDiv)) {
changeBoth();
}
}
div.onmouseleave = function() {
onDiv = false;
if((!onH1) && (!onDiv)) {
changeBoth();
}
}
Related
In a website I'm building, I have a button with a :hover animation, and when you click the button a lot of things on the page including the button move around. My problem is that even after the button moves out from under the mouse, it doesn't update and lose its :hover effect until you move the mouse again.
Here's an example - here once you click the button it stays light blue (the hovered colour) until you move the mouse again.
function clicked() {
if (document.getElementById('mydiv').style.transform == 'translateY(70px)') {
document.getElementById('mydiv').style.transform = 'translateY(0px)';
} else {
document.getElementById('mydiv').style.transform = 'translateY(70px)';
}
};
div {
background-color: #fedcba;
padding: 20px;
display: inline-block;
}
div:hover {
background-color: #abcdef;
}
<div id="mydiv" onclick="clicked();">Click me</div>
How do I make the element update without the user needing to move the mouse again? JQuery is ok.
I think with your current CSS approach you won't be able to handle that. Try another JavaScript approach:
const el = document.getElementById('mydiv');
el.addEventListener('click', () => {
if(el.style.transform == 'translateY(50px)') {
el.style.transform = 'translateY(0px)';
} else {
el.style.transform = 'translateY(50px)';
}
el.style.background = "#fedcba";
});
el.addEventListener('mouseover', () => {
el.style.background = "#abcdef";
});
el.addEventListener('mouseout', () => {
el.style.background = "#fedcba";
});
div {
background: #fedcba;
padding: 20px;
display: inline-block;
}
<div id="mydiv">Click me</div>
If you extract the "hover" into the JS code then you can update the state of the element without the user having to move the mouse.
I tried to disable the graph by not allowing the cells on graph with follow code.
graph.setCellsSelectable(false);
but it is not working, still can select cell, (only disabled resizing)
And for the toolbar to be disabled, I tried to remove or replace ondrag event, is that correct? In theory I think mxgraph has their own event handler for dragging of toolbar item.
mx_toolbar.appendChild(
mxUtils.button("Disable/Enable", function() {
document.querySelectorAll('.toolbar > button').addEventListener(function (e) {
e.preventDefault()
return false;
});
}
)
Hope your help. I dont mind as long as it is working solution.
Thanks
Instead of removing or modifying the event handler, you can simply overlay the area you want to disable along with css.
var toolbarContainer = document.querySelector(".toolbar");
var overlay = document.querySelector(".toolbar-overlay")
if (!overlay) {
overlay = document.createElement('div')
overlay.className = 'toolbar-overlay'
toolbarContainer.appendChild(overlay)
} else {
overlay.parentNode.removeChild(overlay)
}
Here is css for the overlay div
.toolbar-overlay {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0.4;
background: #e1e1e1;
}
Note: You should make sure the parent div of the overlay div must positioned as relative to make this css working!
Im giving a border to a div, but if i set the border, it is removed automatically, why?
PD: I know if i set the border in the last call of the function it will work, but i want to know why this happen.
var padding = 0, e = document.getElementById("box");
function box(){
if(padding < 80) { padding ++;
e.setAttribute("style","padding:"+padding+"px");
setTimeout(()=>{box();},50);
}
if(padding%7 === 0) { //
e.style.border = "2px solid purple";
}
}
window.addEventListener("DOMContentLoaded",box);
#box {
width: 50px;height:50px;background-color:pink;
}
<div id="box">
e.setAttribute("style","...") overrides the style.border that you set elsewhere (since it resets style completely).
You should only use style.* = "...".
Or, better yet, use CSS animations instead.
The idea is that when users mouse over each name in the list, the div with id preview will have background image. The first a does not have a problem, but when I added the href, JavaScript keep firing the hover event. What is the problem here?
HTML
<ul>
<li><a>John</a></li>
<li>Sam</li>
<li>Tom</li>
</ul>
<div id="preview"></div>
JavaScript
jQuery(function() {
var names = $('a');
var bg = document.getElementById('preview');
names.hover(
changeBackground, handlerOut
);
function changeBackground(e) {
console.log('hover');
var image = 'http://londonalley.com/wp-content/uploads/2014/08/creativesUS3bb-1920x1080.jpg';
if (bg.style.cssText.length == 0) {
bg.style.cssText = builtStyle(image);
bg.style.display = "block";
}
}
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: 101;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
//handle mouse leaves
function handlerOut() {
console.log('out');
if (bg.style.cssText) {
bg.style.cssText = "";
}
}
});
JSfiddle: https://jsfiddle.net/rattanak22/q96a6dz4/
Solution: Simply change your z-index css in the builtStyle function from 101 to -1
z-index: -1;
Note: You have specified opacity twice in your CSS.
The problem is you are setting background image as absolutely positioned without z-index. So when you hover over "a" tag, changeBackground function assigns an background image which is absolutely positioned with no z-index. That will bring image on top above all, like one more layer above "a" tag. As this new layer comes up, mouse cannot reach "a" tag which triggers hoverOut, and the cycle continues for every mouse moment.
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: -1;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
https://jsfiddle.net/pradosh987/9p0pjtd4/
I have assigned -1 z-index to background image and that works.
After looking at your site, simply, change your css rules to:
#content-wrapper {
position: relative;
z-index: 102;
overflow: hidden;
}
#preview{
pointer-events: none;
}
Edit: What I want is for the nested div to not be moved when the mouse leaves both it and the parent div. I'm pretty sure it is currently moving because the border somehow extends the parent further out than the nested div. I'd like to keep the border.
Like someone once said, a demo is worth a 1000 words.
I have a div nested in a div
<div class='parent'>
<div>Check me out</div>
</div>
That has some styling
.parent {
width: 100%;
border: 1px solid black;
}
.parent div {
display: inline-block;
position: relative
}
And some accompanying Javascript
var navBar = document.querySelector('div.parent');
var navItems = navBar.querySelector('div');
var moveNav = false;
var overItems = false;
navBar.addEventListener('mouseout', function() { moveNav = false; });
navItems.addEventListener('mouseover', function() { overItems = true; });
navItems.addEventListener('mouseout', function() { overItems = false; });
navBar.addEventListener('mouseover', function() { moveNav = !overItems && true; });
navBar.addEventListener('mousemove', moveToMouse);
function moveToMouse(e) {
if(!moveNav)
return;
navItems.style.left = (e.offsetX - Math.floor((e.offsetX+navItems.offsetWidth)/navBar.offsetWidth) * (e.offsetX + navItems.offsetWidth - navBar.offsetWidth + 10)) + 'px'
}
The purpose is to keep some part of the child div under the mouse while the mouse is inside the .parent div.*
What I'd like to know is how to make the child div not be moved as the mouse exits the .parent div?
In other words, I want it to act like it does in this fiddle. The difference between the fiddles is that the first has a border around .parent and the second is borderless.
And of course, I've noticed that child div jerks around instead of moving smoothly. Suggestions as to how to avoid that are welcome but not expected.
*if there's some better way to accomplish that, please do point it out**
**don't say "use jQuery"
In the example of the div with border, I used mouseenter event instead of mouseover and it seems to be working the way you want it.
navBar.addEventListener('mouseenter', moveToMouse);