- This topic is empty.
March 8, 2011 at 2:58 am #31932
I found this slightly old, but excellent tut on CSS-Tricks yesterday (https://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 #56097realifeMember
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 #56098
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.
CheersMarch 8, 2011 at 10:14 am #56106SirlonMember
You can ceck if the client is a mobile device and don’t execute the plugin:
That will not help you to get it work but deactivates it.March 8, 2011 at 11:08 am #56107JohnnybMember
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 #56067
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!!
- The forum ‘CSS’ is closed to new topics and replies.