[Pro] Cool rollover effect. Can this be done, or mocked, in Freeway?

http://www.inclind.com/about/index.htm

^^ Check out this site, roll over one of the portraits and notice the cool effect. Is this CSS?, Javascript? Could this be recreated in Freeway? Ive been trying to look at the code on the page, but I can’t seem to find out how it’s done.


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

Looks like jQuery 1.2.6 - New Wave Javascript. If you disable js
you’ll see that the effect doesn’t fire. I don’t know if there’s a FW
action to do this out-of-the-box but it’s nothing that couldn’t be
added to a FW page. It’s just js after all.

Drupal-driven site too if I’m reading things correctly.

Todd


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

This is a helpful resource tool for finding things out about a sites technologies:

Visit http://w3techs.com/sites and pop in your url (example: inclind.com)

Nathan Garner

http://www.austinwellsdesign.co.uk

FW5 Pro | MacBook Pro | Snow Leopard

On 6 Jul 2010, at 01:25, Jordan Bradley wrote:

http://www.inclind.com/about/index.htm

^^ Check out this site, roll over one of the portraits and notice the cool effect. Is this CSS?, Javascript? Could this be recreated in Freeway? Ive been trying to look at the code on the page, but I can’t seem to find out how it’s done.


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

You could do something very near this in Freeway using the AttentionFX
Action. Create your graphic, and layer the HTML box with the caption
over it. Apply AttentionFX to the graphic, then set it to Slide Down
the HTML box on mouseover, and set the HTML box to be initially
hidden. Preview, and mouse over. The box should slide down. Now set
your HTML box to have a transparent background with the Graphic
Background settings, and your illusion should be complete.

Walter

On Jul 5, 2010, at 8:25 PM, Jordan Bradley wrote:

http://www.inclind.com/about/index.htm

^^ Check out this site, roll over one of the portraits and notice
the cool effect. Is this CSS?, Javascript? Could this be recreated
in Freeway? Ive been trying to look at the code on the page, but I
can’t seem to find out how it’s done.


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

Thank You, Could you provide a more detailed explanation, I’m excited to try this out.


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

Sorry, it’s transition fx, not attention. Draw a graphics box for your image, and import it and place it. Draw an HTML box the same size and use the style tab of the Inspector to add a 50% gray background to it. Enter your HTML text in this box. Position the HTML box directly over the graphics box. Select the graphics box (either use the site pane clicked over to page view, or use the option-click method to click through the HTML box until it’s selected). Apply the Transition FX Action to the graphics box, and set it to slide down the html box on a mouseover. Be sure to set the HTML box to initially hidden. Then apply the Transition FX Action to the HTML box, and set it to slide up itself on mouseover, without adding the initially hidden option. Preview and enjoy.

Walter


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

You can sort of do this using this caption footer technique

http://www.printlineadvertising.co.uk/demo/freeway/caption-footer/

If you apply a Transition slide down to the caption box either on a trigger or page load it pushes the top up to reveal it ~ not sure if JQuery is doing the same thing.

David Owen { Freeway Friendly Web hosting and Domains }

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

On 6 Jul 2010, at 16:21, waltd wrote:

Sorry, it’s transition fx, not attention. Draw a graphics box for your image, and import it and place it. Draw an HTML box the same size and use the style tab of the Inspector to add a 50% gray background to it. Enter your HTML text in this box. Position the HTML box directly over the graphics box. Select the graphics box (either use the site pane clicked over to page view, or use the option-click method to click through the HTML box until it’s selected). Apply the Transition FX Action to the graphics box, and set it to slide down the html box on a mouseover. Be sure to set the HTML box to initially hidden. Then apply the Transition FX Action to the HTML box, and set it to slide up itself on mouseover, without adding the initially hidden option. Preview and enjoy.

Walter


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

Like so…

http://printlineadvertising.co.uk/fw/reveal/

David Owen { Freeway Friendly Web hosting and Domains }

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

On 6 Jul 2010, at 17:29, David Owen wrote:

You can sort of do this using this caption footer technique

Untitled

If you apply a Transition slide down to the caption box either on a trigger or page load it pushes the top up to reveal it ~ not sure if JQuery is doing the same thing.

David Owen { Freeway Friendly Web hosting and Domains }

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

On 6 Jul 2010, at 16:21, waltd wrote:

Sorry, it’s transition fx, not attention. Draw a graphics box for your image, and import it and place it. Draw an HTML box the same size and use the style tab of the Inspector to add a 50% gray background to it. Enter your HTML text in this box. Position the HTML box directly over the graphics box. Select the graphics box (either use the site pane clicked over to page view, or use the option-click method to click through the HTML box until it’s selected). Apply the Transition FX Action to the graphics box, and set it to slide down the html box on a mouseover. Be sure to set the HTML box to initially hidden. Then apply the Transition FX Action to the HTML box, and set it to slide up itself on mouseover, without adding the initially hidden option. Preview and enjoy.

Walter


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


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

I’ve added a mouseover and a surrounding div to “turn off the effect” when mousing out of the area.

http://printlineadvertising.co.uk/fw/reveal/

David Owen { Freeway Friendly Web hosting and Domains }

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

On 6 Jul 2010, at 17:34, David Owen wrote:

Like so…

reveal

David Owen { Freeway Friendly Web hosting and Domains }

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

On 6 Jul 2010, at 17:29, David Owen wrote:

You can sort of do this using this caption footer technique

Untitled

If you apply a Transition slide down to the caption box either on a trigger or page load it pushes the top up to reveal it ~ not sure if JQuery is doing the same thing.

David Owen { Freeway Friendly Web hosting and Domains }

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

On 6 Jul 2010, at 16:21, waltd wrote:

Sorry, it’s transition fx, not attention. Draw a graphics box for your image, and import it and place it. Draw an HTML box the same size and use the style tab of the Inspector to add a 50% gray background to it. Enter your HTML text in this box. Position the HTML box directly over the graphics box. Select the graphics box (either use the site pane clicked over to page view, or use the option-click method to click through the HTML box until it’s selected). Apply the Transition FX Action to the graphics box, and set it to slide down the html box on a mouseover. Be sure to set the HTML box to initially hidden. Then apply the Transition FX Action to the HTML box, and set it to slide up itself on mouseover, without adding the initially hidden option. Preview and enjoy.

Walter


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


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

The last version did not work correctly. It needs a bit of work to make it toggle correctly but you get the gist.

http://printlineadvertising.co.uk/fw/revea

David Owen { Freeway Friendly Web hosting and Domains }

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


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

That’s nearly got it corrected, It’s a bit of a hack to get there using standard Freeway actions. (There is a surrounding div sent to the back to toggle the caption up and down that is some 20px bigger all round ~ moving the mouse too fast breaks the sequence)

http://printlineadvertising.co.uk/fw/reveal/

David Owen { Freeway Friendly Web hosting and Domains }

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


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

using walts method, how do I set it so that the HTMl caption slides down onmouseoff


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

of nevermind. Thanks! I got It working. But how do I add transparency to the HTML Box. ?


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

Click on the HTML box, then in the Item Inspector, look at the second
tab from the left (Appearance). If you have added a background color
using the top picker, set that back to None. Then open the Graphic
Effects segment of the Inspector, and click on the left-most lozenge
(Background). In the Background sub-segment below that, change the
background color to black, 50% opacity, or similar, and preview.

Walter

On Jul 6, 2010, at 2:34 PM, Jordan Bradley wrote:

of nevermind. Thanks! I got It working. But how do I add
transparency to the HTML Box. ?


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

Either add a png background image or use the freeway HTML box effects

David

On 6 Jul 2010, at 19:34, “Jordan Bradley” email@hidden wrote:

of nevermind. Thanks! I got It working. But how do I add transparency to the HTML Box. ?


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

Thanks!


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

code freak.

is your example still up and running? I cannot seem to get it exactly as the initial example.

Thanks.


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