so apparently there is an issue regarding hover state of an element in tablet view.
I have made a sample where I have a position-fixed header, inside of it there is an element that can be hovered and will show dropdown content. I'm using additional class to show the dropdown content. Dropdown content will be shown on mouseenter and hidden on mouseleave or when window is scrolled like so:
$('.custom-dropdown').on('mouseenter', function(){
$(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function(){
$(this).children('.dropdown-content').removeClass('active');
})
$(window).scroll(function () {
document.activeElement.blur();
$('.custom-dropdown').trigger('mouseleave');
});
Here is the sample: https://jsfiddle.net/tja9scg4/
This works fine in desktop mode using mouse interaction, but the problem occurs only when using tablet view (I use Chrome's developer tools to replicate this).
So in tablet mode, if you click on the 'Hover Me', the dropdown content will show. Now try scrolling it and that should hide the dropdown content. But when you click on the 'Hover Me' again, it won't show. I think this happens due to the 'Hover Me' element that is still focused.
So I wonder if anyone can help me on this? Thanks in advance.
Thanks for the help,
I decided to add click event so the dropdown will always show regardless the hover state. Here's the code:
$('.custom-dropdown').on('mouseenter', function () {
$(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function () {
$(this).children('.dropdown-content').removeClass('active');
}).on('click', function () {
$(this).children('.dropdown-content').addClass('active');
});
If anyone has the best practice, feel free to share. For now, I think this will work fine..
Related
first of all i'm no js expert,and all my know how,is from web and mainly from here.
I code a js (jquery) which is based on aion MMORPG and shows tooltips related to the item-id or what else can be found ingame. I came across several hurdles while creating this,and solved one problem after another.right or wrong, my knowledge can not decide this.but all the code works.
What I can not solve is a mouseout if you touch the on IOS devices.
android devices seems to work great,but i'am unable to solve it for IOS.
the tooltip disapears on -touch but the link has still a hovered state on IOS.
first touch opens tooltip second touch the href link.
i want the second touch on body should reset the href link an next touch should open tooltip again.
and maybe a js guru can give me some hints how i can code this a little smaller.
i made this
(DEMO)
$(document).on('touchstart', function() {
detectTap = true;
});
$(document).on('touchmove', function() {
detectTap = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") detectTap = true;
if (detectTap) {
TT_Item_wegmachs();
}
});
and hope for any solution.thx
i found temp solution that helped me,to get IOS mobiles loose hovered on focused element state on body tab.
on "touchstart" i add class to "body" with "cursor:pointer;".
now if i tab on body elswhere,the hovered element on IOS mobiles becomes a "mouseout".
and after that i remove class from "body".
Nevertheless I am happy about better answers
I have an overlay div that fades in on scroll and out on scroll up. Works fine. My users gets annoyed by this div when entering text in forms, it sometimes hides the send button.
Therefor I try to hide it with JS when input on focus. Works like a charm on desktop but fails bigtime on mobile due to the fact that the keyboard, when popping up, also moves the content. It therefor triggers the scroll event making the visible again.
I wonder how that can be solved in the neatest of ways, any example from my snippet below?
$(window).scroll(function(){
if($(this).scrollTop()>800){
$('.symo').fadeIn()
}else{
$('.symo').fadeOut()
}
});
$('form').delegate(':input', 'focus', function() {
$('.symo').hide();
})
.delegate(':input', 'blur', function() {
$('.symo').show();
});
Here is a working snippet, got rid of the delegate stuff as well.
Thanks!
$(window).scroll(function(){
if($(this).scrollTop()>800 && !$("input,textarea").is(":focus")){
$('.symo').fadeIn()
}else{
$('.symo').fadeOut()
}
});
The code below works fine for my toggle menu in responsive mode. But as I go back to desktop view once I press click outside the nav bar it's slides up? How do I prevent the slide up from happening in desktop view? I only want the slide up to work in responsive mode, once the user clicks outside the menu to disappear. I've been trying find solutions to prevent this from happening, but I can't fix the problem. Please could anyone give me advice. Thank you.
$(document).ready(function () {
$('span.responsive-menu').click(function () {
event.stopPropagation();
$('ul.nav').slideToggle(); // Toggle Menu
});
$(document).click( function(){
$('ul.nav').slideUp();
});
You could check the window width, and only apply the JS if it is on mobile:
$(document).click( function(){
if($(window).width() < 1025 && $('span.responsive-menu').css("display") === "block" ) $('ul.nav').slideUp();
//1025 will select an ipad and smaller then it. You can, of course, change the number for whatever you need
});
I'm using angular.js to build my website, and I have an element that MOUSEOVER event is supposed to show the navbar, and on mobile, clicking on that element, supposed to show the navbar + the menu.
These two events conflict.
Any ideas?
//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
angular.element('#navbar').stop().fadeIn();
btnState.setPosition(1);
// navbar fade out by mouse out of button
angular.element('.menu_hamburger').one('mouseout', function() {
btnState.setPosition(0);
});
});
//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
angular.element('#navbar').finish().slideDown();
btnState.openMenu();
});
i finally used this:
var isTouchDevice = 'ontouchstart' in document.documentElement;
and i had a variable that checks for touch screen ability, without adding Modernizr.
If you are able to use Modernizr (js library for checking HTML5 stuff), then it provides the best method for checking if a client is mobile or not. You can do this in pure javascript too I think, but after countless tries I gave it up:
By using Modernizr.touch, you can see if the device is touch capable or not. Touch screens are quite unique to phones and pads, but unfortunately also laptops which have touchscreens (not many of these thank God).
So then the code would be like this:
//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
if(Modernizr.touch) {
return;
}
angular.element('#navbar').stop().fadeIn();
btnState.setPosition(1);
// navbar fade out by mouse out of button
angular.element('.menu_hamburger').one('mouseout', function() {
if(Modernizr.touch) {
return;
}
btnState.setPosition(0);
});
});
//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
angular.element('#navbar').finish().slideDown();
btnState.openMenu();
});
So, if its mobile and the mouseover and mouseout fires, then it just returns before executing anything - just the way you want.
Modernizr can be found at http://www.modernizr.com/
I have this menu http://jsbin.com/useqa4/3
The hover I think works correct, but what I want is the normal: when the user's cursor isn't on the "Solution" item or on the submenu then I want the div #submenuSolutions to return in "display:none".
How can I achieve this?
If you read the jQuery api more carefuly you will see that the hover function can take handle two events http://api.jquery.com/hover/
$("document").ready(function() {
$("#menuSolutions a").hover(function () {
$("#menuSolutions").addClass("menuHover");
$("#submenuSolutions").show("3000");
},function() {
$("#menuSolutions").removeClass("menuHover");
$("#submenuSolutions").hide("3000")});
});
This will work only if your menu is a suckerfish menu.
See Demo
Just added this code to hide it back when mouse leaves it:
$("#submenuSolutions").mouseleave(function(){
$(this).hide();
});
Since submenuSolutions is the id of your panel, you can use the mouseleave event which triggers when mouse leaves the area of element specified.