Hi guys
I was just wondering if anyone knew how to create one of those interactive main images like Softpress has on their own homepage, http://www.softpress.com/ , or one of those images where the user can select the different boxes for different segments.
Is it somehow to do with the Carousel action or is there more involved? I’d love to do one for my own site.
Thanks.
Steve.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I was just playing with the carousel action today and this looks exactly like it - minus the arrows, and using custom text boxes instead of tabs - of note - the images above are clickable links as well.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks iGirl, I’ve been playing with it too. Each of the buttons at the bottom is a Carousel Tab rather than a Button, so it’s quite easy!
I’m interested to know now how to get the boxes with the sliding text like in the text boxes next to the interactive display. The one’s that say things like ‘Visual Design for the web’ etc.
Anyone lend a hand?
Thanks again 
Steve.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Steve,
This is a standard CSS Menus item that I extended to animate the hover
margin transition using webkit easing animations;
Here’s the CSS style that eases the margin adjustment when the menu
item is hovered over;
#fwNav2 .fwNavItem a, #fwNav2 .fwNavItem a:hover { -webkit-
transition:all 0.5s ease }
I’ve put together a sample Freeway 5 Pro document that contains some
examples of the CSS Menus action including this menu from the
Softpress home page.
Currently the file contains examples of an Apple styled menu, an eBay
themed one, the Softpress one and a couple of ones that are still work
in progress (they need a little bit of work still!). 
Download it here and give it a spin;
http://www.freewayactions.com/test/CSSMenuExamples3.zip
Enjoy!
Tim.
On 16 Feb 2010, at 23:43, Steve Wright wrote:
I’m interested to know now how to get the boxes with the sliding
text like in the text boxes next to the interactive display. The
one’s that say things like ‘Visual Design for the web’ etc.
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
Thanks Tim, you wouldn’t believe how helpful that actually is. Amazing.
This way I can look at the different things you’ve done with the CSS and learn from it.
This program and the people that help out with it are amazing. Thanks.
Steve.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for the file Tim - it is very helpful in understanding how these work, being able to disassemble them. I had a suspicion it was somewhat like the CSS3 Rollover action… Is it possible to apply this to a list of graphic items (custom font or icons) as opposed to text only lists?
My guess is probably not - but it can’t hurt to wonder.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You can apply these transition effects to anything that changes state.
The CSS3 rollover example I created last year (http://www.freewayactions.com/test/css3-rollovers/
) does pretty much the same sort of thing but spins the items rather
than moves them in a particular direction.
What is happening with the Softpress menu is that I’ve added a style
that extends the menu item’s left margin by 10 pixels when the item is
moused over. This uses a simple hover CSS pseudo style. The icing on
the cake is the easing that we add using the WebKit transitions which
tell the WebKit enabled browser (Safari, Chrome, OmniWeb [1]) to
animate the transition over a given time. The end result is that the
menus appear to glide rather than jump for these browsers.
As WebKit powered browsers make up a large percentage of our site
audience I think it is nice that we can employ technologies like this
to embellish the site.
I’m hoping to find some time to roll transitions like this into an
action so that you can easily add these to Freeway without having to
resort to adding custom styles.
Regards,
Tim.
[1] You can find a full list of WebKit powered browsers here; List of web browsers - Wikipedia
On 17 Feb 2010, at 02:39, igirl wrote:
Thanks for the file Tim - it is very helpful in understanding how
these work, being able to disassemble them. I had a suspicion it
was somewhat like the CSS3 Rollover action… Is it possible to
apply this to a list of graphic items (custom font or icons) as
opposed to text only lists?My guess is probably not - but it can’t hurt to wonder.
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
I remember seeing those spinning ones - very cool, but I do remember being disappointed on the web-kit compatibility. So out of curiosity I just went over to my husband’s PC and ran the SoftPress site as well as freewayactions/test/css3-rollovers to test these.
In IE and FF on PC the sliding text effect works (carousel too) - but the spinning icon does not, however it grows/highlights instead. So am I to assume then in browsers that do not support a certain function such as “spin”, there will always be some kind of ALT rollover to default back to so the user is not left without?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
There’s a growing body of opinion behind the idea that progressive
enhancement is a natural fit with eye-candy as well as Web2.0
interaction style.
The premise is that while the site may not LOOK as nice as possible in
a less-capable browser, it will still WORK completely. Missing out on
such niceties as soft shadows CSS3 Shadow - ActionsForge
or rounded corners CSS3 Corners - ActionsForge
doesn’t mean that the visitor using IE can’t see the content or act
on it.
Since giving up on a perfectly matchy-matchy experience between IE and
nearly every other browser on the planet will free up loads of your
time to improve the basic experience, this is almost always a good
trade-off in the larger picture. Further, if you choose to “dumb down”
your site to level the playing field for IE, you give up opportunities
that might improve the site for your better-shod customers.
Walter
On Feb 17, 2010, at 10:02 AM, igirl wrote:
In IE and FF on PC the sliding text effect works (carousel too) -
but the spinning icon does not, however it grows/highlights
instead. So am I to assume then in browsers that do not support a
certain function such as “spin”, there will always be some kind of
ALT rollover to default back to so the user is not left without?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The core effect is the image changing size when rolled over and you’ll
see this in all browsers. The Webkit enhancement is the spin effect
(in this case) and adds an extra level of polish to the page. Although
you do need to be careful not to add core functionality with
technologies like this here we are embellishing the base effect that
hopefully the majority of users will enjoy.
Regards,
Tim.
On 17 Feb 2010, at 15:02, igirl wrote:
So am I to assume then in browsers that do not support a certain
function such as “spin”, there will always be some kind of ALT
rollover to default back to so the user is not left without?
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
I have another question regarding this Tim, if it’s alright with you. I say ‘is it alright with you’ because this’ll probably come across as quite silly.
I’m having some trouble with making the carousel tabs like they are on Freeway’s homepage. The text is clearly selectable on the tabs of the Softpress homepage, but when I make a background for the tabs which is a GIF or PNG and then have HTML text on the top, then the rollover effect doesn’t work if you’re Mousing Over if you’re hovering above the text and the box isn’t clickable if hovering above the text, it only selects the text.
I’ve always created rollovers by simply going to the Rollover Action’s parameters and selected the images I want to use from there. What am I doing wrong?
Hope this makes sense.
Thanks again
Steve.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for this. I’m just stuck on one bit now trying these out on graphics only. I have several images inside a HTML box - but cannot apply CSS Menus to this as the items are not in a list. I’ve tried a carriage return between them, giving each one a differet (ordered) style - style1, style 2, style 3…but no joy.
How does one get graphics to be in a list? I’m sure it has to do with applying a style, then applying a list, but the manual isn’t clear to me.
The example file of the spinning effect would probably answer this as well.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The tabs on the Softpress home page use a sprite image that creates
the rollover effect. If you look at the following image you can see
the three states for the panel background; normal, rolled over and
active;
http://www.softpress.com/templates/Resources/carousel-tabs-arr.png
A simple line of JavaScript extends the standard carousel tab and
shifts the background image accordingly. You can find the markup here;
http://www.softpress.com/templates/Resources/tab-swapping.js
I suspect you can do this with the stock carousel action and would
imagine that you could make the text links block level items which
should force the panel swapping regardless of where the user clicks on
the tab. Feel free to send me a copy of your Freeway file and I’ll try
and add the functionality for you.
Regards,
Tim.
On 17 Feb 2010, at 16:43, Steve Wright wrote:
I have another question regarding this Tim, if it’s alright with
you. I say ‘is it alright with you’ because this’ll probably come
across as quite silly.I’m having some trouble with making the carousel tabs like they are
on Freeway’s homepage. The text is clearly selectable on the tabs of
the Softpress homepage, but when I make a background for the tabs
which is a GIF or PNG and then have HTML text on the top, then the
rollover effect doesn’t work if you’re Mousing Over if you’re
hovering above the text and the box isn’t clickable if hovering
above the text, it only selects the text.I’ve always created rollovers by simply going to the Rollover
Action’s parameters and selected the images I want to use from
there. What am I doing wrong?Hope this makes sense.
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
Create a standard text box and type in 1,2,3 on 3 separate lines.
Select the text and create a standard unordered list from these.
Select each of the numbers in turn and select Insert/ HTML Item. Now
select each of these HTML items and import your desired images into
each. Apply the CSS menus action to the outer text box, publish, and
start styling your menu as you want it to look.
I hope this helps.
Regards,
Tim.
On 17 Feb 2010, at 16:47, igirl wrote:
Thanks for this. I’m just stuck on one bit now trying these out on
graphics only. I have several images inside a HTML box - but cannot
apply CSS Menus to this as the items are not in a list. I’ve tried
a carriage return between them, giving each one a differet (ordered)
style - style1, style 2, style 3…but no joy.How does one get graphics to be in a list? I’m sure it has to do
with applying a style, then applying a list, but the manual isn’t
clear to me.The example file of the spinning effect would probably answer this
as well.
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
Ok Tim, I’ve had a go with this, but I’m really struggling. Is there any chance you could take a little look for me? I’d really appreciate it.
If you could let me know your email so I could zip it and send it along, I would appreciate it. Or you can email me at email@hidden
Thanks
Steve.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sorry I haven’t gotten back to the thread, but wanted to say thanks to Tim for this. I’ve managed to “list” the graphic items, but still no sliding effect. I copied all the parameters exactly from your Softpress example in the CSS Menus - what I think is missing, is applying the style -
Here’s the CSS style that eases the margin adjustment when the menu item is hovered over;
#fwNav2 .fwNavItem a, #fwNav2 .fwNavItem a:hover { -webkit- transition:all 0.5s ease }
I’m a bit lost on how/where to apply the style. In the example there is a .nav style…is it possible to copy/save that style and re-use it in other FW documents?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Take a close look at that Freeway document I posted as an example. If
you’ve just the one CSS menu on your page then the CSS to slide the
menu items will be;
#fwNav1 .fwNavItem a, #fwNav1 .fwNavItem a:hover { -webkit-
transition:all 0.5s ease }
(Note the one rather than two in the code).
Regards,
Tim.
On 21 Feb 2010, at 17:14, igirl wrote:
Sorry I haven’t gotten back to the thread, but wanted to say thanks
to Tim for this. I’ve managed to “list” the graphic items, but
still no sliding effect. I copied all the parameters exactly from
your Softpress example in the CSS Menus - what I think is missing,
is applying the style -Here’s the CSS style that eases the margin adjustment when the menu
item is hovered over;#fwNav2 .fwNavItem a, #fwNav2 .fwNavItem a:hover { -webkit-
transition:all 0.5s ease }I’m a bit lost on how/where to apply the style. In the example
there is a .nav style…is it possible to copy/save that style and
re-use it in other FW documents?
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
Thanks so much again for this. In this case, clearly the .nav is an item level style - but in the style inspector I can’t figure out where the code can be seen/or is entered - I check in extended, but that’s not it.
I’m really not qualified to be mucking around with this, but really want to figure out how it’s done - even if I won’t use it for this project. Is there a tutorial for creating/editing custom styles somewhere? Back to rtfm meanwhile…LOL.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Solved! I finally found it under Page/HTML Markup. I’m a bit mystified however, as I thought this would be on a HTML item by item basis…but I won’t argue with success.
One more mystery now. I had a test list of 3 graphics - the first one is being given a light gray background which I did not add. The properties of the 3 different graphics boxes all appear to be the same.
I delete the first graphic box and it’s gone - the two remaining are fine. I insert a 3rd and the gray background reappears when adding another image. I delete and copy one of the others and place it in the 3rd’s place and it fine. I drag copy or import an image into that box and it turns gray. Strange.
I cleared the cache in between all this also.
I solved this by changing the layout from Vertical to Horizontal. It went away. I changed it back and it was gone as well. hmmm
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi igirl,
On 22 Feb 2010, at 21:16, igirl wrote:
Solved! I finally found it under Page/HTML Markup. I’m a bit
mystified however, as I thought this would be on a HTML item by item
basis…but I won’t argue with success.
As with most things in life, and Freeway, there is often more than one
way to achieve the same goal. We could have added the extra CSS styles
using Freeway’s own edit styles dialog although the application is
very efficient as to the code is outputs. If it thinks it doesn’t need
a style, color or graphic on a particular page then the application
won’t generate the code for it.
As we are stepping in after the CSS Menus action has done it’s thing
and are extending these CSS styles Freeway doesn’t really ‘know’ what
we are up to. If we added the styles (as we might normally) with the
edit styles dialog then we’d need to use these somewhere on the page
for Freeway to publish them to the page. Adding the styles, as we did,
as markup steps slightly out of the normal Freeway workflow but avoids
the need to publish dummy content just to get the styles we need.
One more mystery now. I had a test list of 3 graphics - the first
one is being given a light gray background which I did not add. The
properties of the 3 different graphics boxes all appear to be the
same.I delete the first graphic box and it’s gone - the two remaining are
fine. I insert a 3rd and the gray background reappears when adding
another image. I delete and copy one of the others and place it in
the 3rd’s place and it fine. I drag copy or import an image into
that box and it turns gray. Strange.I cleared the cache in between all this also.
I solved this by changing the layout from Vertical to Horizontal.
It went away. I changed it back and it was gone as well. hmmm
Do you have an example of this page online somewhere that we can take
a look?
Thanks,
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