0

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();
});
1
  • you should detect if this is a mobile browser and bind only the click event, mouseover on mobile is pretty useless
    – arieljuod
    Nov 2, 2014 at 13:50

2 Answers 2

1

i finally used this:

var isTouchDevice = 'ontouchstart' in document.documentElement;

and i had a variable that checks for touch screen ability, without adding Modernizr.

0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.