Click here to Skip to main content
15,881,769 members
Articles / Web Development / HTML
Article

A Simple Vertical News Scroller

Rate me:
Please Sign up or sign in to vote.
3.45/5 (15 votes)
28 Mar 2004 122.8K   3K   44   14
This is a simple news scroller that makes use of 2 <div> tags and a few lines of code to give that scrolling effect. Since <div> tag is used to hold the content, you may place images, links etc. within the inner <div> tag called &quot;news&quot;.

Sample Image - News_Scroller.jpg

Introduction

This is a simple vertical News scroller that can virtually fit in any site, and can be customized. It uses JavaScript and contains 2 <div> tags that do the scrolling job. It's designed for IE, but with a little modification will work with NS. Unlike majority of the vertical scrollers, it uses lesser lines of code and can be easily understood by any novice. To customize, you may change the width, height, and background color of the scroller, and also add in Sp.FX filters to make it more attractive.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United Kingdom United Kingdom
Over 8 years of IT Experience. I've been using Microsoft Technologies for almost that long. With ASP and VB Background, I've strengthened my skillset with .NET, especially ASP.NET and VB.NET. I also have a passion for XML and XSLT. Have designed quite a few sites for MNC's.

Comments and Discussions

 
GeneralIssue with Code Pin
bad_till_bones8-Mar-07 6:37
bad_till_bones8-Mar-07 6:37 
QuestionRe: Issue with Code Pin
dotty32125-Sep-08 0:21
dotty32125-Sep-08 0:21 
GeneralRe: Issue with Code Pin
gogo77-Dec-08 22:50
gogo77-Dec-08 22:50 
Questioncan't work well Pin
cqwydz20-Jan-07 22:16
cqwydz20-Jan-07 22:16 
GeneralVersion for IE and FireFox Pin
Andre2517-Jul-06 8:59
Andre2517-Jul-06 8:59 
QuestionRe: Version for IE and FireFox Pin
Carina6220-Jul-06 8:39
Carina6220-Jul-06 8:39 
QuestionWhat if..?? Pin
PSK_29-Jul-04 23:30
PSK_29-Jul-04 23:30 
GeneralUse of this script Pin
André Fellows16-Jun-04 10:45
André Fellows16-Jun-04 10:45 
GeneralRe: Use of this script Pin
Vijay Kanth16-Jun-04 22:06
Vijay Kanth16-Jun-04 22:06 
GeneralNetscape or Mozilla Pin
filimon22-Apr-04 3:59
filimon22-Apr-04 3:59 
QuestionHow do I change position of scroller Pin
DipeshKhakhkhar7-Apr-04 11:26
DipeshKhakhkhar7-Apr-04 11:26 
AnswerRe: How do I change position of scroller Pin
Vijay Kanth7-Apr-04 17:23
Vijay Kanth7-Apr-04 17:23 
Its quite simple actually.

Ans to Q1: Just add the following attributes to the "Container"
tag:

left:800.0px;
top:1.0px;
position:ABSOLUTE;

preferably after the line:

height:150.0px;

You may compute the inner width of your browser and assign the left & top position of the Container, like:

var innerWidth=window.screen.availWidth;
var innerHeight=window.screen.availHeight;

window.container.style.posLeft=innerWidth - 150;
window.container.style.posTop=innerHeight - 250;

in the Script tag mentioned in the sample, along with the other Variable declarations.

Ans to Q2: If you want to move the news horizontally, then you need to change the scrollNews() function to look something like the following and change the 'step' and 'diff' variables to :

var step=parseFloat(window.container.style.posLeft)+parseFloat(window.container.style.posWidth);
var diff=(window.news.style.left-window.news.scrollWidth);

function scrollnews()
{
window.news.style.left = step;
step-=2;
if((parseFloat(window.news.style.posleft))<=diff)
{


step=parseFloat(window.container.style.posLeft)+parseFloat(window.container.style.posWidth);
}
}

However make sure that the news that you put in, is visible completely through the container, or the content will get clipped off. For multiple chunks of news material, you may use a table within the 'news'
tag, and preset the height and width accordingly.

Cheers!



Vijay Kanth
Wipro Technologies.

GeneralRe: How do I change position of scroller Pin
filimon8-Apr-04 4:07
filimon8-Apr-04 4:07 
GeneralRe: How do I change position of scroller Pin
potdarko7-Jul-06 18:34
potdarko7-Jul-06 18:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.