Sweep-in News Scroller with Controls (no jQuery)

This demo has been replaced with a version that has CSS animation support for the stock Android browser.

A light-weight news scroller where each new message sweeps in, while the previous message sweeps away and fades out. Interactive controls are powered with plain JavaScript (no dependancies).

Works in modern browsers and IE8+ (no sweep or fade in IE8/9).

Please view the source of this page for HTML markup, CSS and JS.

Sweep Up

  • Blog: Highlight Current Menu Button

    (1/10) 21st Apr 17 - Read my latest entry in the blog; Here's how to highlight the menu button for the currently viewed web page, with a small amount of JS.
  • Full Height Split Scrolling Panels

    (2/10) 05th Apr 17 - This CSS-only demo uses viewport units for full height panels on any screen. Additionally, the left sides are fixed size, while the right sides scroll.
  • Blog: Form spambot observation

    (3/10) 27th Mar 17 - Read my latest entry in the blog; On pages with multiple forms, only the first form gets spammed. Can we use this as a simple anti-spam precaution?
  • Fast Edit WYSIWYG editor upgrade

    (4/10) 16th Mar 17 - All versions of Fast Edit have been upgraded with the latest version of TinyMCE 3.x (v3.5.12). Fast Edit v1 also has fixes for a few stray errors.
  • 'SiteShow' history improvements

    (5/10) 07th Mar 17 - I've made some small JS changes so that the slides for the fullscreen 'Siteshow' now update without affecting or adding to the browser history.
  • Fast Cal 'new entry' security fix

    (6/10) 22nd Feb 17 - A security fix has been added to Fast Cal to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit v1 'no delete' security fix

    (7/10) 09th Feb 17 - A fix has been applied to Fast Edit v1 to prevent the home page from being deleted or hidden via manual query strings in the WYSIWYG edit window.
  • Blog: Case against flipping pages

    (8/10) 30th Jan 17 - Read my latest entry in the blog; The case against online page flipping publications - the humble PDF and/or responsive web design, does it better.
  • Fast Feed 'new entry' security fix

    (9/10) 25th Jan 17 - A security fix has been added to Fast Feed to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit BE save snippet bugfix

    (10/10) 19th Jan 17 - A recent error has been fixed in Fast Edit BE (Snippet Manager) that was preventing changes to edited snippets from being saved on some systems.

Sweep Left

  • Blog: Highlight Current Menu Button

    (1/10) 21st Apr 17 - Read my latest entry in the blog; Here's how to highlight the menu button for the currently viewed web page, with a small amount of JS.
  • Full Height Split Scrolling Panels

    (2/10) 05th Apr 17 - This CSS-only demo uses viewport units for full height panels on any screen. Additionally, the left sides are fixed size, while the right sides scroll.
  • Blog: Form spambot observation

    (3/10) 27th Mar 17 - Read my latest entry in the blog; On pages with multiple forms, only the first form gets spammed. Can we use this as a simple anti-spam precaution?
  • Fast Edit WYSIWYG editor upgrade

    (4/10) 16th Mar 17 - All versions of Fast Edit have been upgraded with the latest version of TinyMCE 3.x (v3.5.12). Fast Edit v1 also has fixes for a few stray errors.
  • 'SiteShow' history improvements

    (5/10) 07th Mar 17 - I've made some small JS changes so that the slides for the fullscreen 'Siteshow' now update without affecting or adding to the browser history.
  • Fast Cal 'new entry' security fix

    (6/10) 22nd Feb 17 - A security fix has been added to Fast Cal to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit v1 'no delete' security fix

    (7/10) 09th Feb 17 - A fix has been applied to Fast Edit v1 to prevent the home page from being deleted or hidden via manual query strings in the WYSIWYG edit window.
  • Blog: Case against flipping pages

    (8/10) 30th Jan 17 - Read my latest entry in the blog; The case against online page flipping publications - the humble PDF and/or responsive web design, does it better.
  • Fast Feed 'new entry' security fix

    (9/10) 25th Jan 17 - A security fix has been added to Fast Feed to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit BE save snippet bugfix

    (10/10) 19th Jan 17 - A recent error has been fixed in Fast Edit BE (Snippet Manager) that was preventing changes to edited snippets from being saved on some systems.

Sweep Down

  • Blog: Highlight Current Menu Button

    (1/10) 21st Apr 17 - Read my latest entry in the blog; Here's how to highlight the menu button for the currently viewed web page, with a small amount of JS.
  • Full Height Split Scrolling Panels

    (2/10) 05th Apr 17 - This CSS-only demo uses viewport units for full height panels on any screen. Additionally, the left sides are fixed size, while the right sides scroll.
  • Blog: Form spambot observation

    (3/10) 27th Mar 17 - Read my latest entry in the blog; On pages with multiple forms, only the first form gets spammed. Can we use this as a simple anti-spam precaution?
  • Fast Edit WYSIWYG editor upgrade

    (4/10) 16th Mar 17 - All versions of Fast Edit have been upgraded with the latest version of TinyMCE 3.x (v3.5.12). Fast Edit v1 also has fixes for a few stray errors.
  • 'SiteShow' history improvements

    (5/10) 07th Mar 17 - I've made some small JS changes so that the slides for the fullscreen 'Siteshow' now update without affecting or adding to the browser history.
  • Fast Cal 'new entry' security fix

    (6/10) 22nd Feb 17 - A security fix has been added to Fast Cal to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit v1 'no delete' security fix

    (7/10) 09th Feb 17 - A fix has been applied to Fast Edit v1 to prevent the home page from being deleted or hidden via manual query strings in the WYSIWYG edit window.
  • Blog: Case against flipping pages

    (8/10) 30th Jan 17 - Read my latest entry in the blog; The case against online page flipping publications - the humble PDF and/or responsive web design, does it better.
  • Fast Feed 'new entry' security fix

    (9/10) 25th Jan 17 - A security fix has been added to Fast Feed to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit BE save snippet bugfix

    (10/10) 19th Jan 17 - A recent error has been fixed in Fast Edit BE (Snippet Manager) that was preventing changes to edited snippets from being saved on some systems.

Fade In

  • Blog: Highlight Current Menu Button

    (1/10) 21st Apr 17 - Read my latest entry in the blog; Here's how to highlight the menu button for the currently viewed web page, with a small amount of JS.
  • Full Height Split Scrolling Panels

    (2/10) 05th Apr 17 - This CSS-only demo uses viewport units for full height panels on any screen. Additionally, the left sides are fixed size, while the right sides scroll.
  • Blog: Form spambot observation

    (3/10) 27th Mar 17 - Read my latest entry in the blog; On pages with multiple forms, only the first form gets spammed. Can we use this as a simple anti-spam precaution?
  • Fast Edit WYSIWYG editor upgrade

    (4/10) 16th Mar 17 - All versions of Fast Edit have been upgraded with the latest version of TinyMCE 3.x (v3.5.12). Fast Edit v1 also has fixes for a few stray errors.
  • 'SiteShow' history improvements

    (5/10) 07th Mar 17 - I've made some small JS changes so that the slides for the fullscreen 'Siteshow' now update without affecting or adding to the browser history.
  • Fast Cal 'new entry' security fix

    (6/10) 22nd Feb 17 - A security fix has been added to Fast Cal to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit v1 'no delete' security fix

    (7/10) 09th Feb 17 - A fix has been applied to Fast Edit v1 to prevent the home page from being deleted or hidden via manual query strings in the WYSIWYG edit window.
  • Blog: Case against flipping pages

    (8/10) 30th Jan 17 - Read my latest entry in the blog; The case against online page flipping publications - the humble PDF and/or responsive web design, does it better.
  • Fast Feed 'new entry' security fix

    (9/10) 25th Jan 17 - A security fix has been added to Fast Feed to stop entries from being created or deleted inside the WYSIWYG edit window via manual query strings.
  • Fast Edit BE save snippet bugfix

    (10/10) 19th Jan 17 - A recent error has been fixed in Fast Edit BE (Snippet Manager) that was preventing changes to edited snippets from being saved on some systems.

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.