Simple News Scroller
Responsive scrolling news window free script
Free scrolling news window script download. This application is mobile and tablet compliant and uses Javascript 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.
See Also…
See Also…
Examples on this page
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.
- Example #1 uses standard IFrame code. No Javascripts are needed for this example.
- Example #2 scrolls through the embedded page, then re-scrolls again from the bottom using Javascript.
- Example #3 is the same as #2 but with a news feed. This feed uses Javascript and is not an XML or RSS feed. The feed is available at worldpress.org. See also adding news feeds.
- See also: scrolling image window
Download scripts
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)News Window Options
Available options
See the help page included with the download. Changeable options include:
- Window size
- Window scroll speed
- Fonts and backgrounds
- Borders and colors
Set speeds
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:
height: 176px;
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.
Link targets
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".
<base target="_parent">
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;
Adding images
You can add images to the "news_scroll.html" page. See adding images support.
Multiple scrollers
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.
Device compliance
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.
Related Topics
Simple image scroller free script
Static IFrames support
Javascript and RSS news feeds