How to initiate touchscreen on page load - javascript

I have a menu that uses hover to display submenus on a desktop. It seems with touchscreen devices the menu focus doesn't get initiated until after another element is touched (focused) first. When I touch the menu item to display the submenu, the menu item shows selected but the submenu doesn't display. If I take the focus off by touching another page element, such as an image or form field, and then touch the menu item a second time, the submenu works as expected. It will also work if I focus on a form element first and then the submenu. I have :hover, :focus, and :active all in my CSS but it seems to ignore the first focus/active. Is there a JQuery method to force the touchscreen device to initiate focus as soon as the page loads? Is there another solution to this problem?

From my experience, depending on css status is not enough to do what you are looking for here. It will either only work on desktops or only on mobile. Instead I would use the javascript ontouchstart event (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) for this.
Assuming your css looks something like this:
.your-hoverable-class:hover .submenu{
display: block;
}
You can move that :hover state onto a class of its own (.is-hovered), like:
.your-hoverable-class.is-hovered .submenu{
display: block;
}
Then you can perform the state toggling like this with Javascript (ES6)
const hoverableElem = document.querySelector('.your-hoverable-class');
hoverableElem.addEventListener('touchstart',(event)=>{
event.target.classList.toggle('is-hovered')
});
Now the user can "tap" on that element if they are using a mobile device. the :hover css works quite well with mouse, so you may want to keep the :hover toggling as it is too. Otherwise, you can just use the onmouseover and onmouseout events like above if you want to stick to a pure javascript solution.

Related

Trigger ('mouseleave') - not working as desired on mobile

I have a burger menu button in the header which opens and closes the menu. And I have hover and focus animations for it.
So when the menu is clicked or tapped or touched (on mobile devices) - the second time it loses the hover and focus styles. Everything in the code below is working perfectly, but the trigger mouseleave isn't working. I tested my code and found out that on mobile devices when a person clicks on a button, hover animation applies there too. So trigger mouseleave should cancel the hover effects I have on my burger menu button, but it isn't working.
I have tried everything: I have put this in setTimeout function and tried other different events, too (like testing it out in different browsers). Yet nothing seems to remove that hover animation on mobile devices when a user touches or clicks this burger menu button. Please help, as I have been stuck on this for two days.
//losing focus for menu toggler on smaller devices
var loseFocusMenu = 0;
$(".c-header-nav__toggle").on("click touch", function(){
if (loseFocusMenu === 0){
loseFocusMenu++;
}else if(loseFocusMenu === 1){
$(".c-header-nav__toggle").trigger('mouseleave');
$(".c-header-nav__toggle").trigger('blur');
loseFocusMenu--;
}
});
I am developing a Wordpress theme, so I am using that platform (and obviously that's jquery in the code). Please help
Also that hover and focus animations are coming from internal styling in the style tag and coming from another class that's assigned to the same burger menu button
i solved the issue with adding and removing classes. if your hands are tied and u can't do it any other way like in my case than this is the work around

Retain hover style while navigating HTML select element's drop-down menu

I have an HTML select item that changes style when you hover over it. However, in Chrome on Windows, this effect stops when you navigate through the select drop-down menu and off of the original location. (This issue is not apparent in Chrome on a Mac because that uses default colors.) How do I get the select drop-down menu to continue to trigger hover while the user is navigating it?
Here's a fiddle.
This question looks helpful for li drop-down menus, but I couldn't figure out how to apply it to the select element.
try adding this
select:focus{
background-color:green;
color:blue;
}

How to inspect animation of an HTML element?

I want to see the CSS transition or JavaScript/jQuery animation assigned to a particular element. How should I do it in Chrome DevTools or any other developer tools?
For instance, I visited a Google plus page and I noticed that when I hover on an image it grays out, zooms in and a close button appears in the corner.
Normal:
Hover:
How can I see the code behind this behavior?
Right click on the html elements in elements tab and select :hover options. Now you can see the hover css applied to the particular elements in right-hand side styles tab. Pls refer screen shot
For css transitions, its easy to spot when using the chrome dev tools.
Just right click on the animation you want to view bring up the inspector. Change the state of the element to hover and you can view all the css for the hovered element.
For javascript, you can use the Resources tab in the chrome dev tools to view what scripts fires.. Just go through it.
For your effect.. its most probably Javascript.
they will register a Hover event. a hover event can be added by various methods
in CSS
#someId:hover
{
color:red;
}
in Jquery. $('#someid').hover();
via Unobtrusive jquery. they will attach events in unobtrusive manner
now check for the view source for this method. some where they will attach the events.
There is no easy way with JavaScript as far as I know, but the following is my favorite answer and method when I'm working on css in Chrome., you can force states and inspect hover css etc.
https://stackoverflow.com/a/6778547/941896

CSS buttons for touch devices?

I'm building a site and have lots of buttons, problem is, if i only add the .active state to the button, nothing shows on the button, and if i add a hover state, then at least one button shows a pressed state when loading the site, and if i click on another button it will always be in hover state. Is there a way around this?
Best
You can achieve this on a touch device by binding the touchstart / touchend events using javascript.. Check out BGerrissen's answer

Watermark label positioned over top of select stops click propagation

I've created a watermark/hint solution for a drop down where I absolutely position a label over top of a select element.
Unfortunately, when the user clicks where the label is, the drop down doesn't open - obviously the click is being blocked by the label. Is there any way to have it so when a user clicks on the label, the drop down is opened? I understand you can't open a dropdown via javascript but can you do something like hide the label when the click fires?
Edit: Creating a custom drop down like gmail does on their dropdowns is not a viable option.
CSS can handle that: add pointer-events: none to the label.
That's supported in all modern browsers.. except for current versions of IE (and Opera), so you'll still unfortunately have to use JavaScript.

Categories