[Pro] Creating a rolling news window

Hi,

Has any one tried creating a rolling news/testimonials window in Freeway? As an example of what I am talking about, see the Testimonials window at http://www.discountwebdesign.co.uk/

What I would also like to do is to enable the user to click on the news header to be taken to the relevant news page. So any ideas on how to do that would be great too!

quote

Yes I have used scrollerpro from upoint

Example here http://deltadzine.net/scrollerpro/

David

quote

You should check that example out on an iPhone. Every time you try to zoom in so you can see the scrolly bit, the entire page reloads, and you’re back to full screen.

Walter

quote

Yes interesting that - first time I have looked at it in ages and viewing it on my iPad from sunny Spain I see that problem.

Some sort of JavaScript thing causing it?

They may have updated the JS since I put this together.

D

quote

Looking at upoints example page the same problem is evident there http://upoint.info/cgi/demo/scrollerpro/index.shtml

I will ask the question about the iPhone/iPad issue and report back.

David

quote

I can see how scroller pro works, and believe the same kind of effect can be done using the ScrollContent action suite as well. What I am wondering is if it is possible to take the content of one page and have it scroll in another?

My ideal would be to have a news summary page, with news article briefs on it, that I could scroll the content of that page on other pages via a ScrollerPro or ScrollContent window?

Even better would be to able to specify N characters (say 3 to 4 lines) of the news article to display in the scroller window, to be terminated with a hyperlink ‘more details …’ label at the end before showing the next news article. If a user clicks on the ‘more details …’ link it takes him to the full article page.

quote

If by scroll you mean “scroll automatically”, then you need to read the following. If you don’t, and what you mean is “make a window in the page and allow someone to scroll (manually) a page inside that window, then all you need is an iframe, and there’s an Action for that, built in if I’m not mistaken.

Strictly speaking, you can’t automatically scroll another page (especially on another server) within your page if you’re using an iframe for your scrolling container. The scroll position of a page is driven by the page that’s being scrolled, and the outer page (the one holding the iframe) cannot change anything about the inner page, including its scroll offset. If that inner page has a function included in IT that causes the page to scroll by itself without user interaction, then that same function would do the same trick when the page is viewed through an iframe as if it was viewed in its own browser window. An iframe is simply a hole cut in the page through which you can view another page entirely. In effect, it treats the outer page as an extension of the browser window “chrome”.

If you are using a DIV (HTML box) to hold the other page and then scrolling that using JavaScript controls on the outer page, then by definition its content cannot be another page. The only thing you can legally put inside a DIV on your page is a “page fragment”. If you put an entire other page inside a DIV, you end up with nested HTML, HEAD, and BODY tags, and that’s so far gone that some browsers will blow up, and most will be confused to the point that you won’t be able to run any JavaScript on the outer page at all. A fragment is a snippet of HTML describing one element or a group of elements on the page. It does not include any of the page-level tags like HEAD and BODY etc. It’s also important that this snippet does not contain any elements that are named exactly the same as any elements in the parent page into which you are inserting it.

If you can satisfy these requirements, and if the page fragment is hosted on the same server as your parent page, then it is utterly trivial to put content from a fragment into an HTML box on your page.

1. Apply Protaculous to the page, if it isn’t already. Choose prototype-packed from the Library picker.
2. Click on your HTML box and note its exact name from the Title field in the Inspector. (case-sensitive)
3. Click on the page somewhere, then click on the top Function Body button and enter the following script.

new Ajax.Updater('nameOfDiv','name_of_page.html',{method:'get'});

Obviously, change the nameOfDiv and name_of_page to match yours, and make sure that the page you are linking to is really a fragment (TemplateHelper can make these for you very easily, by switching on its Partial mode).

Now if you have set up your scrolling action to use the DIV you updated with Ajax.Updater, then it will just work.

Walter

On Jul 15, 2010, at 9:03 AM, Russ Taylor wrote:

I can see how scroller pro works, and believe the same kind of effect can be done using the ScrollContent action suite as well. What I am wondering is if it is possible to take the content of one page and have it scroll in another?

quote

I have asked Upoint the question about the resize thing on iPhone and iPad but have been told that there are no plans to update ScrollerPro to overcome that problem.

So if it is a deal-breaker then ScrollerPro is NOT an option as it stands!

D

quote

Thanks Walter, I think what you are suggesting is what I need to do, although I could do with some clarification.

I have created on my Master page a ScrollLayer action HTML box called NewsLayer, which contains a ScrollContent action HTML box called NewsContent.

I have a separate page called New Headlines that contains an HTML box called Headline that contains the text I want to automatically scroll in the Master page NewsContent box.

Can you just clarify that I have your instructions right:

1. I apply Protaculous to my Master page and set it to prototype-packed.
2. Click on NewsContent to get the correct name.
3. Open the FunctionBody part of Protaculous and enter ‘new Ajax.Updater(‘NewsContent’,’Headline.html’,{method:’get’}); ’ where ‘Headline.html’ is a fragment file of my News Headling page created using TemplateHelper.

Have I got that right?

Only when I build the site, my News Headline page doesn’t show the Headline element. Am I missing something?

quote

Is Headline.html a real file, with exactly that filename (case-sensitive) that is in the exact same folder as the page from which you are requesting it? If all that is true, please post a url where I can look at it. You should at least get an error in Firebug or Safari’s Error Console if there’s a JavaScript error there.

Walter

quote

Oh wait, try adding an underscore to the beginning of the filename if it came out of TemplateHelper. So if you entered Headline in the partial name field and chose html as the language, enter _Headline.html in the filename part of the JavaScript function.

Walter

quote

Hi Walter,

I have had this project on hold for a bit and just picked it up again.

I now have the my content appearing in the Scroll Content window, but I still have a couple of issues.

1/ I cannot get the Scroll Content window to scroll automatically (I want to achieve what you see in the ‘Testimonials’ section of this web page - http://www.discountwebdesign.co.uk). How do I get the Headline.html content to roll upwards like that?

2/ In Firefox, the Scroll Content window formats fine. In Safari, it changes the font and colour of the text in the first paragraph, the second paragraph is correctly formatted, then the third and subsequent paragraphs also have their font and colour changed.

Any ideas?

quote

Can you post your broken page somewhere public where I can run a debugger against it?

Walter

On Oct 21, 2010, at 7:05 AM, Russ Taylor wrote:

Hi Walter,

I have had this project on hold for a bit and just picked it up again.

I now have the my content appearing in the Scroll Content window, but I still have a couple of issues.

1/ I cannot get the Scroll Content window to scroll automatically (I want to achieve what you see in the ‘Testimonials’ section of this web page - http://www.discountwebdesign.co.uk). How do I get the Headline.html content to roll upwards like that?

2/ In Firefox, the Scroll Content window formats fine. In Safari, it changes the font and colour of the text in the first paragraph, the second paragraph is correctly formatted, then the third and subsequent paragraphs also have their font and colour changed.

Any ideas?

quote

I added a BBC worldwide news Banner to the top of a page I designed for the Iphone. You can view the banner at : http://www.mainlinecatv.com It will show up after the intro page….wait about 10 seconds. You can obtain more info on this for you website at: www.blastcasta.com

quote

Hi Walt,

I have managed to upload the site to http://test.inovaplus.com for you to have a look at. I have tried a number of options, none of which quite hits the mark yet.

1/ (top left under ‘Hot News’) - this uses the Scroll Content action, but doesn’t seem to pick up the content.

2/ (bottom left) - this uses iFrame action to pull in the news content from another page on the site (just makes it easy for me to process and format), but I can’t work out how to get it to auto-scroll

3/ (bottom centre) - this uses a Marquee with some scripting to roll the content, so it functions as I would want it too. Only problem is if I use this, I have to implement all the news content in raw html in the HTML Markup window. (I tried html editing unsuccessfully on bottom right).

Ideally I would want to combine the remote ‘pull’ of the text of iFrame with the rolling function of the Marquee. Also I would like to be able to pause the rolling when the mouse is over the window so that the user can pause the text to click on any of the hyperlinks. Trouble is I have no idea what I am doing when it comes to doing any hand coding!

quote

Here’s another way. http://scripty.walterdavisstudio.com/news

Freeway doc is here: http://scripty.walterdavisstudio.com/news/news.freeway.zip

Walter

On Nov 25, 2010, at 12:02 PM, Russ Taylor wrote:

Hi Walt,

I have managed to upload the site to http://test.inovaplus.com for you to have a look at. I have tried a number of options, none of which quite hits the mark yet.

1/ (top left under ‘Hot News’) - this uses the Scroll Content action, but doesn’t seem to pick up the content.

2/ (bottom left) - this uses iFrame action to pull in the news content from another page on the site (just makes it easy for me to process and format), but I can’t work out how to get it to auto-scroll

3/ (bottom centre) - this uses a Marquee with some scripting to roll the content, so it functions as I would want it too. Only problem is if I use this, I have to implement all the news content in raw html in the HTML Markup window. (I tried html editing unsuccessfully on bottom right).

Ideally I would want to combine the remote ‘pull’ of the text of iFrame with the rolling function of the Marquee. Also I would like to be able to pause the rolling when the mouse is over the window so that the user can pause the text to click on any of the hyperlinks. Trouble is I have no idea what I am doing when it comes to doing any hand coding!

quote

Okay, now I’m even more confused with another option!

I have looked at what you sent me and like the look of it. I see it works by using the end of paragraph/line marker as the delimiter between different news items.

Unfortunately my news items have a header line, so your solution shows the headline first, clears it out and then the body of the newsflash after, which is kind of disjointed. It also means every news item must be a single paragraph, which is restricting on the copy writer. That’s why I would prefer simple rolling text.

Can I use a Marquee, but pull the content from a separate file?

quote

My technique is better suited to a defined-height element, such as the Apple Hot News picker which inspired it. If you want to have a set of stories appear and disappear, and they have variable height, then maybe you want something different.

Still, I would posit that an auto-scrolling news story would be very annoying for the majority of visitors to your page — you’re going to have to guess at the scroll speed, and the odds of it feeling comfortable and in synch with every person’s reading speed is approximately 1 in a zillion.

If you’re using my technique, then I encourage you to embrace your constraints, and stick to a one line tease for each story, which you then link to at its full-length scope elsewhere.

Walter

On Nov 26, 2010, at 6:23 PM, Russ Taylor wrote:

Okay, now I’m even more confused with another option!

I have looked at what you sent me and like the look of it. I see it works by using the end of paragraph/line marker as the delimiter between different news items.

Unfortunately my news items have a header line, so your solution shows the headline first, clears it out and then the body of the newsflash after, which is kind of disjointed. It also means every news item must be a single paragraph, which is restricting on the copy writer. That’s why I would prefer simple rolling text.

Can I use a Marquee, but pull the content from a separate file?

quote

Hi Russ

Here is another one for you to have a look at http://www.deltadesign.co/autoscroll.html

If this is of interest I can send you the FW file

David

quote

Hi David,

That looks just like what I want. Yes, please email me the file to email@hidden.

Thanks,

Russ

quote

I am afraid that the online Forum obfuscates email addresses so if you add your email address to your entry on the People page or post it again as yourname(@)your domain.com I will be able to read it.

D

quote

Okay, took me a while to get into the people page. So just in case I got that wrong, it is russ.taylor(@)inovaplus.com

quote

OK Russ

FW file is on its way to you - let us know how you get on

D

quote