[Pro] A quote rotator

Hi & good day,

There is a javascript widget quoteRotator, which displays various quotes each after another, with fading etc.

Do we have something similar with FRW ?

bw, Omar KN


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

Not specifically as an action but there is no reason why this JS cannot be added to your FW page.

There are various other ways of displaying ‘random’ images/text or even specific ones.

Do you wish to use a specific ‘bank’ of quotes or like some services offer a totally random selection from hundreds.

Post a link to the JS quoteRotator and we can have a look and advise you how to use it in FW if thats what you want.

David


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

Hi Dave, Please have a look at this site:

nursacredsciences.com under “Contact us” … Daily Wisdoms

They just have 4 quotes which is quite enough!

  • And the short one pushes down the rest of the text in the column, even that.

the js is here: quoteRotator · GitHub

bw, Omar KN


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

Here’s another way:

Draw an HTML box where you want your quotes to appear, and put a styled line of text inside it, set to how you want the quotes to look. Make a note of the name Freeway has assigned this box.

Draw another HTML box on your page or off on the pasteboard. Inside this box, put the TEXT of your quotes (resist the urge to style this text – you can add links or local styles like bold and italic, but the bulk of the text should be plain). Put each quote on a separate line, followed by a return. This box will be invisible when the page loads. Make note of the name Freeway has assigned this box.

Apply Protaculous to your page, and choose the scriptaculous-packed library from the picker. Click on the top Function Body button and paste in the code from this Gist.

Edit the code to reflect the names of your boxes. The first variable in the code is ‘newsSource’, and it’s set to ‘data’ in my example. This would be the box containing all of the quotes. ‘newsDisplay’ is the box where you want your quotes to appear on the page. ‘delayBetweenItems’ is self-explanatory, and it’s set in seconds. ‘effectSpeed’ is the time that it takes one quote to fade away. Double this to get the total time of transition between one quote fading and the other fading in (also in seconds, use decimals to set less than 1).

The beautiful thing about this is that it lets you modify the quotes without touching your JavaScript code ever again. Just update the contents of your newsSource box, and upload.

Walter


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

Walter that is just so simple and yet so impressive.
Followed your instructions and it works a dream. Don’t have a use for it yet, but i’m sure I will as I’ve always layered text boxes on top of each other in the past which makes updating them a pain.
What a gem!


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

Glad you like it. Another thing you could try with it is this (and I
haven’t tried this, but thinking through the code it seems to be
possible). In your data box, instead of paragraphs for each item, try
nesting an inline DIV. Double-click inside the outer data box, and
then choose Insert / HTML Item from the main menu. Drag that box out
to the size you want your items to be. While it’s selected, you can
draw other elements on top of it and create a nested DIV, or you can
double-click into that box and insert further inline content. Once you
have one completed, click elsewhere and then click on that first-level
inline box once. Copy to the clipboard, then double-click in the data
box and paste as many times as you need to create the rest of your
elements. Finally, double-click inside your display area box and paste
one more copy.

Now you can go back and change each of the duplicate items in your
data box to create all of the variations you need. The script (and I
just modified one tiny part of it to make sure this works in a valid
manner, so pull a new copy from Gist) will take whatever the first
child tag is that it finds inside your data box (in this example, a
DIV) and use it as the basis for the collection of elements to rotate.
In this manner, the items you update could be fully composed layouts,
not just plain text.

Somebody try this, I have a sneaking suspicion it might just work.

Walter

On Feb 9, 2011, at 11:13 AM, Alan Herbert wrote:

Walter that is just so simple and yet so impressive.
Followed your instructions and it works a dream. Don’t have a use
for it yet, but i’m sure I will as I’ve always layered text boxes on
top of each other in the past which makes updating them a pain.
What a gem!


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

OK, so I had to read that a few times but Yup! it works.
I inserted the HTML item, copied and pasted it in again 3 times. Added different styled and coloured text and voila, appears in the display box as styled and laid out in the data box.
Perfect!

Didn’t work the first time, as after copying in the new code from Gist, I forgot to rename the box labels. Well at least i realised what i had done.


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

I just rolled this news rotator up into an Action and released it on the Forge:

http://www.actionsforge.com/actions/view/222-newscycle

Please give it a try and let me know how it works for you. This Action is quite generic – it will rotate through any sort of content that you can add inline to an HTML box, so images, nested DIV (HTML box) elements, etc. are all fair game. I haven’t tested this with Flash, but I suspect it might not work well, since Flash isn’t too respectful of HTML opacity. It might rotate, but not fade in and out.

One important note – everything you place in your source box will remain in the page and be counted as part of the overall page file size. So if you want to rotate 300 large photos, your page will topple over from the weight (and your visitors will give up waiting for them all to load).

Walter


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

I have this working great, but it affects the accordion element on the same page. Basically the accordion doesn’t react until the text finishes fading from the news rotator. Soon as that finishes the accordion acts.


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

Did you try the action, or the long-hand code and Protaculous? What’s the URL of your page?

Walter


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

Also, is the accordion element in question located inside the part of
the page that’s fading in, or is it on a separate part of the page?

Walter

On Apr 3, 2011, at 9:53 AM, waltd wrote:

Did you try the action, or the long-hand code and Protaculous?
What’s the URL of your page?

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

Walt, I just tried the Action and it is great.

I am assuming that it does not work with inline (Box Model) layouts. Correct?


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

The element that you use as your data source must be a stand-alone
layered DIV somewhere off on the margins or pasteboard of your page.
The element that you use to show the news needs to be an element that
creates an ID for itself, so an inline DIV should be fine, just be
sure that the CSS checkbox is ticked in the Inspector while that
element is selected.

(Pause to check the Action source code)

Okay, I see that it’s requiring a layered element to use as the news
destination as well. I just tested with that inhibition removed, and I
think with a few more tests to be sure that the element in question
has an ID, I should be able to release a revised version that will
work within an inline layout.

Walter

On Apr 3, 2011, at 11:05 AM, VicH wrote:

Walt, I just tried the Action and it is great.

I am assuming that it does not work with inline (Box Model) layouts.
Correct?


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

Download the latest version 0.2 and see if that clears it up for you.

Walter

On Apr 3, 2011, at 11:36 AM, Walter Lee Davis wrote:

Okay, I see that it’s requiring a layered element to use as the news
destination as well. I just tested with that inhibition removed, and
I think with a few more tests to be sure that the element in
question has an ID, I should be able to release a revised version
that will work within an inline layout.


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

Walt, beautiful! It works like a charm. Thanks for tending to this so quickly.
Vic


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

Hi walt I used the action. This is my first try using FWP for sites rather than GoLive or Dreamweaver. I really like using FWP. You just design and build. So fun to use.

http://www.membersinunity.com/dev/MIU


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

On 3 Apr 2011, 4:59 pm, RA wrote:

Hi walt I used the action. This is my first try using FWP for sites rather than GoLive or Dreamweaver. I really like using FWP. You just design and build. So fun to use.

http://www.membersinunity.com/dev/MIU

I’ve changed the page since I couldn’t get it to work. Here is the page that I’m trying to emulate with FWP. Notice how the accordion drops down the content and also moves the footer of the page down, instead of overlapping which is whats happening in FWP. Perhaps I need to build this in a table like the original page?

http://www.membersinunity.com


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

Notice how the accordion drops down the content and also moves the footer of the page down, instead of overlapping which is whats happening in FWP. Perhaps I need to build this in a table like the original page?

http://www.membersinunity.com

What you need is the have the footer in the same container as the accordion elements. Then it will get pushed down when the accordion grows.


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

On 4 Apr 2011, 9:51 pm, chuckamuck wrote:

Notice how the accordion drops down the content and also moves the footer of the page down, instead of overlapping which is whats happening in FWP. Perhaps I need to build this in a table like the original page?

http://www.membersinunity.com

What you need is the have the footer in the same container as the accordion elements. Then it will get pushed down when the accordion grows.

Oh okay. So I should build the master page with a container so that all the elements are to reside in it, rather than on page itself.


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

I’m still having trouble with this. I just can’t seem to wrap my mind on how to get this footer to move down if the content in the accordion is large. It’s the fifth question on this test page. I can’t get it to move down. Instead the text just disappears when it reaches the footer. Thanks.

http://www.membersinunity.com/dev/MIU/members.html


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