Grow your CSS skills. Land your dream job.

Colour fading menu with JQuery not working on iPhone or iPad – any ideas?

  • # March 8, 2011 at 2:58 am

    Hi All.

    I found this slightly old, but excellent tut on CSS-Tricks yesterday (http://css-tricks.com/color-fading-menu-with-jquery/) and had no problems building it into my site – it works fantastic on all desktop browsers, but I have a problem when navigating my site on the iPhone or iPad.

    Because these are touch devices they don’t do rollovers or rollouts :-( So every time I click on one of the buttons, it plays the fade in effect, I then have to click the same button again to actually go to the linked page.

    Does anyone have ANY ideas how to make it work on click on an iDevice?

    Thanks in advance for any suggestions – I am a bit of a newbie to JQuery, so please be gentle on the technical stuff :-)

    # March 8, 2011 at 3:32 am

    I think what’s you need is CiUI

    http://www.clientcide.com/cnet-js-standards/ciui-cnet-iphone-ui/

    # March 8, 2011 at 5:30 am

    Hi realife.

    Thanks for the suggestion, although this isn’t exactly what I’m looking for.

    I was hoping of finding a way to make the colour fading menu work on an iPad/iPhone as the site will mostly be visited by a desktop computer, with the occasional ios visitor.

    Any suggestions to make the colour fading effect work would be great, or something very similar.

    Would supply a link to the site, but its a bit confidential at the moment on request from the client.

    Cheers

    # March 8, 2011 at 10:14 am

    You can ceck if the client is a mobile device and don’t execute the plugin:

    http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

    That will not help you to get it work but deactivates it.

    # March 8, 2011 at 11:08 am

    Well the real question is how do you want it to work? You’re saying that when you effectively “hover” (initial quick click) on mobile devices that it runs the fade effect, then you have to click again to go to the link. So, if you don’t want to have to click twice to visit the link then when do you want the effect to run? You want the effect to run AND to go to the link all on one click?

    You could get that to work by capturing the href value of the link, then when you “hover” on the link it runs the fade effect, when the fade effect is finished you send the user to the href value that you stored for that link.

    # March 9, 2011 at 3:50 am

    Hi guys.

    Sirlon, thanks for the link and suggestion to possibly disable java, sadly there are other bits of javascript in the site, so disabling is not an option, but a helpful link for future reference.

    Johnnyb, I would ideally have liked the javascript to run as normal on a computer, but to ignore the rollover effect on an ios device and just recognise the click as a click and go to the href.

    But I think I’m asking too much. So I think I will create a mobile (touch) version of the site, without any rollover effects) and have some script to detect what device the visitor is using and redirect.

    Appreciate all you ideas though, thanks!!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".