I am looking at how I can build the same sort of tabbed section as in the example but instead of text in the headings, using graphics which would change state/appearance when a tab is selected.
I tried a bit to modify the protaculous script associated with the existing one but its not progressing for me.
Whats the best way to achieve this within an inline setup?
Hello Richard ,
Many thanks for you quick response.
I guess I was too wrapped up in achieving this via protaculous to realise that there is an easier way to achieve this.
I shall get my head out of that space it was jammed in and get to work on this.
P.S.
I am a bit unsure as to the inference or relevance of the message in your image. Possibly unnecessary?
Thanks again for your input anyway.
All the best for now
freewaytalk mailing list
email@hidden
Update your subscriptions at:
On the example page there is a CSS menu which is as it should be. Also on the page is a tabbed section displaying the services offered by the business. It was this I wished to recreate for another site I am working on but using images instead of text to show the active tab.
The example site is one which is in need of revision. I am sure its not the only one on the web requiring this. It shall be done when the client is ready I am sure.
I hope that this explains things a bit? If not then I apologise.
get back to me when you can.
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Indeed.
I know what you mean although it is one of the curiosities of the online experience that so much business is done without people knowing any actual physical address or location.
A physical address was not something which at the time the client had which he could use due to his personal situation the details of which are not for me to divulge but suffice to say they were all entirely legitimate.
.
I had flagged it up to him and doubtless when the revision is done then it will be addressed literally!
Thanks for your input.
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hello again,
Just returning to this I guess I need to be clearer as to what it is I am seeking to achieve.
I am seeking to have graphical images in a menu which will highlight the selected tab by switching to an alternate version of the graphic. This would be the case, with different images, for each of the menu items.
I can put together a CSS menu no bother. I can do rollovers no bother. I can put together a menu where the submenus have graphics and the background changes.
But it is a menu or setup whereby the tabs contain graphics which switch depending on the state i.e. active or inactive. Is this any clearer.
The links which Richard so kindly directed me to did not contain the relevant insight to allow me to do this. Possibly now that I have explained it a bit more clearly then maybe a bit of guidance would be most grateful received. I am not looking for someone to do this but to learn how I can do this.
If I have missed an obvious solution somewhere then I apologise.
Many thanks
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
This can be achieved by - too bad - additional styles you will have to create to add some functionality to the already created styles created by the CSS Menus action. CSS Menus creates styles for a:link, a:hover, etc … also for the current page. You should add styles with exactly the same names to your own custom stylesheet where you add a background image for each state. A live example of your efforts (so far) could help us to point out what exactly has to be done to meet your expectations.
I suspect you want/need a graphic (icon?) in front of the menu-items?
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I wrote something up about this long ago with my Carousel Action. The key is to use a clear graphic button (to hold the shape and to provide a physical shape for the link to hang on). Then, because the graphic is clear, you can see through it to its background image. After that, it comes down to having a different background image if the tab is selected versus if it is not.
Walter
On May 19, 2016, at 8:25 AM, tonzodehoo email@hidden wrote:
I am seeking to have graphical images in a menu which will highlight the selected tab by switching to an alternate version of the graphic. This would be the case, with different images, for each of the menu items.
Okay, I just tried this using Freeway 7.1.3 and the Carousel 2 Action. A little warning – you will need to make some custom CSS styles, and you will need to be precise. Don’t be put off by the length of these directions. Freeway is easy to use when you want to do what it does, but when you get out and push, you can expect it to feel like swimming upstream until you get the hang of things.
Create an HTML element where you want the carousel effect to appear. For a start, just set a background color to indicate where the element is on the page.
Duplicate the element, and drag it off screen somewhere. Set it to a different background color.
Apply the Carousel 2 Action to the first element, and the Carousel 2 Pane Action to the second element.
Use the Graphic tool to draw a box on the page to act as your first tab. Don’t set any color or other attributes to it.
Duplicate it twice (the third instance will be the tool you use to make your background images for it).
Move the first two tabs into position, and apply the Carousel 2 Tab Action to each of them. It will help to have outlines on for this step (View menu) so that they don’t disappear when you deselect them. Make sure each tab is set to a different pane.
On your third graphic box, apply a background color to it, double-click inside it and type a word (Foo and Bar are traditional) in it. Use the text alignment tools (shift vertically a negative amount, center align) to place the word centrally in the tab. Click elsewhere and then single-click on the box so its corner handles appear.
File/Export and give it an appropriate name and file-type extension. Save this file somewhere you can find it later, naturally, preferably in the Media folder inside your project folder. You should export as GIF or PNG, never JPEG when there’s text involved.
Change the background color/font color and export again. Give this the same name and extension with an additional name segment so you can tell it is the “active” version for when that tab is selected.
Repeat these two previous steps with the other word. You should have something like foo-tab.png, foo-tab-active.png, bar-tab.png, and bar-tab-active.png when you’re done.
Click on your first tab, and note the exact content of the Name/ID field in the Inspector (case-sensitive). You may change this value if you like so it is something other than item234 or a similarly cryptic auto-generated value. You will note that Freeway will not let you name two things the same on the same page.
In the Styles palette, you will need to create four new “tag-only” styles.
Choose New Style from the cog menu, then click into the Tag field and enter the following precisely: #whateverTheFirstTabWasNamed a (# directly followed by the value from the Name/ID field for the first tab, followed by a space, followed by the letter a). Tab into the Name field and delete whatever Freeway has helpfully auto-entered. Finally, press tab again to ensure that it does not re-enter the auto-value when you save the style. Before you save the style, continue with the following steps.
Use the (+) menu to the right of Character to choose Background Image. Use the Image picker to locate the first tab’s normal image. Using the same picker, also choose No-repeat.
Double-check that Freeway has not entered a value in the Name field, and then press OK to save.
Repeat these steps for the second tab, substituting the correct ID for the second tab when you do.
Repeat all steps for the “active” form of the tabs, only this time, the recipe for the Tag is #whateverTheFirstTabWasNamed a.active.
In Freeway, the normal Design view will show empty boxes for the tabs. This is correct and normal. When you use either the Preview or Preview in Browser modes, you should see the correct graphics in the tabs, and they should automagically change when the carousel effect changes panes.
Walter
On May 20, 2016, at 4:44 AM, tonzodehoo email@hidden wrote:
Thanks for your inputs Richard and Walter.
It sounds like two possible solutions to create the same outcome?
If I may ask Walter if you had any further details as to how this can be achieved using the Carousel Action then that would be great.
I shall setup a sample of what I am looking to achieve shortly.
Update: I left out one ingredient in this part of the recipe, so you will need to modify the “normal” variants of the newly-created styles.
Use the Edit Styles option from the cog menu in the Styles palette. Click on your first non-active style, and when it loads in the right pane, click the Extended button. Click New, and in the left editing field, enter display. In the right field, enter block. Repeat for each additional normal style.
Walter
On May 20, 2016, at 11:06 PM, Walter Lee Davis email@hidden wrote:
In the Styles palette, you will need to create four new “tag-only” styles.
I may be missing something obvious here but it doesn’t seem to be functioning.
I think I have followed things through closely as you’d outlined but can see no action.
Would you mind having a look?
many thanks for now.
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hmm. See if you can get the basic effect working at all. I don’t see a working carousel on this page. I see an element that is named carousel but it’s in the wrong part of the page.
Walter
On May 24, 2016, at 10:40 AM, tonzodehoo email@hidden wrote:
I may be missing something obvious here but it doesn’t seem to be functioning.
I think I have followed things through closely as you’d outlined but can see no action.
Here’s a demo of what I mean. Look at the first page first (the button graphic on the right is a link to download the Freeway document). This is a basic carousel, with normal graphic buttons. They don’t change. The fancy page has yet another trick to make the buttons change color: I made the buttons transparent PNG images, and then changed the background color. Look in the Styles palette to see how that works. This will work with more fancy buttons, too, you just have to make the image semi-transparent, and then the background color can tint the more 3D button look.
Walter
On May 24, 2016, at 10:40 AM, tonzodehoo email@hidden wrote:
I may be missing something obvious here but it doesn’t seem to be functioning.
I think I have followed things through closely as you’d outlined but can see no action.
I have updated the sample with visible outlines of where things are.
I note that your demo is made of layered items where as I am trying to have such a setup in an inline setup. Is this where my attempt is malfunctioning?
How do I achieve the setup within an inline setup?
Also if there are, for talking sake, eight tabs rather than two I assume that the fancy setup would work? Its the altered states which I am keen to be able to incorporate and learn how to achieve.
I appreciate your time and patience.
Hope to hear from you soon
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
As this is the first significant foray for me into the challenges of inline setup then there is much to learn.
I have rethought the page content a bit and was wondering if this is the best way to achieve this or if there is something I need to do to make it better. http://cyca.org.uk/newsite/thebarn/activitiescopy.html
The rollovers are of course not inline so I am tweaking them into position for each breakpoint.
Is this the most robust way to achieve this effect?
Helpful insights are most welcome.
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Not yet.
I haven’t gone through all the breakpoint changes yet as I was wanting to check if this is the best way to achieve the effect.
If this is the best way to do so then I shall tweak things into place by resizing the rollover panels and repositioning the target layers to fit each size.
However if there is another better way to achieve the rollover/target setup then I am keen to learn.
Thanks for your input.
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at: