Horizontal Scroller

Archibald · 4th February 2011, 01:15 AM

A short while ago, I posted a way of getting a vertical scroller (here). With some recent threads about scrolling marquees, I decided to do a horizontal version.

There are a number of scrollers around from sites such as Dynamic Drive, but you normally have to hand-code the HTML of the scroller content.

I decided to try a different approach so we can have all the layout tools of WebPlus available for the content. The content can include images, even Flash.

In the attached file, the content is placed on a page that I have named 'News' (news.html). This can be made any height and is where the content is placed.

The page named 'Two iframes' (two-iframes.html) contains two framed documents, both are the same size as the 'News' page. The width of the 'Two iframes' page is therefore twice the width of the 'News' page. The height of the page and iframes needs to be the same height as the 'News' page. Both iframes are set to display the 'News' page without scrollbars. Unlike the vertical scroller, it is necessary for the left-hand iframe to have an ID of ifrm_L (so the code can get the width).

The top-level page, currently the home page, has an iframe the same height as the other two pages, but of any desired width. This iframe is set to display the 'Two iframes' page without scrollbars.

There is an HTML fragment on the 'Two iframes' page that contains code for the <head> section of HTML. As there is no code for the <body>, 'Ignore page position' is ticked.

The code currently steps 2 pixels every 50 milliseconds. These are indicated by comments in the code, and can be edited.

The only other code added is also to 'Two iframes' page: press Alt+S to see the all the code for the page and find the line beginning <body . The placeholder __AddCode="PageInBodyTag" is replaced by:

Code:

onmouseover="clearTimeout(t)" onmouseout="newsStep()"

This code is only needed if you want the scroller to stop scrolling on mouse-over.

Having the two iframes on a page duplicates the news content so the scroller does not display blank before restarting. In my view this is a significant improvement over other scrollers.

Please let me know if any of the description is unclear or if anything does not work when you customise it.

File attached is WebPlus10 so users of WebPlus10, WebPlusX2, WebPlusX4 and WebPlusX5 should be able to open it.

5th Aug 2011: file attached below has been updated to give compatibility with WebPlusX5. If it is copied to another project file in WebPlus X5, it may be necessary to check the ID of the left iframe and ensure 'Write ID for this object' is set to 'Yes'.

nfc212 · 4th February 2011, 01:36 AM

Looks promising Archibald.

Stutters a little in FF but seems consistent in all the browsers here.

And it doesn't freeze up my mouse wheel.

BrianE · 4th February 2011, 01:38 AM

Thanks, Archibald. Always nice to have quick options.

Archibald · 4th February 2011, 01:38 AM

Quote:

Originally Posted by nfc212

Stutters a little in FF but seems consistent in all the browsers here.

Hi Nigel,

Lots of code stutters in Firefox a few seconds after it loads. You are best advised to always use Internet Explorer

.

nfc212 · 4th February 2011, 02:10 AM

Quote:

Originally Posted by Archibald

Hi Nigel,

Lots of code stutters in Firefox a few seconds after it loads. You are best advised to always use Internet Explorer

.

There's a lot more code that chokes in IE.

Neil J · 4th February 2011, 10:20 AM

That's very cool, Archibald, and even better that it can still be styled using the WebPlus tools instead of html and css

mjh · 4th February 2011, 10:27 AM

Quote:

Originally Posted by Neil J

That's very cool, Archibald, and even better that it can still be styled using the WebPlus tools instead of html and css

I've got Archibald's vertical scroller on Carol's site and it is so much easier for her to edit than dealing with code.

For that, I truly appreciate Archibald's nifty contributions.

guardagujas · 4th February 2011, 10:36 AM

Quote:

Originally Posted by Archibald

A short while ago, I posted a way of getting a vertical scroller (here). With some recent threads about scrolling marquees, I decided to do a horizontal version.

There are a number of scrollers around from sites such as Dynamic Drive, but you normally have to hand-code the HTML of the scroller content.

I decided to try a different approach so we can have all the layout tools of WebPlus available for the content. The content can include images, even Flash.

In the attached file, the content is placed on a page that I have named 'News' (news.html). This can be made any height and is where the content is placed.

The page named 'Two iframes' (two-iframes.html) contains two framed documents, both are the same size as the 'News' page. The width of the 'Two iframes' page is therefore twice the width of the 'News' page. The height of the page and iframes needs to be the same height as the 'News' page. Both iframes are set to display the 'News' page without scrollbars. Unlike the vertical scroller, it is necessary for the left-hand iframe to have an ID of ifrm_L (so the code can get the width).

The top-level page, currently the home page, has an iframe the same height as the other two pages, but of any desired width. This iframe is set to display the 'Two iframes' page without scrollbars.

There is an HTML fragment on the 'Two iframes' page that contains code for the <head> section of HTML. As there is no code for the <body>, 'Ignore page position' is ticked.

The code currently steps 2 pixels every 50 milliseconds. These are indicated by comments in the code, and can be edited.

The only other code added is also to 'Two iframes' page, in the line beginning <body . The placeholder __AddCode="PageInBodyTag" is replaced by:

Code:

onmouseover="clearTimeout(t)" onmouseout="newsStep()"

This code is only needed if you want the scroller to stop scrolling on mouse-over.

Having the two iframes on a page duplicates the news content so the scroller does not display blank before restarting. In my view this is a significant improvement over other scrollers.

Please let me know if any of the description is unclear or if anything does not work when you customise it.

File attached is WebPlus10 so users of WebPlus10, WebPlusX2 and WebPlusX4 should be able to open it.

Archibald:

I just want to say that your generosity is extraordinary. People like you, or MJH, or Frank B., or Nigel, or like many others here in the Serif forum, makes this site an invaluable tool, and, even more important, a place where solidarity and generosity are common words!

Thank you!

(And, again, sorry for my bad english).

pj1000 · 4th February 2011, 10:38 AM

Perfect Archibald just what i needed

mjh · 4th February 2011, 10:40 AM

Quote:

Originally Posted by guardagujas

Archibald:

I just want to say that your generosity is extraordinary. People like you, or MJH, or Frank B., or Nigel, or like many others here in the Serif forum, makes this site an invaluable tool, and, even more important, a place where solidarity and generosity are common words!

Thank you!

(And, again, sorry for my bad english).

What I especially like about Archibald's 'stuff' is that he figures out ways to do things using the tools within WebPlus. Most are so simple even I learned how to use/implement many of them.

Archibald · 20th February 2011, 10:50 PM

The scroller uses three pages:
a) The page you want the scroller to appear on. In the file attached above this is 'Home' with file name 'index.html'.
b) An intermediate page that contains two framed documents (iframes). In the file attached above this is 'Two iframes' with file name 'two-iframes.html'.
c) A page that contains the objects to be displayed. In the file attached above this is 'News' with file name 'news.html'.

Troubleshooting:

1) View the 'News' page in WebPlus and preview page in browser to check it's OK.

2) View the 'Two iframes' page in WebPlus and preview page in browser. You should see the 'News' page duplicated side-by-side. If not, check the hyperlinks associated with both iframes are set to the site page 'News'. The iframes should be set to have no borders and no scrollbars. (Note: I am surprised previewing the page in a browser works because it is previewing one page inside another . . . . but it does work).

3) Preview site (not page) in browser and if necessary navigate to the page the scroller is on. If you do not see any scroller content, check the hyperlink associated with the iframe that displays the scroller is set to site page 'Two iframes'. (Note: this time previewing the page in a browser does not work).

4) If you see scroller content on the page where it is required, but it is not scrolling, go to the page 'Two iframes' and check that the ID of the left-hand iframe is "ifrm_L" (without the quotation marks), using right-click > ID . On the same page, check that the HTML code fragment that contains the scroller script is present. Check your browser does not have JavaScript disabled.

bbdas · 21st February 2011, 03:42 AM

thanks for your concern and willingness to help.. i will check it out and get back. I must say wpx4 serif forum is full of support. keep up the good work. Hare Krishna

WayneJohn · 21st April 2011, 03:25 PM

Thanks Archibald.

This is very nice, thank you.

I can widen it and tweek here and there. Just what I need.

WONDERFUL. Thanks.

mjh · 21st April 2011, 03:28 PM

Quote:

Originally Posted by WayneJohn

Thanks Archibald.

This is very nice, thank you.

I can widen it and tweek here and there. Just what I need.

WONDERFUL. Thanks.

I agree......... those scrollers are quite a gift. They scroll and stop smoothly and are easier to install using pages and iframes than some other dedicated scripts.

WayneJohn · 21st April 2011, 03:40 PM

Thanks guys...and gals.

I am fairly new to the forums, and before I only contacted Serif themselves. How stupid.

I suppose there is a place for the Serif guys, and don't get me wrong, they do help with some Serif related things, I agree.

But, WOW !!! The Serif Forums are just the Bees-knees.

After a while I got the impression that the Serif guys were just reading off a checklist - so-to-speak, going through that 99-point emergency checklist before flying into that mountain, instead of using your head, and pulling back on that stick and missing that damn mountain !!! - checklist on the floor... <<Experience matters.>>

Here in the forums you get real, down-to-earth, tried-and-tested answers.

I am thrilled !!!

mjh · 21st April 2011, 03:43 PM

Quote:

Originally Posted by WayneJohn

Thanks guys...and gals.

I am fairly new to the forums, and before I only contacted Serif themselves. How stupid.

I suppose there is a place for the Serif guys, and don't get me wrong, they do help with some Serif related things, I agree.

But, WOW !!! The Serif Forums are just the Bees-knees.

After a while I got the impression that the Serif guys were just reading off a checklist - so-to-speak, going through that 99-point emergency checklist before flying into that mountain, instead of using your head, and pulling back on that stick and missing that damn mountain !!! - checklist on the floor... <<Experience matters.>>

Here in the forums you get real, down-to-earth, tried-and-tested answers.

I am thrilled !!!

And, on a good day, you'll even get some recipes, a fevv jokes and updates on family issues. So just make yourself comfortable and come back soon.

pj1000 · 21st April 2011, 03:46 PM

The serif guys get paid a set wage each week no matter if they help you or not so dont waste your time ringing them up just post on this forum as you usually get a reply in a few mins

WayneJohn · 21st April 2011, 03:49 PM

Thanks MJH and Lee.

I agree. Sometimes I get an answer in seconds. Serif can take up to 48 hours if you are lucky.

Regards.

Archibald · 22nd April 2011, 12:50 AM

Quote:

Originally Posted by WayneJohn

I can widen it and tweek here and there. Just what I need.

From your other thread (here), I understand you want it to scroll in the other direction. I attach a version that scrolls towards the right. It's not so suitable for scrolling text but should look good with scrolling of images.

The speed is set within these two lines of JavaScript on the two-iframes page:

Code:

window.scrollBy(-2,0);            //step 2 pixels
t=setTimeout("newsStep()",50);

Above it is set to step 2 pixels every 50 milliseconds. I would keep the time interval somewhere between 25 and 50 milliseconds; any longer and it will start to appear jerky. Actually it does appear a little smoother if you change it to step 1 pixel every 25 milliseconds.

WayneJohn · 22nd April 2011, 10:24 AM

Thanks Archibald.

Yes, I shall use 1 and 25. Much smoother.

Thanks a lot.

Have a blessed Good Friday and Easter.

Regards.

4th February 2011, 01:36 AM	#2
nfc212 Master Join Date: Sep 2009 Location: Cardiff Age: 56 Posts: 12,918	Re: Horizontal Scroller Looks promising Archibald. Stutters a little in FF but seems consistent in all the browsers here. And it doesn't freeze up my mouse wheel. __________________ Nigel The Ferret - Using PHP and MySQL to create dynamic Web Plus sites What is the difference between genius and stupidity? Genius has limits.

4th February 2011, 01:38 AM	#3
BrianE Master Join Date: Apr 2009 Location: California, USA Posts: 11,156	Re: Horizontal Scroller Thanks, Archibald. Always nice to have quick options. __________________ Brian Intel Core i7 OC'd @ 4.8 GHz. 16 GB DDR3 RAM. 120 GB SSD. NVIDIA GTX 670, GTX 260. Windows 8 x64. [Fix] Drop-Down Navigation on iOS Devices \| [How To] Resize a Slider \| [Demo] Animated Slider Gallery

4th February 2011, 10:20 AM	#6
Neil J Senior Member Join Date: Feb 2009 Location: UK Age: 34 Posts: 1,428	Re: Horizontal Scroller That's very cool, Archibald, and even better that it can still be styled using the WebPlus tools instead of html and css __________________ Neil Judges ~ Free Portfolio Template

4th February 2011, 10:38 AM	#9
pj1000 Senior Member Join Date: Feb 2010 Location: Bolton Posts: 1,595	Re: Horizontal Scroller Perfect Archibald just what i needed __________________ Thanks Lee B W Design - X4 & X5 Templates - Adding headers and footers to your wordpress blog without using IFRAMES Micks Live Support - iPlus360 - WebPlus How To - WordPress & WebPlus - Naz's videos - Get WP templates

20th February 2011, 10:50 PM	#11
Archibald Master Join Date: Feb 2009 Location: England Posts: 12,701	Re: Horizontal Scroller - Troubleshooting The scroller uses three pages: a) The page you want the scroller to appear on. In the file attached above this is 'Home' with file name 'index.html'. b) An intermediate page that contains two framed documents (iframes). In the file attached above this is 'Two iframes' with file name 'two-iframes.html'. c) A page that contains the objects to be displayed. In the file attached above this is 'News' with file name 'news.html'. Troubleshooting: 1) View the 'News' page in WebPlus and preview *page* in browser to check it's OK. 2) View the 'Two iframes' page in WebPlus and preview *page* in browser. You should see the 'News' page duplicated side-by-side. If not, check the hyperlinks associated with both iframes are set to the site page 'News'. The iframes should be set to have no borders and no scrollbars. (Note: I am surprised previewing the page in a browser works because it is previewing one page inside another . . . . but it does work). 3) Preview *site* (not page) in browser and if necessary navigate to the page the scroller is on. If you do not see any scroller content, check the hyperlink associated with the iframe that displays the scroller is set to site page 'Two iframes'. (Note: this time previewing the page in a browser does not work). 4) If you see scroller content on the page where it is required, but it is not scrolling, go to the page 'Two iframes' and check that the ID of the left-hand iframe is "ifrm_L" (without the quotation marks), using right-click > ID . On the same page, check that the HTML code fragment that contains the scroller script is present. Check your browser does not have JavaScript disabled. __________________ Archibald

21st February 2011, 03:42 AM	#12
bbdas Regular Member Join Date: Feb 2011 Posts: 52	Re: Horizontal Scroller - Troubleshooting thanks for your concern and willingness to help.. i will check it out and get back. I must say wpx4 serif forum is full of support. keep up the good work. Hare Krishna

21st April 2011, 03:25 PM	#13
WayneJohn Regular Member Join Date: Feb 2010 Location: Johannesburg, South Africa Age: 54 Posts: 153	Re: Horizontal Scroller Thanks Archibald. This is very nice, thank you. I can widen it and tweek here and there. Just what I need. WONDERFUL. Thanks.

21st April 2011, 03:40 PM	#15
WayneJohn Regular Member Join Date: Feb 2010 Location: Johannesburg, South Africa Age: 54 Posts: 153	Re: Horizontal Scroller Thanks guys...and gals. I am fairly new to the forums, and before I only contacted Serif themselves. How stupid. I suppose there is a place for the Serif guys, and don't get me wrong, they do help with some Serif related things, I agree. But, WOW !!! The Serif Forums are just the Bees-knees. After a while I got the impression that the Serif guys were just reading off a checklist - so-to-speak, going through that 99-point emergency checklist before flying into that mountain, instead of using your head, and pulling back on that stick and missing that damn mountain !!! - checklist on the floor... <<Experience matters.>> Here in the forums you get real, down-to-earth, tried-and-tested answers. I am thrilled !!!

21st April 2011, 03:46 PM	#17
pj1000 Senior Member Join Date: Feb 2010 Location: Bolton Posts: 1,595	Re: Horizontal Scroller The serif guys get paid a set wage each week no matter if they help you or not so dont waste your time ringing them up just post on this forum as you usually get a reply in a few mins __________________ Thanks Lee B W Design - X4 & X5 Templates - Adding headers and footers to your wordpress blog without using IFRAMES Micks Live Support - iPlus360 - WebPlus How To - WordPress & WebPlus - Naz's videos - Get WP templates

21st April 2011, 03:49 PM	#18
WayneJohn Regular Member Join Date: Feb 2010 Location: Johannesburg, South Africa Age: 54 Posts: 153	Re: Horizontal Scroller Thanks MJH and Lee. I agree. Sometimes I get an answer in seconds. Serif can take up to 48 hours if you are lucky. Regards.

22nd April 2011, 10:24 AM	#20
WayneJohn Regular Member Join Date: Feb 2010 Location: Johannesburg, South Africa Age: 54 Posts: 153	Re: Horizontal Scroller Thanks Archibald. Yes, I shall use 1 and 25. Much smoother. Thanks a lot. Have a blessed Good Friday and Easter. Regards.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
WebPlus X4: Picture scroller	Naz	WebPlus	26	16th June 2010 10:12 AM
scroller	sonia	WebPlus	5	12th June 2010 07:03 AM
WebPlus X4: iframe horizontal scroller	mjh	WebPlus	26	1st January 2010 11:48 PM
Image Scroller	Mo	WebPlus	4	12th March 2007 03:24 AM