NewsCycle - ActionsForge

Versions

NewsCycle.fwaction (2014-09-27) (Downloaded 517 times)

Contains:

NewsCycle (item-action) - v. 2.0

Compatible: Pro 5.5, Pro 6, and Pro 7

NewsCycle.fwactionb.zip (2012-11-02) (Downloaded 66 times)

Contains:

NewsCycle (item-action) - v. 0.5

Compatible: Pro 4, Pro 5, and Pro 5.5

Author: Walter Davis

developer javascript css effects prototype scriptaculous

Create an area on your page that fades in and out, showing new content each time. This Action is very flexible in application, and can handle a wide range of content types.

Instructions

Draw an HTML (layered) box on your page where you want the effect to appear. Style this box however you like, and apply the NewsCycle Action to it.

Double-click inside this box and create a “dummy” item to set your display styles. If you’re going to be rotating text, simply type some placeholder text, apply any paragraph styles you may like to that text, and you’re finished.

If you want to rotate images, use Insert / Graphic Item to insert an example photo. If you want to show a caption below the photo, be sure to use Shift-Return rather than a full Return to separate the image from the caption, otherwise the effect will alternate between photo and caption – probably not what you want.

If you want to rotate composed HTML layouts, then use Insert / HTML Item to draw your base HTML box. To create a nested HTML element to fade in and out, click once on this inline HTML box, drag its lower-right corner to resize it to suit, then while it is still selected (corner handle showing) use any of the box tools to draw a child box directly over the inline HTML box. You will know you’re doing it correctly if the cursor changes to look like this: [ + ] and the edges of the inline HTML box glow blue. Repeat this step for each element of your nested inline element, and add placeholder content.

Once you have created your “dummy” news item, select it and copy to the clipboard. If you created a normal paragraph of text, use Select All to select the entire paragraph, including the invisible return character at the end. If you have created a nested HTML element, be sure to click once on the inline HTML box and copy that, rather than using the text cursor to select all content in your outermost box.

Next, draw another HTML box anywhere on the page or pasteboard. (This element will be hidden in the browser, but visible to search engines and other non-visual browsers.) Make a note of the name Freeway assigns to it, or change the name in the Inspector to something you will recognize later. Double-click inside this box to get a flashing text cursor, and paste your dummy content as many times as you have actual rotating content items. Be sure that each option is separated from the others by a single paragraph return. Modify each one to set your real content.

Finally, click back on your “news area” item, and use the Data Source picker in the Actions palette to choose the source HTML box you just created.

Preview or publish to see the effect.

Other Parameters

You can set the length of time that each option will be fully visible by changing the Delay between Items setting. This will depend heavily on the type and size of content you are cycling through, as well as the reading speed of your target audience.

Set the duration of the fade effect with the Fade Duration setting. Note that the entire effect will take twice as long as whatever you set, because each option will take this long to fade out, then the next option will fade in for the same time.

40 Comments

Martin Bullivant 15 Feb 2011, 07:54

Strange-I posted a comment yesterday, it has not appeared… I have installed the NewsCycle action but can't find it anywhere in the menus. Its it he rsources folder on my HD and I amusing Freeway 5.5.4 latest build. Uninstalled, reinstalled…. where does it live in the menus?

Martin Bullivant 15 Feb 2011, 07:55

Oh my…such typos..! That should read "It's in the resources folder on my HD and I am using…etc"

Jukka Kornilow 2 Aug 2011, 18:40

How can I get the data source picker to work? Now it has only on option..none…

Walter Davis 2 Aug 2011, 19:40

You have to have at least one layered HTML box on the page in order to choose a data source. If you're using a Table based layout, then you won't have any layered elements unless you first click on the box you want to use, and then check the Layer checkbox in the Inspector.

Walter Davis 2 Aug 2011, 20:20

@Martin – you can only see the Action when you have an HTML object selected. It will be in the Item / Actions menu.

Carl Franson 18 Feb 2013, 19:27

Newscycle isn't working correctly in HTML5. The field does not resize as the text changes. Love this action! Hope it can be updated!! Thanks

Daemon Digitus 28 Feb 2013, 18:57

Tested and compatible with Pro6.

Carl Franson 28 Feb 2013, 20:18

Which output type are you using? It did not function for me in HTML5.

Daemon Digitus 28 Feb 2013, 20:44

I'm using XHTML5. I don't think that's a problem. I took some time to set this correctly.

I don't quite know exactly how this works but the fact is that is working perfectly for me. I even mixed images and text.

I don't know if this is true, but it seems that the cycle box (where the news run) must have the same configuration (size and layout) as the content news box.

Carl Franson 28 Feb 2013, 23:03

ok, thanks. I'll look again. Mind is working fine under 4.1 transitional but if I output to HTML5 it's broken. I have not checked XHTML5.

I am using just text. The side of my source box is much bigger than my display box as I'm showing testimonials that cycle through.

Daemon Digitus 28 Feb 2013, 23:18

Try to make the height of the html box flexible, and the height of the inline box minimum.

This way you should get your your cycle box adapting to content volume.

Carl Franson 28 Feb 2013, 23:28

OK, I made the Source HTML box flexible and the display box minimum. Exported as HTML5. Works fine in Safari and broken in Chrome. Chrome shows HTML Source box in the pad area and display is a jagged mess. Does yours work with Chrome?

Daemon Digitus 2 Mar 2013, 19:57

Yes, Carl. Mine is working fine on Firefox, Chrome and Safari (didn't even bother to test it on IE).

Crispin Balfour 12 Mar 2013, 21:50

Is there a version of this compatible with Freeway 6 yet?

Carl Franson 19 Aug 2013, 03:36

Still doesn't work if page is written in HTML 5. or if I don't select IE6 compatible.

Omar Neusser 21 Sep 2014, 09:33

After updating to FRW 7.01 with HTML5 it worked for me again. /okn

Walter Davis 27 Sep 2014, 15:55

I just made a major update to this Action. Version 2.0 is tested and compatible with Freeway 7, includes much newer versions of Prototype and Scriptaculous, and uses a different approach than the original which makes it more compatible with inline layouts and HTML5.

Carl Franson 28 Sep 2014, 16:04

I tried 2.0 in FW Pro 6 and the background and border of my field did not appear. Tried both HTML 5 and 4.01 transitional. Action worked but not background or border on my HTML field.

Walter Davis 28 Sep 2014, 16:49

Make sure that the border exists on each element in the data source elements. The new Action replaces the element entirely, rather than plucking out its contents.

Carl Franson 28 Sep 2014, 17:02

OK…so each testimonial needs to be contained in it's own datasource field?

Walter Davis 28 Sep 2014, 18:06

You have two options if you want a border. The easiest is to make the border on the html box that you apply the Action to, then it should just work. If you don't want to do that, then inside the data source element, insert a separate inline html item for each "story" and put the border on that.

John Williams 28 Oct 2014, 00:15

Walter Ref my thread on FreewayTalk regarding why version 2.0 of News Cycle does nto appear to work with another action BAckGround Supersizer.

Do you have any suggestions please?

John

John Williams 30 Oct 2014, 16:55

Walter,

could you look at http://www.reenoserve.com/ghyc/

I am testing NewsCycle the last of three messages is made up of the HTML box with another HTML box for text and a Graphic box holding an image. The two additional boxes were draw as you outlined in your instructions.

Everything seems to be fine until you view the page on an iPhone in Portrait mode, and the image is missing…. if you turn the iPhone into Landscape mode it is all fine again.

Any ideas please?

Thx

John

Walter Davis 30 Oct 2014, 18:09

Make sure that the placeholder element where your news will appear is set up to use breakpoints. The image is being clipped off in portrait orientation.

John Williams 30 Oct 2014, 19:31

Walter, Thank You … cracked it went for the simpler option in the end image and caption..

Can i ask you two further question? How easy would it be to stop the cycle in order to allow readers to fully read the News Article? ie placing the Mouse on the News Article for example. and will the Read More action work with the News Cycle action ? and will this stop the cycle?

Thanks Again

John

John Williams 6 Dec 2014, 10:53

Walter, I have a strange issue occurring on a test site associated with this Action, but it could well be a Softpress issue,

please take a look at
http://www.reenoserve.com/ghyc/fleets/index.html

All looks fine with the NewsCycle action working as designed. now select one of the other pages in this section from the navigation menu ie Squibs
On the Right edge of the Browser window you will see 4 "ghost" elements of the News items that are supposed to be used by the NewsCycle action, The pages in this Fleets Section uses a different Master to the other pages, i created it by Duplicating the initial Master then making some changes to it. and applying it to the pages within this section. The four "ghost" items you can see in the browser window have been created in the Pages ONLY within this section, and do NOT appear within the Master.
The Fleet home page does not have these ghost items as i deleted them from the page the item is item 26 and it has 4 child items similar to the correct newitems element.

The fist page of this section was already created before i applied the new Master, the other pages within this section were created by duplicating the initial page within the section.

Should i report this to Softpress? or is this something to do with the Action please?

Thank You

John

Walter Davis 6 Dec 2014, 15:11

I would avoid having the source element on the master page, especially if that master is not exclusively used for the purpose of creating pages that have NewsCycle on them. Just create the news elements on your individual child pages where they are needed.

John Williams 6 Dec 2014, 18:24

OK, Will do Thanks

John

Chris Ward 19 Dec 2014, 10:49

Hi Walter, I'm new to Freeway Pro and Actions, but having followed your instructions I can't get the rotating text to work. I'm going for the simplest option of just text but when I publish in Safari or Chrome, I just get the static image from the HTML box. Is an HTML (layered) box different from just clicking the HTML icon and drawing a box on the page? Should it have any particular attributes set? The Layer box is ticked by default and it doesn't seem to matter whether it is set to Absolute or Fixed in Window. I'm creating it on the Master page as I want it to be seen on almost the whole site. Do you have any suggestions please? Thanks, Chris

Walter Davis 19 Dec 2014, 12:31

Could you post a link showing the issue? I'm not sure what you mean by the static image here – if your news source contains text, your placeholder (to which you apply the Action) should have exactly one instance of whatever your news items look like. If you have your source defined as a list, then your placeholder should be one list item. If your news source is a set of paragraphs, then your placeholder should have one paragraph in it. Also, Actions like this don't always play nicely with master pages. You may find that you need to use copy and paste instead – create one instance on a page, then copy the placeholder and the source at the same time, move to another page, and paste.

Walter

Chris Ward 19 Dec 2014, 15:32

Thanks for the prompt reply. When I publish the page the text doesn't scroll between items 1,2 and 3, it just stays on item 1. I was comparing the page source code from my page and that of a previous contributor at http://www.reenoserve.com/ghyc/fleets/index.html. His page has a div with an id of newsItems, which then seems to contain 4 sub-divs of newsTextImage1 to newsTextImage4. I seem to be missing the level of a child subdivision, but I'm not clear how to create this. The address of my site is www.cramlingtoncofe.org.uk/freeway/ . Thanks again. If I can get this to work I'd be really pleased. (BTW, I just shifted the menu bar off to the side a bit so I could access the area I'm working on more easily.) Chris

Walter Davis 19 Dec 2014, 16:49

NewsCycle doesn't care what sort of division you use for your individual news items. The way that it works is it looks at whatever the first child element is of the element you have defined as your source. So if you have a layered HTML item off-screen somewhere which has been selected as your source item, and it contains four lines of text, like this:

&lt;div id=&quot;mySource&quot;&gt;
    &lt;p&gt;News item 1&lt;/p&gt;
    &lt;p&gt;News item 2&lt;/p&gt;
    &lt;p&gt;News item 3&lt;/p&gt;
    &lt;p&gt;News item 4&lt;/p&gt;
&lt;/div&gt;

Then, because the first child of #mySource is a P tag, the script will bottle up all of the P tags in that item and treat them as your source array. (And then it removes the entire #mySource div from the page, so it won't display any more.)

But that first child could be almost any tag – a DIV, an LI (in a UL or OL parent) – and the logic will work the same way.

This means that whatever you put in as your placeholder element needs to be a similar structure to what you put in the news source. If you are using paragraphs for your individual news items, then you must put a single line of text in the display element, and use a paragraph style to make any changes you need (font, color, etc.).

The other thing that occurs to me is that Freeway will often have an issue with master page Action elements losing their object references. In this case, the picker that decides what element is your data source will not work in a pre-filled mode like this, because each page's list of child elements is actually different from the objects on the master that created it. The master is the rubber stamp, and the individual pages derived from it (instance pages, in OO parlance) are actual objects, different from one another. So on each of your pages derived from this master, you are going to need to click on the news cycle element, then look in the Actions palette, and choose the element that you want to provide the data for that particular page. Even if it appears to point to the correct element, choosing the item – just clicking on the picker – is necessary in order to define the relationship between elements on that page.

Chris Ward 26 Dec 2014, 17:58

Thanks Walter. I eventually resolved the problem as being some sort of conflict with Freeway's Showcase Gallery. If there's a rotating gallery of images on the page, then NewsCycle won't work. So I've got rid of the Showcase galleries and am happily using NewsCycle.

Although I haven't tried it, presumably a second NewsCycle instance on the same page should still work, and I could put images in that?

Walter Davis 26 Dec 2014, 18:47

Yes, anything that uses jQuery will cause this same conflict, and many Showcase themes do use that. NewsCycle is designed to allow multiple instances of itself on a single page.

Walter

John Williams 22 Feb 2015, 09:52

Walter,

Could you take a look at the following page please.

http://glandoreyc.com/classic/index

There are two NewsCycle actions on this page the one with the images seems to work as normal, but the last image , which has the same height size as the others, wants to move the rest of the page contents up, why is this happening please?

thx

John

Walter Davis 22 Feb 2015, 15:42

Hard to say – it seems to be related to your use of Caleb's BackDraft layout framework. The images have a flexible max-width styling applied to them, and the last image is a different aspect ratio than all the others, which causes the calculation of its height (related directly to its width) to be different than the other three images. You could test this theory by creating a new version of the image, precisely the same dimensions as the other three, with transparent background on either side to pad it out to the same aspect ratio as the others. (Save it as a PNG, naturally, so your background shows through.)

John Williams 22 Feb 2015, 17:08

Walter,

Thank You … . . implemented your suggestion and it seems to work 100%

I will send Caleb a brief email update.

Thanks Again

John

Chris Ward 14 Nov 2015, 23:11

Walter, I'm finding that changing the Delay between Items in the Actions box isn't slowing down the cycling of the items on my page. They run at about 3-4s. It seems that the changes I make in the Delay box aren't recognised. Any idea why this might be? And I'd support John's request above to stop the cycle if the mouse hovered over the box. Is this a possible feature for future development? Thanks. Chris www.cramlingtoncofe.org.uk

John Williams 7 Apr 2016, 07:24

Walter,

I have a page with both News Cycle and an anchor specified, when you select the "Anchor Link" from another page, the News Cycle actions appears to override the Anchor location and the page is displayed where the NewsCycle HTML item is located, is this correct operation, and if Yes can it be overridden?

Thx

John

John Williams 7 Apr 2016, 08:06

Walter,

Further to my last comment i have now noticed that if you select the Anchor link on the actual page where the Anchor is specified, it correctly positions the page at the correct location overriding the NewsCycle????

John