SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iPhone and iPad Hover Fix?

    I have used some CSS code that to develop a dropdown menu for a navigation bar. The CSS works great on a desktop, but fails on an iPhone or iPad due to the fact that those devices disable the hover pseudo class (http://stackoverflow.com/questions/2...one-ipad-users).

    So I have disabled the link on the actual button that displays the dropdown when hovered over, and simply added a new dropdown list item in the first slot that reads "overview" and goes to the same page that the button itself took you to.

    I have found a site that operates in a desired fashion at MonsterFollowUp.com. When you view the site on an iPhone, the "Support" dropdown button when clicked on displays the dropdown menu and when you click again on the "Support" button it goes to MonsterFollowUp.com » Support.

    Is it possible to alter the CSS on the site I am working on at Home » Anderson Media Corporation so that it would function like the Monster Follow Up site?

    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    but fails on an iPhone or iPad due to the fact that those devices disable the hover pseudo class
    Disabled? How do you "hover" on an iWhatever? You either touch it or you don't. It seems that's what MonsterFU did: they used click events with Javascript, while CSS does the :hover events (though, with Javascript off, their hover is horribly broken... I can't actually select anything in their dropdown). In the source they have Superfish.js which mentions something called "hoverIntent" but I don't know what that is.

    But I'll bet you can also look up TouchEvents, something Apple's been working on I guess.

    http://www.quirksmode.org/mobile/tableTouch.html
    This page may already be out of date.

    http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
    Touch events on Android.

    http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
    Getting started.

    I'm not sure if Monster's jQuery has touch stuff in there, or if they just went with their own thing... I did see a lot of browser detection in the Superfish script, so who knows, they may be specifically checking for iWhatevers.

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,069
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    Quote Originally Posted by Stomme poes View Post
    In the source they have Superfish.js which mentions something called "hoverIntent" but I don't know what that is.
    It's a technique that aims to cut down on hover animations. Basically if you move your mouse from point a to point b and the drop down menu happens to be somewhere along the path so you touch it briefly, it won't start the animation. Only when your an element for some time (something like 100ms or so probably) will it start to animate. That looks cleaner.

    http://cherne.net/brian/resources/jq...verIntent.html
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    In the source they have Superfish.js which mentions something called "hoverIntent" but I don't know what that is.
    hoverintent is a jquery plugin that applies "intention" to the mouse movement. If you mouse over a dropdown menu by accident it won't suddenly fly out. You need to move to the menu "with intent" i.e. slowdown as you approach the menu so that it looks like you are really interested in using it.

    It's cleverer than a simple delay and is supposed to make the menu more usable as you don't trigger the menu by accident all the time as with normal dropdowns.

    Edit:


    Remon got in there first


    Quote Originally Posted by Todd
    I have found a site that operates in a desired fashion at MonsterFollowUp.com. When you view the site on an iPhone, the "Support" dropdown button when clicked on displays the dropdown menu and when you click again on the "Support" button it goes to MonsterFollowUp.com » Support.
    When I view that monsterFollowUp.com site on my iphone emulator it shows a completely different site with no drop downs and a simplified layout. If I use the option to load the regular site then their dropdowns seem to work the same as yours.

    You have to click/touch to activate them and then they show. You just can't get rid of them.

    If you want to support the iphone then I would suggest using media queries and give it a redesigned (non dropdown) menu.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •