[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!


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

Yes I have used scrollerpro from upoint

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

David


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

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


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

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


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

Looking at upoints example page the same problem is evident there 404 Error Page

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

David


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

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.


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

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?


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

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


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

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?


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

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


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

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


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

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?


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

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?


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


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

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:


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

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!


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

Here’s another way. Untitled

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!


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


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

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?


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

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?


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


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

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


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

Hi David,

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

Thanks,

Russ


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