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/
Related
I am having a hybrid app and whenever I click on any DOM input the keyboard comes and it takes my footer also along with at its top. But I need that the footer is stuck always at the bottom. What is the best way to do it ? Also am using the below jquery but it doesn't works flawlessly. Also in this jquery, I need to skip some input boxes whose classname not equals to item . How to add this exception ? Also is there any other nice way out to accomplish this task ?
if ('ontouchstart' in window) {
/* bind events */
$(document)
.on('focus', 'input[type=text]")', function() {
$('.footer').css('position', 'absolute');
$('.footer').css('bottom', '');
})
.on('blur', 'input[type=text]', function() {
$('.footer').css('position', 'fixed');
$('.footer').css('bottom', '0');
});
}
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..
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
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've added Hammer.js events to an element on my site. They all fire correctly and everything is good, but an issue caught the eye of my designer. He noticed that when you try and scroll the page with your finger over the element, nothing happens. Unfortunately this is a game-breaker.
So my question is, how can you retain scrolling when using Hammer.js.
Thanks!
For anyone out there looking for a solution, here's what I came up with.
this.$hammer = $('img').hammer();
this.$hammer.on('touchstart', fingerDown)
.on('touchend', fingerUp)
.on('pinch', setScale);
function fingerDown(e) {
var fingersDown = e.originalEvent.touches.length;
if (fingersDown > 1) {
// Lock Scrolling over the zoom element by allowing Hammer.js to fire pinch events.
toggleHammerScrolling(true);
}
}
function fingerUp(e) {
toggleHammerScrolling(false);
}
function toggleHammerScrolling(shouldScroll){
//This is where your implementation may change. Just do .get('pinch').set... on your own hammer object.
this.$hammer.data('hammer').get('pinch').set({
enable: shouldScroll
});
}
function setScale(){
console.log('do pinching stuff here');
}