[Pro] roll over effect and ipad

Hey,

I am looking to get a rollover effect that works on ipad (like this, this site’s rollovers work on ipad http://www.kerrvernon.co.uk/). I’m currently building my site and have been using the built in RO effect. Would the CSS3 RO effect work? Any help would be greatly received.

A


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you don’t have any other effects on the same link, iOS browsers will map the ‘mouseover’ event to the ‘touchstart’ event. So as long as your link os only used to reveal something when hovered (but doesn’t actually navigate anywhere) the result is a graceful degradation of your design intent. But since iOS has no notion of a pointer, and therefore no mouseover event at all, you’re never going to have a pure translation of those sorts of effects where something is revealed after a mouse hovers, but another thing happens when the target is clicked.

Walter

On Apr 19, 2012, at 6:38 AM, dunlop1980 wrote:

Hey,

I am looking to get a rollover effect that works on ipad (like this, this site’s rollovers work on ipad http://www.kerrvernon.co.uk/). I’m currently building my site and have been using the built in RO effect. Would the CSS3 RO effect work? Any help would be greatly received.

A


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Cheers Walter.

My rollovers have a graphic that when rolled over reveals a preview image and links to a new page.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yeah, see there’s no pointer in MobileSafari, so no independent “rollover” is possible; just whatever would normally happen on a click. If you’ve hidden important information in the rollover that a user would need in order to decide whether to click or not, you really need to redesign your page if you want to cater to those users.

Walter

On Apr 19, 2012, at 7:25 AM, dunlop1980 wrote:

Cheers Walter.

My rollovers have a graphic that when rolled over reveals a preview image and links to a new page.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

any idea how this is done on ipad then? http://www.kerrvernon.co.uk if you dont have a pad, it works just as you see it on safari on your desktop,


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

These are just normal CSS rollover effects, and MobileSafari is behaving normally. The mouseover is remapped to the touch (since you can’t hover a touchscreen), but the link is immediately followed when you touch. I’m not seeing any sort of highlight unless I click, and of course once I click, the link is followed.

Walter

On Apr 19, 2012, at 7:37 AM, dunlop1980 wrote:

any idea how this is done on ipad then? http://www.kerrvernon.co.uk if you dont have a pad, it works just as you see it on safari on your desktop,


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

got it Walter. Cheers.

Alan


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I used regular rollovers, text rollovers and the target show/hide layer on my most recent site at http://www.flowersongherbals.com . They don’t work exactly the same on the iPad, of coarse, but I think they look good and are perfectly functional. Check out the site on your iPad and Mac and let me know if you have any questions about how I did it.

Thanks and good luck!
Doty

On Apr 19, 2012, at 4:38 AM, dunlop1980 wrote:

Hey,

I am looking to get a rollover effect that works on ipad (like this, this site’s rollovers work on ipad http://www.kerrvernon.co.uk/). I’m currently building my site and have been using the built in RO effect. Would the CSS3 RO effect work? Any help would be greatly received.

A


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options