How to clear touch screen "touched" button focus, active, hover - javascript

Trying to figure out how to reset a button back to the "untouched" state. I am using a button as:
<div id="service-control-buttons" data-role="controlgroup" data-type="horizontal">
Prev
Next
</div>
When I tap (on my iPad) Next or Prev it runs a javascript function I wrote and then the button remains permanently active, hovered or focused (not sure the state).
My goal: After the javascript function runs, I want to reset the button back to the un-active, un-hovered or un-focused state. Of course, this doesn't happen on non-touch screen mouse click.
I've tried:
$(another-selecter).focus();
$(another-selecter).click();
$('#service-next').blur();
Also
$('#service-next').css('background-color', 'original-color')
works but of course, that's the end of the highlighting altogether and I don't want that. I don't want to manually set css as I use themes that may change in the future and want to avoid hacks if possible.

To prevent this, you can customize the hover effects for touch screens using the following #media in you CSS file.
#media (hover: none) and (pointer: coarse) {
/* Add hover styles here */
}
Use Case Example
Lets say we have a button with id btn-one that has a transparent bg color but the hover effect changes it to red.
By applying the code below, when a user with a touch device interacts with the app, the #media will trigger style changes. Keeping the bg color transparent on hover. In this way we can prevent the button having a sticky behavior.
By the contrary if the device isn't a touch screen the hover styles will work as if this #media doesn't exist, and so the bg colors will change on hover, normally.
#media (hover: none) and (pointer: coarse) {
#btn-one:hover {
background-color: transparent!important;
color: black;
}
}

Related

Disable scrolling when pop up open and menu not showing on mobile

thanks for looking into my issue
I am creating a website: http://testgod0312.000webhostapp.com/ , all the css are separate by blocks so that it is easier for you to potentially help me (in assets folder).
when you go to map and click on a button, a pop up shows up, but you can keep on scrolling. The button is only coded in css (no js), everything in the map.css file - any idea how to disable overflow without resorting to js? if using js, what would you do as there is no function capturing the opening / closing of the box?
I have a menu (click top right corner), works fine on laptop but on mobile, it shows only 50% of it. The code is in nav.css; with the responsive at the bottom. Any idea on how to display it all?
thanks in advance!!
fafa
#1 can't be solved without javascript as long as browsers are not supporting css:has(). So the only way is to apply a class or a style="overflow: none;" to the body as soon as a popup gets opened and remove it after it was closed. The very same happens already if the menu is opened/closed.
A very small code snippet would be enough:
window.addEventListener("hashchange",
() => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);
and CSS
body.popup-open {
overflow: none;
}
About #2 inside the nav.css the values applied before the media query (#media all and (max-width: 767px) {) cause the issue.
The menu__right changes from flex to none on small screens. And menu__left still has the right 50% value applied for bigger screens, So adjusting this value inside the media query to 0% solves it.
.menu__left {
right: 0%;
width: 100%;
}

Background color sticking in Internet Explorer 11

At first, I was trying to make it so :hover over a div element would change the background color. I did this with just simple CSS. It worked in Chrome and some earlier IE versions I've checked. With IE 11 though, when my mouse leaves the div, the hover background color stayed there.
So then I used jQuery to, on hover, add a class on hover and remove the class on mouseleave (and in the CSS file I associated the hover background color with this class). I used console.log to check that it was in these parts properly, and they were there, but removeClass('class-name') just is not actually removing the class in IE 11 for some reason.
I tried to use setClass and classList.remove/add too and could not remove the added class. Even though console.log showed that I was right there in the code that would do this.
So then I tried to, instead of adding/removing a class, just change the background color directly with hover events in jQuery, like $('div.target').css('background-color', 'color'). This worked the first two times. On hover, it changed to the hover background color, then leaving, it changed to the other color. But then I couldn't hover over the div again to get the hover color to come back.
Any tips or knowledge about quirks that could cause these issues?
The following snippet use JQuery mouseleave and mouseenter to perform a background-color changing. Works with IE 9+.
JSFiddle
HTML
<div class="myDiv myDiv-red">
</div>
CSS
.myDiv
{
height : 30px;
width : 30px;
}
.myDiv-red
{
background-color : red;
}
.myDiv-green
{
background-color : green;
}
JQuery
$(function() {
$(".myDiv").mouseenter(function() {
$(this).removeClass("myDiv-red").addClass("myDiv-green");
});
$(".myDiv").mouseleave(function() {
$(this).removeClass("myDiv-green").addClass("myDiv-red");
});
});

CSS Styles not being removed after class is removed

I am sitting with an issue where CSS styles don't get removed from an anchor tag when the css class is removed via AJAX, it only happens on a mobile device. This doesn't happen when using a desktop browser.
Have a look here using a mobile device.
You will note that the filters turn red when you select them, but deselecting them doesn't remove the red.
The code that is used there:
$('.tagsContainer .tagsContainerA').click(function () {
vm.alphabet("");
clearAlphabet();
$('.pagination.alphabet .alphabetAll').addClass('currentPage');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$(this).addClass('selected');
}
return false;
});
Any ideas what could be causing this on a mobile device?
The problem has to do with the hover, not the click function.
This happens because the hover is triggered in mobile while the element is focused also.
Just add this to your css:
#media screen and (max-width: 768px) {
.places-filter .places-tags li:hover {
background-color: #d1d1d1;
background: #d1d1d1;
}
}
This way you will 'disable' the hover function and only have the click one in mobile.
Another solution is placing the hover effect only in screens bigger than X amount.

Return Bootstrap .navbar-toggle to its normal state after click

Using Bootstrap v3.3.4 out of the box, no custom CSS.
When clicking on the hamburger button, the navigation expands as it's supposed to, although the button itself stays in a "pressed" mode and only returns to its normal state when clicking elsewhere on the page.
Anyone know how to make the hamburger button return to its normal state right after it gets clicked?
This is the button I'm referring to, to avoid confusion:
<button class="navbar-toggle" data-toggle="collapse">...
It's because the button keeps focus, and bootstrap styles for that.
Change the styles for the pseudo selector :focus:
.navbar-default .navbar-toggle:focus{
background-color: transparent;
}
Note you will want to re-apply your :hover styles, as the :focus styles will take precedence when the button is both focused and hovered:
.navbar-default .navbar-toggle:hover{
background-color: #ddd;
}
Bootply

IE still catches mouse-actions behind fullscreen div

I have a strange issue with IE (tested on IE8 as this is the lower end browser on the project)
I make a fill height & full width div appear on the screen on some condition to block all user action (it's just a help, I know it can easily been broken user-side..)
The only action that can be done is clicking on this curtain at a certain x/y range to disable it.
But, obviously, in Internet explorer it doesn't work.. elements behind the div are still catching click and hover actions... Why?
My first idea was that there was something wrong with the css making this div a 0x0px div on IE, but when I add a background-color to the div, it fills the screen as expected, so that's not the solution.
this is the curtain's css :
#screencurtain {position:absolute; top:0px; left:0px; display:block; width: 100%; height: 100%; z-index:9000;}
This is a known issue in IE with positioned elements.
The most common solution is to set the element's background property.
If you need the background to remain transparent, you can simply use a transparent image as a background tile. Alternatively, you can set the element's background to an image that does not exist.
For example:
#screencurtain {background:url('transparent.gif') repeat;} /* 10x10 gif image */
/* OR */
#screencurtain {background:url('some-made-up-image.gif');} /* bogous path */

Categories