[Pro] Hot News Headlines: Using Prototype?

I am interested in creating a single-line, horizontal “News Headlines” almost exactly like what is used on Apple.com. I do NOT want RSS (e.g., SimpleRSS). I have read in another forum that Apple uses “Prototype” to get their news to display like that.

How can I easily do this in Freeway?

Many thanks,

James Wages


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

I would like to add that I have played with variations of this JS:

http://javascript.internet.com/text-effects/fading-marquee.html

It works well enough when it is the only thing on my Freeway page. It even works in MSIE 6. But when I put it on pages in my existing Freeway documents (which have rollovers, protaculous, and custom markup applied), it doesn’t work at all.

Hence, my original post stands: I would like to know how to accomplish this with Prototype (Protaculous) so it will be fully compatible with my existing web pages in Freeway.

Thank you,

James Wages


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

Well, the only part of this that would be difficult at all would be
setting up the data in a form that you would find easy to edit. The
actual animation between items is trivial to do with Prototype and
Scriptaculous (which is what Protaculous is).

My first thought would be to put an HTML box on the pasteboard and use
that as the data source. Make an HTML list in it, with each news
headline as a separate list item. The rest would be a lump of
JavaScript to read in that data source, convert it to a hash (a data
structure similar to an array) and then step through the list one item
at a time, updating the news area on the visible portion of your page.

Does that sound like it would work for you, in a workflow sense?

Walter

On Jul 27, 2010, at 3:44 AM, JDW wrote:

I am interested in creating a single-line, horizontal “News
Headlines” almost exactly like what is used on Apple.com. I do NOT
want RSS (e.g., SimpleRSS). I have read in another forum that Apple
uses “Prototype” to get their news to display like that.

How can I easily do this in Freeway?

Many thanks,

James Wages


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

Yes, that seems quite easy and straightforward, Walter.

–James


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

Here’s the Protaculous code to do this. (Notes follow, please read carefully.)

var data = $$('#data li');
$('news').down('p').update(data.first().innerHTML);
var cycle = function(){
	var delayBetweenItems = 3;
	var effectSpeed = 0.6;
	var current = $('news').down('p').innerHTML;
	data.each(function(elm, idx){
		if (elm.innerHTML == current){
			var box = $('news').down('p');
			var nextItem = (data[idx+1]) ? data[idx+1].innerHTML : data.first().innerHTML;
			new Effect.Morph(box,{
				style:'opacity:0',
				delay:delayBetweenItems,
				duration:effectSpeed,
				afterFinish:function(){
					new Effect.Morph(box,{
						style:'opacity:0.999999999',
						duration:effectSpeed,
						beforeStart:function(){
							box.update(nextItem);
						},
						afterFinish:cycle
					});
				}
			});
		}
	});
};
cycle();

###Notes

  • There must be a single item on your page called news (set the Title attribute in the Inspector to news).
  • This item must contain a single paragraph of placeholder text, and that paragraph must be styled with a paragraph style in Freeway. If the style name applied to this text does not have a little paragraph mark next to it in the Styles list, change it for one that does.
  • There may only be one style applied to the placeholder text when you look at the list of styles in the Styles palette.
  • There must be an HTML layer box somewhere off the page (I like to put these above the page – they never show from there) with its Title set to data.
  • Within this data box, there needs to be a single – completely unstyled – list containing all of your news items. Absolutely no style applied to the list or the list items themselves. Links are fine, but don’t try to style them in any way either.

These restrictions are there because you need to pass a concise set of data to your news ticker, and it needs to be in a predictable format. The news area needs to be a certain way because we need to know what element to reach in and replace. If you want to set link styles, do so using the Inspector while you have the news box selected.

You can change the script to make the effect move faster or to allow more time for reading (if your headlines are long). Just change delayBetweenItems and effectSpeed to the desired number of decimal seconds. effectSpeed is the speed of the fade and the speed of the re-appear, so double that is the real time that the transition takes to complete. delayBetweenItems is the time that the effect pauses before starting the next transition.

Walter


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

Walter, bless you! I only found 1 caveat.

I just set everything up on the front page of my site, in strict accordance with your instructions. I must say it was very easy and it works beautifully.

I tested in Chrome (Win/Mac), Safari 5 (Win/Mac), FireFox 3.6 (Win/Mac), and MSIE 6/7/8 (Win). It works perfectly in all browsers EXCEPT IE6/7. In IE6/7, the first entry in my list displays, but it never fades and shows the other items. (No problems in IE8.)

I just tested Apple.com in all those browsers. Their news ticker works perfectly, even in IE6 and IE7. Would you know why? Or would you otherwise be able to tweak the code to ensure compatibility with at least IE7?

Please know I absolutely hate IE. But 85% of our website visitors use IE. And out of that 85%, 56% are using IE8 while 25% still use IE6 and 19% use IE7. So with 44% of our IE visitors using IE6/7, I need to ensure compatibility with those blasted browsers.

Possible?

Many thanks,

James Wages


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

Okay, slightly different tack here, tested in IE 6.


var idx = 0;
var data = $$('#data li');
var entries = [];
var delayBetweenItems = 3;
var effectSpeed = 0.6;
data.each(function(elm){
	entries.push(elm.innerHTML);
});
var news = $('news').down('p');
news.update(entries[0]);
idx++;
function cycle(){
	if(idx == entries.length) idx = 0;
	new Effect.Fade(news,{
		delay:delayBetweenItems,
		duration:effectSpeed,
		afterFinish:function(){
			new Effect.Appear(news,{
				duration:effectSpeed,
				beforeStart:function(){
					news.update(entries[idx]);
					idx++;;
				},
				afterFinish:cycle
			});
		}
	});
};
cycle();

The major difference is that the text content of the list items gets copied into a new array outside of the function, and that gets iterated over inside. IE was actually moving the elements out of the original data array and into the news area, so after the first run, you’d get an error because the data array was empty.

Walter


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

Walter, thank you for the new code. I can confirm that it works perfectly now in all browsers, including IE6/7.

But I still cannot get it to work on a blank page or fresh new document, as I showed you in the video I emailed you off-list. So it would appear that it requires something else to be on the page to make it work.

But for now, it is working just dandy on my main page:

http://visionsecurity.jp/

Superb work. Thank you, Walter.

–James Wages


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

Well, it needs Protaculous set to scriptaculous-packed, a div named news containing exactly one paragraph of text, and a div called data containing exactly one unordered list of your rotating news items. Beyond that, there’s nothing else it needs.

I imagine that if you were starting a fresh page, there’d be a 50% chance that you had Protaculous set to either prototype or prototype-packed, and thus you wouldn’t have the Fade or Appear effects included in your page. If you run Firefox with Firebug on, you’d see a little red bug in the bottom-right corner of your browser window if that was the case.

Walter


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

Walter,

You are correct about my having set the Protaculous action to “prototype-packed.” However, I have Protaculous set to “prototype-packed” on the following page, yet it works fine:

http://visionsecurity.jp/

But as I mentioned in my offlist email to you, I have Carousel and other code added to that page. For whatever reason, those other things allow the ticker to function correctly, despite Protaculous being set to “prototype-packed.”

Would you have any thoughts on this?

Thank you,

James


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

Carousel always includes scriptactulous-packed in the page, no matter
what the other Actions on the same page tell it to do. Since
scriptaculous-packed includes prototype-packed, you get both at the
same time.

Walter

On Jul 28, 2010, at 10:39 AM, JDW wrote:

Walter,

You are correct about my having set the Protaculous action to
“prototype-packed.” However, I have Protaculous set to “prototype-
packed” on the following page, yet it works fine:

http://visionsecurity.jp/

But as I mentioned in my offlist email to you, I have Carousel and
other code added to that page. For whatever reason, those other
things allow the ticker to function correctly, despite Protaculous
being set to “prototype-packed.”

Would you have any thoughts on this?

Thank you,

James


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

Walter, you perpetually saturate my brain with knowledge. Thank you for being so patient, helpful and of course, brilliant. And thank you again for this outstanding code. I can only hope it will be a benefit to many other Freeway users who visit this excellent thread.

–James W.


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

Hi Walter,

I’ve just found this thread and have tried knock together a sample to test out the procedure. Unfortunately cannot get it to work.

I’ve read the whole thread and, I think, followed your instructions to the letter. I have tried a couple of different options on these pages. Code in upper Protaculous Box
I read your recent post re: adding the trailing / ;~}}

There is also the downloadable Freeway file on the first page.

Peter


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

JavaScript is complaining that it can’t find an item named ‘news’ to
operate on. Make sure that the HTML box where you want the news items
to appear is named news (lower-case, just that, nothing else) in your
Freeway page. This will appear in the Title field of the Inspector
when you have that item selected.

Walter

PS: To see these errors yourself, enable the Develop menu in Safari’s
preferences, then from that new menu, choose Show Error Console.

On Sep 17, 2010, at 1:03 PM, pandion wrote:

Hi Walter,

I’ve just found this thread and have tried knock together a sample
to test out the procedure. Unfortunately cannot get it to work.

I’ve read the whole thread and, I think, followed your instructions
to the letter. I have tried a couple of different options on these
pages. Code in upper Protaculous Box
I read your recent post re: adding the trailing / ;~}}

There is also the downloadable Freeway file on the first page.

Peter


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

Sorry, that’s not exactly right: The issue is that you have news there
all right, but it has an H3 in it rather than a P tag. You can fix
this either by changing the script, so it reads var news = $ ('news').down('h3'); or you can change your h3 to a p.

Walter

On Sep 17, 2010, at 1:03 PM, pandion wrote:

Hi Walter,

I’ve just found this thread and have tried knock together a sample
to test out the procedure. Unfortunately cannot get it to work.

I’ve read the whole thread and, I think, followed your instructions
to the letter. I have tried a couple of different options on these
pages. Code in upper Protaculous Box
I read your recent post re: adding the trailing / ;~}}

There is also the downloadable Freeway file on the first page.

Peter


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

Great, fixed.

Just one additional question: how to make the links active?

Peter Tucker, Oxford UK - but mobile somewhere

On 17 Sep 2010, at 18:16, Walter Lee Davis email@hidden wrote:

Sorry, that’s not exactly right: The issue is that you have news there all right, but it has an H3 in it rather than a P tag. You can fix this either by changing the script, so it reads var news = $('news').down('h3'); or you can change your h3 to a p.

Walter

On Sep 17, 2010, at 1:03 PM, pandion wrote:

Hi Walter,

I’ve just found this thread and have tried knock together a sample to test out the procedure. Unfortunately cannot get it to work.

I’ve read the whole thread and, I think, followed your instructions to the letter. I have tried a couple of different options on these pages. Code in upper Protaculous Box
I read your recent post re: adding the trailing / ;~}}

There is also the downloadable Freeway file on the first page.

Peter


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


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

Sorry, what do you mean? Can you show me an example where links
created in the data element are not present when the content is loaded
into the news area?

Walter

On Sep 17, 2010, at 1:38 PM, Peter Tucker wrote:

Great, fixed.

Just one additional question: how to make the links active?


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

Sorry sussed it. Just me being completely stupid, made in the normal FW way Apple-K adding the URL in External!!!

Late Friday brain, should stop now!

Cheers Peter


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

Hello,

I have this script working nicely, thank you for all the comments above.

My question is: Is it possible to have 2 different fading news things on the same page?

If so how?

Thank you,

Simon.


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

Certainly. You may want to experiment with my NewsCycle Action, which rolls this entire script up into a stand-alone Action.

Have a look on ActionsForge, recently added, so it should still be on the home page.

Walter


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