Simple News Scroller
Responsive scrolling news window free script
Examples on this page
code for the auto scrolling window. No script is needed for the top sample in the sidebar on this page. It uses basic IFrame code. This script works on all websites and templates, HTML 4.01, HTML5 and responsive design
On the right sidebar are three examples. These samples are standard HTML webpages embedded into this HTML page using an HTML IFrame. All examples are responsive
for desktop, tablet, smartphones and mobile.
- See also: scrolling image window
Click below to download (as shown in the sidebar examples) the embedded news window or scrolling news add-ons with all files and examples. See the included help page for setup instructions and options.
Download News Window Files
(.zip Example #1
Download Scrolling News Files
(.zip Example #2
Download Scrolling News Feed Files
(.zip Example #3
News Window Options
See the help page included with the download. Changeable options include:
- Window size
- Window scroll speed
- Fonts and backgrounds
- Borders and colors
You can edit the "news_scroll.html" to change speeds and the starting pause time. The variables with notes are near the bottom of the "news_scroll.html" included in the download.
News box height
If you change the height of the auto scrolling news IFrame window edit the height in 2 places. The "frameheight" variable in the "news_scroll.html" and also edit the height in the "news_scroll.css".
In the "news_scroll.html" edit:
var frameheight = 176;
In the "news_scroll.css" edit:
These 2 sizes need to match so the text re-scrolls from the bottom of the window. If you make the var frameheight = 2;
the page will pop back in place after each scroll completes. See next section for details.
Restart or scroll again option
To have the scroller reload at the top for the second time through instead of scrolling from the bottom, in the "news_scroll.html" change the "frameheight" to "2" and change the "nextdelay" to "1" or "2". Do not change the height in the css file in this case.
The "news_scroll.html" uses the following HTML tag to make all links link to the top level page outside of the IFrame. You can optionally use target="_blank" on the links to open a new browser window. See target link support
The following tag is in the <head> section of the "news_scroll.html".
Scroll from bottom
Use the following settings in the "news_scroll.html" to have it always scroll starting from the bottom as in example #3 on this page (adjust the 218 to the height set in your css file):
var startdelay = 0.5;
var scrollspeed = 1.1;
var scrollwind = 218;
var speedjump = 30;
var nextdelay = 0;
var topspace = "218px";
var frameheight = 218;
You can add images to the "news_scroll.html" page. See adding images support
You can add as many scrollers to your HTML pages as you need. To add another scroller:
- Make a copy of the "news_scroll.html". Name it "news_scroll-2.html".
- Use the IFrame code as shown on the help page included the download. Edit that code with "news_scroll-2.html" and paste it into your HTML page.
- Edit the new "news_scroll-2.html" with your 2nd scroller text.
This application was tested in all popular browsers, IE, Safari, Google Chrome, Firefox and Opera and also iPad and iPhone and was compatible with all devices. If you encounter any issues in other browsers or devices please contact us
to let us know.
Simple image scroller free script
Static IFrames support