Icon Box on mobile

[ielbury]

Icon boxes do not appear to work well with mobile as there is no hover event … only click/touchstart. It would be nice if on mobile devices, you touched the box and it changed state.

Is there a way to make icon boxes work on a mobile device? Is there another metaphor like the icon box that works well with mobile?

I tried to add the code to add/remove the sf-hover class on click but as the hover/flip functionality is largely part of the style sheet so it’s not a trivial change.

Thanks,
Ian

[ielbury]

Forget this question … it is stuuuupid … another rat hole.

It does take too much trial and error to find these things out and then the regression to fix the places where you have used the metaphor. It would be nice if there were hints in the docs … maybe a wiki so the users could share their experiences?

The bottom line is the animated style does not work on IE or mobile devices! Pick one of the other styles as they work better on all devices/browsers.

[Swift Ideas – Ed]

Hi @ielbury,

Thanks for the feedback.

Unfortunately IE doesn’t support CSS3 transitions until IE10. We had a choice of either leaving it out, or leaving it up to the user to decide whether they would like to use it or not. If you’d prefer, we can provide some IE specific CSS to have them rotated as standard?

For mobile, it’s working here for me – if you tap it then it will rotate? I will try and add some extra JS functionality so that it stays rotated in the future.

– Ed

[ielbury]

Hey Ed,

I do not think animated icon box makes sense on touch devices because people don’t go around touching things to find out if there are hidden gems under elements. This is a mouse metaphor IMO the hover event allows people to find the hidden gems.

If I were you, I would not spend time on this as it doesn’t make sense … hence my stuuupid comment 🙂

Cheers,
Ian

[Swift Ideas – Ed]

No worries Ian, thanks!

– Ed