[Pro] Cool Effect??

Freeway
1

Is it at all possible to create the same affect they use to show their number when you rollover the icon in the top right corner, in freeway? http://www.rareview.com/

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

2

You could probably achieve that with ScriptyAccordion

David

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

3

A quick example http://www.deltadesign.co/examples/phoneover.html

Their method uses CSS styling to display different parts of a sprite image.

D

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

4

Thats great, is there any other way to make it go back into its self?
If there is not, could you tell me how to create it please?

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

5

Here’s a quick example of how you could do this using just CSS (with a bit of WebKit transition fun thrown in to make it animate in Safari, Chrome etc);
http://www.freewayactions.com/test/phone/
Regards,
Tim.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

6

That is what I was looking for, thank you very much Tim.

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

7

So I can not figure out how you created this. I know you have included a FW file but it does not seem to be helping me because FW does not even show that you are using a Action on the Iamge.

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

8

Hi Nate,
No Actions, just some specific CSS styles that change the image width and opacity. First of all you’ll notice that the item (called ‘phone’) is a regular layer with a background image applied to it. This is the full image of the phone icon with the phone number but because the layer (div) is only 34 pixels wide only the phone icon is displayed.

In the styles dialog (Edit > Styles) I’ve created two named styles; one for #phone that defines the layer’s default opacity and transition effects and the second #phone:hover which styles the item when the user mouses over the item. This essentially forces the div to full width (156 pixels) and sets the opacity to 100%.

I fully understand that the technique isn’t as Freeway-friendly as it could be and requires a bit of thinking about to reproduce but it does, at least, demonstrate how little markup you need to achieve an effect like this. If you get totally stuck I can look at rolling this into an Action but I suspect it will have limited use outside of this example unless it became all encompassing and multi-featured which in itself may be a tough one to crack.

Anyway, let me know if you would like anything explained about the example as it currently stands.
Regards,
Tim.

On 13 Jul 2011, at 18:12, Nate wrote:

So I can not figure out how you created this. I know you have included a FW file but it does not seem to be helping me because FW does not even show that you are using a Action on the Iamge.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

9

Thank you. I got it to work properly, although it does not preform correctly in firefox, but it still functions.

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

10

I’m pretty sure that Firefox doesn’t do CSS3 transforms, that’s pretty
much restricted to WebKit browsers like Safari and Chrome. This is a
good example of what’s called progressive enhancement. The effect
works at a basic level, but works better in a browser that supports
CSS3. It’s important to realize that IE < 9 (and I’m not sure even 9
supports this) will honor the :hover state on anything besides an A
tag (hyperlink). So on IE, you won’t ever see the number.

Walter

On Jul 13, 2011, at 3:40 PM, Nate wrote:

Thank you. I got it to work properly, although it does not preform
correctly in firefox, but it still functions.

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

11

Don’t forget that iOS devices won’t see the hover or number ( i.e. the one I’m using now)

David

On 13 Jul 2011, at 20:48, Walter Lee Davis email@hidden wrote:

will honor the :hover state on anything besides an A tag (hyperlink). So on IE, you won’t ever see the number.

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

12

What happens when you click the phone symbol? On many :hover cases I
have seen, whatever was going to happen on hover happens on the first
touch, and whatever was going to happen on click happens on the second
touch.

Walter

On Jul 13, 2011, at 3:54 PM, David Owen wrote:

Don’t forget that iOS devices won’t see the hover or number ( i.e.
the one I’m using now)

David

On 13 Jul 2011, at 20:48, Walter Lee Davis email@hidden wrote:

will honor the :hover state on anything besides an A tag
(hyperlink). So on IE, you won’t ever see the number.

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

13

Nothing on this iPhone

http://www.freewayactions.com/test/phone/

David

On 13 Jul 2011, at 21:02, Walter Lee Davis email@hidden wrote:

What happens when you click the phone symbol

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

14

Nothing on this iPhone

For iOS you could insert an empty graphic box with a link applied to it to take you to a contact page.

As I have done at http://www.deltadesign.co/examples/phoneover.html

D

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

15

it does not preform correctly in firefox

You need to add the mozilla specific css attributes as well

-moz-transition-property:all
-moz-transition-duration:0.4s

D

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

16

Thanks for the feedback on this so far. Although I don’t really think this is production grade at the moment (because of the use of vendor specific styles etc) I’ve reworked this into another example that should hopefully work a bit better;
http://www.freewayactions.com/test/phone2/

Here’s what I’ve changed;

  • The image is wrapped in a link which should mean the hover pseudo class should work in IE,
  • I’ve added David’s Mozilla styles so the transitions should work in Firefox as well now - thanks for those David

Issues:

  • The CSS still uses vendor specific styles so won’t validate
  • The layout uses a clear GIF image to wrap the anchor around and the main image in the background as before. This leaves the design view in Freeway somewhat bare.
  • The background image for the link has to be uploaded using an Action as Freeway is unaware that it is being used.
  • Extra styles applied to the link aren’t ideally placed

I’d be interested in hearing if this is any better than the first example on any iOS device. I suspect it will be exactly the same but if anyone gets a chance to have a look please let us all know.

All the best,
Tim.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

17

That works fine on my iPad but you get the same as I had on my original using the accordion ie. it stays open after clicking.

I suppose that is the limitation of a touch screen unless you use an iOS specific hack maybe to change it to a click event?

D

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

18

I don’t suppose we should forget Opera.

-o-transition-property:all
-o-transition-duration:0.4s

D

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

19

Thanks! The sooner these make it into a core set of styles the better. Although these vendor specific styles will work they add to the code and, more importantly, won’t validate.

I’m wondering how these transitions could be rolled into an Action that allows users enough scope to do what they want but without the Action interface becoming like a flight deck of controls. It would be nice to be able to do this sort of stuff in a more Freeway-like fashion.
Regards,
Tim.

On 14 Jul 2011, at 00:34, DeltaDave wrote:

I don’t suppose we should forget Opera.

-o-transition-property:all
-o-transition-duration:0.4s

D

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

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

20

Tim, is it possible do the test/phone effect requiring the user to click instead of hover to reveal the hidden content?

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