I’m new and horribly inexperienced and need all the help I can get. I want to create a few simple thumbnails which then act as rollovers to bigger items giving more information, as in the Meet the Team section in the example. When you click on one of the people it gives you more information and the thumbnails shift down the page.
Can anyone out there help me?
On Sun, Sep 21, 2014 at 9:50 AM, cjl email@hidden wrote:
I’m new and horribly inexperienced and need all the help I can get. I
want to create a few simple thumbnails which then act as rollovers to
bigger items giving more information, as in the Meet the Team section in
the example. When you click on one of the people it gives you more
information and the thumbnails shift down the page.
Can anyone out there help me?
Thanks for this - but I’m not sure a sliding caption is what I want. It’s the idea of the rollover target item occupying more space on the page than the rollover itself, so that the rollover has to move out of the way, as it were.
It sounds like you are faced with the dilemma of How You Want It To Behave
vs. How You Want To Build It.
If I suggest you could use CSS to change a div item’s background image on
the div’s hover state, would you then decline in favor of an easier method?
There are a number of ways to get the effect you want, but I think it
important to choose which is more important to you - the effect or the
method of achieving it.
Best,
–
Ernie Simpson
On Sun, Sep 21, 2014 at 10:35 AM, cjl email@hidden wrote:
Thanks for this - but I’m not sure a sliding caption is what I want. It’s
the idea of the rollover target item occupying more space on the page than
the rollover itself, so that the rollover has to move out of the way, as it
were.
I think I’ll take any suggestions that will work. As I’m so new to Freeway I don’t have any fixed way of doing things. Apart from the fact that I seem to be fixed on getting it wrong. Any help you can give me would be great.
Yes, the example I gave was what I want to achieve. I think that the example you’ve sent - the Bully Show - isn’t the same because the text that appears when you hover over the image already has a blank space ready and waiting for it. What I want to happen is that you hover over an image and some new text/graphic appears and creates its own space, expanding the whole page. Does that make sense?
What I want to happen is that you hover over an image and some new text/graphic appears and creates its own space, expanding the whole page. Does that make sense?
Yes. However that is going to be a bit disconcerting for your visitor as the whole page layout shifts.
What is more it is going to even more tricky when viewed on a small screen/mobile device.
With the Target Show/Hide Layer action you can get the additional information to appear on top of existing content with disrupting the layout - altogether a better user experience.
Thanks for that, Delta Dave. I’ll try it out. Did you look at the Prisonharvests example? I though it was nice and simple and not at all disconcerting that the footer section got pushed down the page when the Meet the Team individuals were expanded.
The thing about the Scriptyaccordion action is that, judging from the link you sent, there has to be some blank space on the page ready and waiting for the extra information. This can be OK but sometimes from a purely design point of view it can also look a bit odd. That’s why I wanted to create new space and push the layout of the whole page downwards.
No, if you have designed your page using the in-flow construction, you won’t need to reserve space. The accordion will push everything below it down when it opens.
To get this to happen, double-click inside the HTML box that contains your other content. From the main menu, choose Insert / HTML Item. You will see a 100px square box in the text flow. Click once on it, so its handles appear, and drag it out to the width of the parent element. Double-click inside it and add your accordion’s headers and paragraphs.
Once you have added some content, you may change its height to “Flexible”, which will cause it to collapse to fit its content. Apply the Action to that inline box, and make your usual settings. The Accordion will push everything below it out of the way when it expands, even if you expand all of the headers at once.
Thank-you to everyone who tried to help. I think I might be beyond help. I’m now trying to do something incredibly simple - create three rollover thumbnails which target three pairs of images in a stack.
Here’s my problem: If I make my graphics something very simple like a block of colour with some text in it, happiness abounds. But I’d obviously like my website to be slightly more sophisticated, so I want images. But when I import images into the graphic target stack the whole thing goes into a crazy panic and starts throwing up blocks of colour that I never put there or shows one of the images in page load and refuses to show another image at all. It all seems a bit random. Is it something to do with the images I’m importing? If I just have one rollover and one target image (an imported jpeg) it’s all lovely. But more than one in the stack and it’s madness.
You’ve had a number of useful suggestions and hints, but in my opinion
most are best not attempted until you’re a little more used to using
Freeway. Here’s a suggestion that uses Freeway’s built-in actions and is
relatively easy to get used to:
MAKE YOUR LAYOUT ITEMS
Make some graphics as your rollover ‘buttons’.
Make some HTML boxes – all the same size, for simplicity – for your
info text. Give them a solid fill colour; white will do.
Optional: make an HTML box that shows before your rollovers/clicks are
triggered.
APPLY ACTIONS
Apply the Rollover action (Item > Actions > Rollover) to each button
graphic.
Apply the Target Show/Hide Layer action to each HTML box, except the one
that’s to show first of all.
CONFIGURE ACTIONS (ROLLOVERS)
Open the Actions palette (Window > Actions) and select one of the
buttons.
Click the Parameters button, and set the Click # to 1.
Repeat with each button, setting the second’s Click # to 2, the third to
3, and so on.
CONFIGURE ACTIONS (TARGETS)
Select the first HTML info text box.
Set its Target # to 1.
Select the next and set it to 2, the third to 3…
ARRANGE LAYOUT ITEMS
Arrange the HTML boxes on top of each other, with the ‘first of all’
HTML box at the back of the stack.
Preview, and click on each button in turn.
This approximates your desired behaviour with as little technical fuss
as possible. It doesn’t move things down, but if you have some info
showing initially and then cover that up with your ‘revealed’ text (in
HTML boxes with solid fill colours) you get a roughly similar effect: no
empty space at the start, and revealed information when someone clicks
or taps.
when I import images into the graphic target stack the whole thing
goes into a crazy panic and starts throwing up blocks of colour that I
never put there
Are you creating layered or ‘table-based’ items? Is the CSS button in
the Toolbar showing as blue or grey?
This sounds like you may have at least some things not layered, which
will cause overlapping graphics to merge in Freeway’s output.
Another problem you are probably seeing is your browser cacheing images
it’s seen recently and refusing to load in your changed items. This can
be frustrating and disconcerting, showing stretched and chopped-up bits
of old graphics where you expect to see new ones. To fix this, empty
your browser’s cache or just quit and relaunch the browser.
Now for the layered thing…
In general, in Freeway, you should be working with the CSS button
showing blue (CSS layered mode) rather than grey (old-fashioned
table-based mode). This does NOTHING other than define whether objects
will be created as layered or not; it doesn’t affect anything that’s
already made. To change things that are already in your layout you need
to select an item and look in the Inspector palette. There’s a Layer
checkbox; this should be checked to prevent overlapping graphics from
merging together in the output.
Thank you Keith. I’m working in CSS and with layers and I’ve emptied the cache in Safari. I managed to do everything with plain colour-filled graphic boxes and it all worked perfectly, but when it comes to the imported graphic files (imported as jpegs from Photoshop) it all goes kerplunk.
The first one i.e. #1 works fine, then I drop the graphic into #2 and when I view it in the browser I have a sludgy-coloured rectangle appearing on page load which doesn’t change when I hover over thumbnail #1, but changes nicely to the correct graphic when I hover over thumbnail #2. Then when I drop the graphic into box #3 I have different sludgy-coloured rectanel on page load which stays there for hovering over #1 and #2 thumbnail and then changes nicely to the correct graphic #3 when I hover over thumbnail #3.
So it’s as if I’m allowed one graphic but no more. It’s doing my head in, frankly.
Two questions:
Could it be the type of file I’m importing?
How do I ensure that the stack is in the correct order? Is it to do with the hierarchy in the items bar?
If you can solve this I will be very, very grateful. I seem to have given up the rest of my life at the moment, just trying to make this page work.
It works! I made them HTML items. I’ve now discovered that you have to be very precise. So I made some HTML boxes for my targets and then made my graphics in Photoshop EXACTLY the same number of pixels rather than importing something and then resizing it on the Freeway page. This seems to be the key. It means more planning in advance but fewer tears in the process.