I’m trying to use one of the Hover.css transitions: Hover.css - A collection of CSS3 powered hover effects, and have it working fine for desktops but it isn’t working on my iPhone etc, except in OperaMini. The transitions work fine on the Hover site itself so it’s got be something I’m doing wrong in Freeway? All I’m doing is applying a style for the transition to the elements and uploading the required css file, should I be adding anything else via Markup or extended?
I’d be very grateful if someone could have a look at the code and see what’s going on please.
No, hover states won’t be working on iOS. It’s nothing you’re doing wrong. It’s not a big deal. What a user doesn’t know they won’t miss.
However If you attach a link those boxes you’ll probably find that an iOS user would have to touch twice to activate the link to move to the next page, which is more of an issue.
David Owen { Freeway Friendly Web hosting and Domains }
On 2 Sep 2015, at 14:37, Dave Dunning email@hidden wrote:
Hi
I’m trying to use one of the Hover.css transitions: Hover.css - A collection of CSS3 powered hover effects, and have it working fine for desktops but it isn’t working on my iPhone etc, except in OperaMini. The transitions work fine on the Hover site itself so it’s got be something I’m doing wrong in Freeway? All I’m doing is applying a style for the transition to the elements and uploading the required css file, should I be adding anything else via Markup or extended?
I’d be very grateful if someone could have a look at the code and see what’s going on please.
Hi David and thanks for your reply and I hear what you’re saying, I guess I’ll need to tweak the design a bit so as the boxes work as links whether the transitions is visible or not.
The reason for this is because unless you have a link you cannot have the pseudo class of :active which is the style which is used for the effect to show on iOS devices.
If you use a ‘real’ link then the chances are that you will be directed off the page before you see the :active state.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Dave thanks for your reply and yes that worked fantastic! Only issue now is that when I click on a box it jumps it to the top of the page like an anchor, any thoughts!?
To be honest I’m well chuffed that it’s working as well as it is as it was really an exercise in trying to get to grips with understanding and adding css to a Freeway site etc.
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
That did it, I swapped the empty link to the element itself for the empty javascript: link and hey presto no jumping to the top and the transition works fine too.
Thanks for all your help, and David O, I’ve learnt a lot going through this process and look forward to applying that knowledge to my next website.
Cheers
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Looking deeper into this. Interestingly retro adding ontouchstart=“” to the tag fires everything into working on iOS. This fixed a similar :hover :active iOS issue problem I had. It removed the need for a double tap (one tap for the hover state and one tap to activate the link)
Is there an action to add to the body tag in Freeway?
<body ontouchstart=“”>
~~~
David Owen { Freeway Friendly Web hosting and Domains }
http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk
> On 2 Sep 2015, at 15:39, Dave Dunning <email@hidden> wrote:
>
> But how come if you try the transitions on the http://ianlunn.github.io/Hover/ site they work on my iPhone in all browsers?
_______________________________________________
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Thanks David Just tried that and it works a treat, no need to add the empty link to the elements and cures the jump to top issue at the same time, brilliant!
Cheers
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at: