^^ 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.
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.
^^ 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.
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.
^^ 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.
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.
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 }
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.
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 }
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.
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 }
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.
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)
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. ?