CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1617218
user1617218

Reputation:

Menu not animating on Ipad

I´m working on this website:

The navigation works well on mac chrome and other browsers.

For example if you click on Blog, it goes to blog and hides the menu after you leave the mouse from it.

The problem is that on Ipad and Iphone the menu keeps open always, any ideas why?

This is my code for animation:

    function Main_menu() {
        _menu = this;
        _menu.pw_protected_target = '';
        _menu.container = $('#header');
        _menu.logo = $('#logo');
        _menu.menu = $('#menu');
        _menu.form = $('#login');
        _menu.form_input = $('#form_input');
        _menu.form_submit = $('#submit')
        _menu.container.bind({
            'mouseenter' : _menu.open,
            'mouseleave' : _menu.close
        });
        _menu.form_submit.bind('click', function(){
            _menu.authenticate(_menu.form_input.val())
        })
        $('.tt').bind({
            'mouseenter' : function(){
                $('.tooltip')
                .addClass('fade in')
                .css({
                    'top' : $(this).offset().top - 5,
                    'left' : $(this).offset().left + $(this).width() + 10
                })
            },
            'mouseleave' : function(){
                $('.tooltip')
                .removeClass('fade in');
            }
        })

        $('.tt_shop').bind({
            'mouseenter' : function(){
                $('.tooltip_shop')
                .addClass('fade in')
                .css({
                    'top' : $(this).offset().top - 5,
                    'left' : $(this).offset().left + $(this).width() + 10
                })
            },
            'mouseleave' : function(){
                $('.tooltip_shop')
                .removeClass('fade in');
            }
        })
    }

Upvotes: 1

Views: 60

Answers (1)

nirazul
nirazul

Reputation: 3955

Have you attached the mouse correctly on your iPad? :)

There are no 'mouseenter' or 'mouseleave' events on touch-devices. Unfortunately jQuery core has no touch events. You could use some of the proposals I found in this thread:

How to recognize touch events using jQuery in Safari for iPad? Is it possible?

I think in your case it would be best to change the behaviour of your menu to toggle show/hide the menu on touch.

Upvotes: 1

Related Questions