[Pro] Hover state for touch devices

I’m looking to doing something like you see on this website. On touch devices there are two states. The first is tap once and a hover state is revealed. Tap a second time and the link is activated. Has anyone done this with Freeway? I’m guessing this is javascript/jquery but I’m not sure. Maybe you have a neat trick that you came up with that creates a similar experience.

Thanks

http://www.insitudesign.com/site/?page_id=6


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

If you create a :hover style, MobileSafari and other mobile browsers will automatically map the first tap to the hover event, and the second tap to the click. You don’t have to do anything besides use CSS to set the hover style. Select the parent element of your object, and use the Styles tab of the Inspector, in the Links segment, to create a :hover style that does what you want. The rest is free.

Walter


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

All I want to do is show the image in the background of the div behind it on the first tap, and on then second the click.

See my page here: http://smartytest.com/Greek/index.php

Can you send me an example of the style?
Do I need to select something as a text effect?

Billy


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

Dave,
in the “a :hover style” what do I put in the extended attributes?

Billy


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

Are you able to tell me what the extended attributes are for the hover state? Example onmouseover, on click.


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

You don’t do anything like that. When you add styles to the :hover state in the Link Style dialog, you simply set whatever visual style you want the thing to have when it is hovered. You might want to change the background image behind the link, or you may want to change the link color or padding or size. That’s up to you. On mobile, you will see that hover appearance on the first tap, and the second tap will perform whatever behavior you set for the click – if it’s a link, then it will be followed as normal.

What you are referring to (onmouseover, onclick, etc.) are JavaScript events, not CSS. You would set those in a JavaScript file or script block in that page, and you would write a program in JavaScript that would tell the browser what to do at each of those events.

Walter

On Feb 27, 2015, at 4:22 PM, billy kimmel email@hidden wrote:

Are you able to tell me what the extended attributes are for the hover state? Example onmouseover, on click.


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