Active state pseudo class and Adjacent element selector combined on IE - javascript

I'm currently having an issue with this on IE - http://jsbin.com/riyaxewo/4
HTML
<div class="a">
1
</div>
<div class="b">
2
</div>
CSS
.a, .b {
height: 50px;
width: 50px;
padding: 10px 10px;
border: 1px solid;
text-align: center;
}
.a:active, .b:active {
background-color: red;
}
.a:hover + .b {
background-color: transparent;
}
.a:active + .b {
background-color: yellow;
}
The expected result is for box #2 to be yellow whenever box #1 is pressed, however, on IE this
effect only occurs once, and then it just wont happen again.
The reason I'm doing this in CSS and not programatically is because I want the effect to take place as long as the mouse was pressed on the element, even if the mouse button was released somewhere else (meaning I can't rely on mouseup, and mouseleave/mouseout will not get me the wanted result)

Hope this helps: https://stackoverflow.com/a/17211251/3884420
apparently its a bug in IE and its the same for children of active elements and anything like that. you could try a js script that uses on mousedown and on mouseup triggers. I know you said you can't.
also something even funnier happened while testing your problem. if you try to leave your mouse while active it works every time. I removed hover property you added and even this stopped working. I'm guessing every time that your mouse leaves and hover effect stops, the active effect fires again.

Related

Strange behavior with absolute positioning, style.top, style.left and "a" tag

I was trying to complete a simple task on Javascript.info and I'm getting my ass beaten by an "a" tag. The task is to simply place (and remove) a tooltip above the element on hover and I have no problem with the roof or the house, but when I try to place the box above the link, it breaks and I can't solve it for my life.
I'm asking for help here because the solution on the site uses position:fixed while I'm trying to use position:absolute and simply mimicking the solution won't help me learning anything. The problem is all on line 77 and 78, when I try to assign tooltip.style.left and tooltip.style.top.
If I try to assign it usign a literal (for example, "-58px"), it works. Otherwise, it just defaults to whatever value the tooltip on "house" would have. I tried to see what is going on with some tactical alerts and it drove me insane. It shows me that if I use a computed value, it defaults and if I use a literal, it will work normally.
I'd like someone to explain what is going on and possibly some insight (pointing out if I got wrong how position:absolute works, how element size properties works or something on this nature)
The code (I only made the part that is inside of the script tag on line 64, the rest is from the authors of the task):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* the tooltip should work after page scroll too */
}
.tooltip {
position: fixed;
z-index: 100;
padding: 10px 20px;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
#house {
margin-top: 50px;
width: 400px;
border: 1px solid brown;
}
#roof {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 20px solid brown;
margin-top: -20px;
}
p {
text-align: justify;
margin: 10px 3px;
}
</style>
</head>
<body>
<div data-tooltip="Here is the house interior" id="house">
<div data-tooltip="Here is the roof" id="roof"></div>
<p>Once upon a time there was a mother pig who had three little pigs.</p>
<p>The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."</p>
<p>The three little pigs set off. "We will take care that the wolf does not catch us," they said.</p>
<p>Soon they met a man. Hover over me</p>
</div>
<script>
house.onmouseover= function(event){
let target= event.target.closest('[data-tooltip]');
let tooltip= document.createElement('div');
tooltip.textContent= target.dataset.tooltip;
tooltip.classList.add("tooltip");
target.append(tooltip);
if(!tooltip.parentElement.style.position){
tooltip.parentElement.style.position= 'relative';
}
tooltip.style.position= 'absolute';
tooltip.style.top= "-"+(tooltip.offsetHeight+5)+"px";
tooltip.style.left= -target.clientLeft+(target.offsetWidth-tooltip.offsetWidth)/2+"px";
//alert("-"+(tooltip.offsetHeight+5)+"px");
//alert(tooltip.style.top);
}
house.onmouseout= function(event){
let target= event.target.closest('[data-tooltip]');
tooltips= target.querySelectorAll('.tooltip');
for(tooltip of tooltips){
tooltip.remove();
}
}
</script>
</body>
</html>
Thanks already :)
when I try to place the box above the link, it breaks
This is because the tooltip box is positioned to appear under the mouse. Hovering over the link generates a regenerative feedback loop of
Create and append the tooltip element to the <a> element
The mouse is over the tooltip element
Fire mouseout on the a element in preparation of firing mouseover on the tooltip.
mouseout handling removes the tooltip element
The mouse is now over the a element,
Fire mouseover on the a element and repeat from step 1.
The roof and interior mouseover events don't trigger the loop because the tooltip box is outside the target element with the data-tooltip attribute.
You could try
Moving the tooltip box so it cannot appear under the mouse, or
Think of creative ways of using mousenter and mouseleave events on the anchor element that don't fire when hovering over the tooltip because it is a child of the anchor element, or
Turn off pointer events from tooltip elements:
.tooltip {
pointer-events: none;
}
Additional listeners used to verify the problem:
house.addEventListener("mouseover", e=>console.log("over"));
house.addEventListener("mouseout", e=>console.log("out"));
The additional delay caused by console.log did result in the tooltip box being rendered and becoming visible in Firefox, but the log output definitely confirms the feed back loop in action.

hover style on page refresh

I'm looking for a simple way to persist a "hover" style on a page refresh if the user did not move his mouse. The issue is that the hover style is only triggered on a mouse enter/mouseover event, so on a page refresh it will not be applied even if the cursor is above the item in question until the user touches the mouse again and moves it slightly. The code below has this issue.
$('div').click(function () {
window.location.reload();
});
div {
width: 100px;
height: 100px;
background: grey;
}
div:hover {
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
can you set the a:visited { background-color:black;color:#fff} Of course this would apply to the whole page so all your visited backgrounds would be black. I've never tried to marry div a:visited{background-color:black;color:#fff;} so not sure that would work. They say nothing ventured, nothing gained.

mousedown listener doesn't work in Firefox on absolute positioned element

I ran into a strange problem and I need some help to figure this thing out. I have simple button with one div inside (which has position: absolute), here's the code:
document.querySelector('.mask')
.addEventListener('mousedown', e => console.log(e.type))
button {
position: relative;
width: 200px;
height: 60px;
background: none;
border: 1px solid #1c90f3;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(28, 144, 243, 0.2);
}
<button type="button">
click
<div class="mask"></div>
</button>
All I need is to add mousedown listener to the .mask element. Simple right? Well.. turns out Firefox has some problem with that. Please check live demo: https://jsfiddle.net/fzwbb3dp/ When you open console, you can see that in Chrome after you click the button, console logs correct message on mousedown event. but nothing shows in Firefox console. At this point I have completely no idea what is the source of this problem, so I will really appreciate if you can provide some guidance to me how to fix this issue. Thank you.
I think the issue here is that you are using the <button> tag in a somewhat unsupported manner, and Firefox is being a stickler about it.
Per MDN, the <button> element may only contain phrasing content -- this does not include <div> elements. If you change the parent button to a div it plays nicely (although you'll have to rewrite your CSS).

Is it possible to prevent hidden elements jumping into view on focus

I've been tasked to create an accessible/responsive carousel and have come across an issue in Chrome regarding the focus of hidden elements.
As per this jsfiddle (http://jsfiddle.net/ft1oosep/); if you tab until the hidden element gets focus you'll see the link is hoisted into view without any update to the css properties of the element.
For the carousel, this causes problems as I need to keep track of where the carousel is at any given time. I've attempted to blur on focus but even that seems too late. Is there an easy solution to this problem or am I going to develop some complex focus/tab management?
Thanks in advance
(Please, no responses suggesting carousels are a bad idea... Its the task I've been set)
Example Code:
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial';
font-size: 13px;
}
div {
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ffffff;
}
a {
width: 200px;
height: 200px;
text-align: center;
background: #A6C6DD;
display: block;
color: #ffffff;
text-decoration: none;
}
a:last-child {
background: #746F9E;
}
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
Visible Link
Hidden Link
</div>
In my case, I added a dynamic tabindex attribute, so that when the tab-able elements where hidden, it was tabindex="-1" (prevent all tabbing) and when visible it becomes tabindex="0" (tab-able in the normal browser tab-order).
The code will likely be specific to the instance, but in general, set the tabindex attribute of the problmatic element to tabindex="-1" on render, then in the event that makes the problmatic element visible set tabindex="0" on that element whenever it is visible (and back to tabindex="-1"` once hidden again.)
Accessibility note: very rarely should anything other than -1 (disable tabbing) or 0 (normal tabbing flow) be used for tabindex values.
Would adding a node with js after the first link gets blurred be of any help ? So while the carousel is running there is no node there until tabbed through.

Strange combination of jQuery mouseenter, mouseleave, and append

I've got an interesting issue with combining jQuery's mouseenter and mouseleave events with a call to append. My object is to show extra content when the mouse enters something and then remove it when the mouse leaves. It's very similar to what happens when you mouse over a tag here on StackExchange. The sequence is:
In mouseenter, create content and position it by the element under the mouse via .offset and .append.
In mouseleave, remove that content from the screen.
The element I'm operating on is an img, and I'm using jQuery 1.6.2. The problem is that .append somehow triggers mouseleave, which is quickly followed by .mouseenter, ad infinitum. It appears as a strange flickering effect on the content being added, as it's removed and re-added repeatedly. See an example here on jsFiddle. Why is this happening, and how do I resolve it?
EDIT: figured it out. D'oh. The added content was appearing under the mouse.
The reason this happens is that you're adding content where your mouse is. That new content is not part of your original element so by definition when you show the new DIV your mouse is not over the IMG any more.
One way to solve this would be to use the image as a background of a parent DIV and then append the new DIV to the parent so that the new DIV is a child of the parent.
On a side note is there a reason you chose not to use .hover()?
Here's a working jsfiddle for how I'd do this.
HTML:
<div class="papa">
<div class='myDiv'>
<div id='divHover'>Hello World</div>
</div>
</div>
Javascript/Jquery:
$(document).ready(function() {
$(".papa").hover(
function () {
$(".myDiv").show();
},
function () {
$(".myDiv").hide();
}
);
});
CSS:
.papa {
background-image:url('http://dummyimage.com/100x100/000/fff');
height: 100px;
width: 100px;
}
.myDiv {
display: none;
height: 30px;
border: 1px solid black;
}
#divHover {
width:100px;
height:20px;
background-color:white;
border:1px solid black;
position: relative;
top: 10px;
left: 10px;
}

Categories