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.
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.
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.
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.
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.
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, 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:
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.
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:
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.”
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:
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.”
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.
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.
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.
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.
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.
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?