CODEWITHSUNDEEP
htmlmobile-safarianchor
user1400854
user1400854

Reputation: 297

ipad/iphone functionality issue

I have the following html mark up that works in all browsers but when viewed in iPhone / ipad, the drop down list will not open.

The reason for using an empty anchor tag was to keep styling the parent link the same way as the rest of my menu links due to my current css rules; but at the same time prevent the parent link to redirect the page.

Is this a very wrong approach and the cause to the issue I am experiencing?

<ul class="primary-nav">
   <li><a>Group links</a>
    <ul id="sub_nav" class="sub">  
    <li><a href="/">Link</a></li>  
    <li><a href="/">Link 1</a></li>  
    <li><a href="/">Link 2</a></li>  
    <li><a href="/">Link 3 </a></li>
    </ul>
   </li>
  </ul>

I can see there is the following javascript in place for the menu

    // Test is browser is IE
    var browserIsIE = null;
    if (jQuery.browser.msie == true) {
        browserIsIE = true;
    } else {
        browserIsIE = false;
    };
 // primary and secondary nav hover for IE < 9
    if (browserIsIE == true) {
        $(".primary-nav li, .secondary-nav li").hover(function () {
            $(this).addClass("hover");
        }, function () {
            $(this).removeClass("hover");
        });
    };

Thanks for your help.

Upvotes: 0

Views: 379

Answers (2)

DA.
DA.

Reputation: 40673

The problem is you are watching for the hover event. There isn't a hover event on mobile devices. There's no cursor and, as such, no way to hover.

The browser will attempt to handle it, though:

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

But your best option is to design things to account for the fact that the mobile users can't hover and instead watch for things like touchStart.

Upvotes: 0

boz
boz

Reputation: 4908

The main problem is when browserIsIE evaluates to false, nothing will happen. The if statement requires it to be true before it attaches a hover event handler to your drop down menu.

Once you fix that, you will quickly realise that you can't hover on touch devices. This post https://ux.stackexchange.com/questions/14257/re-thinking-hover-functionality-with-touchscreens-in-mind covers some nice ideas you could implement.

Upvotes: 1

Related Questions