[Pro] Hover.css Not Working on Mobiles

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.

Thanks
Dave

www.stundesign.co.uk/dartandness


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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 }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

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.

Thanks
Dave

www.stundesign.co.uk/dartandness


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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.

But how come if you try the transitions on the Hover.css - A collection of CSS3 powered hover effects site they work on my iPhone in all browsers?

Thanks
Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Good point. I’ll need to check. They might using jQuery/javascript

See here for many with the same issue…
https://www.google.co.uk/search?client=safari&rls=en&q=:hover+not+working+on+iOS&ie=UTF-8&oe=UTF-8&gfe_rd=cr&ei=PhXnVfn2Ba_j8we74KjgAw

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 Hover.css - A collection of CSS3 powered hover effects site they work on my iPhone in all browsers?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

OK cool although following the instructions for hover.css there’s no mention of JQuery or javascript.

Thanks
Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Select the Div that you have applied the class to and use the Html5 Block link action to add an empty link ie #

<a href="#"><div id="item1" class="hvr-bounce-to-bottom"></div></a>

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

Have a look at http://www.softpress.com/kb/questions/121/Prevent+Rollovers+with+no+Links+from+Jumping+to+the+Top+of+the+Page

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

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:
https://freewaytalk.softpress.com/person/options

Is there an action to add to the body tag in Freeway?

Page>Extended Then add the name/value pair of ontouchstart/ (that’s a space character in the value section)

Very interesting find David O

It also means that the effect disappears no matter where on the screen you touch.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options