Click here to Skip to main content
12,949,601 members (70,296 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 18 May 2007

Auto scrolling html to give an impression of rolling news

, 18 May 2007
Rate this:
Please Sign up or sign in to vote.
This will be useful to make data continuosly rotate and give an impression of news flash vertically in ur webpages.This is not windows scrolling but this is making a div or panel to scroll.


This article is about making a HTML content ina div or panel to autoscroll or self scroll to get an impression like a news flash vertically.If you modify the code slightly you can achieve many diffrent effects like horizontal scrolling or pop up in new window using javascript and scrolls the news there. This can be very simply achieved using this article


You can club this article with dynamic html code generation using c# in to give you the flexibility in setting the news dynamically from database or XML. I have attached the dynamic html code generation sample code with this article. You Can download and make use of it.

Using the code

Just go thru the code attached with this article . sample code will easily make you understand what it does.

<script type="text/javascript">
   var speed=10
function rollon()
//'myDiv' is the name of my panel .
//panel  properties are as follows
//<asp:Panel ID="myDiv" runat="server" style="overflow:hidden;" width="100%" Height="100%" ScrollBars=None >
 // </asp:Panel>
  var loc = document.getElementById('myDiv');
  var div = document.getElementById('myDiv');
  h = div.scrollHeight;
  if(speed > (h-350))
   speed =10;
  div.scrollTop = speed;
// increment the speed by higher number to increase the scrolling
// set timeout will help you to continuosly scroll the function and give continuos scrolling.
  self.setTimeout('rollon()', 50)// 50 is the timer value. 1000 is one second 

Points of Interest

I really felt achieving different effects in our websites using javascript is simple and easy. This is just a start will get back to you with better and interesting aspects


My first post.Will get back with simple and useful articles


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


About the Author

Web Developer
India India
Hi ,
I'm a s/w engineer from chennai.

You may also be interested in...

Comments and Discussions

Questiongetting an error HomeManager does not exist in current context. Pin
Md Kamal Azhar19-Jan-14 2:50
memberMd Kamal Azhar19-Jan-14 2:50 
QuestionI need your help with the code... Pin
praveen ts4-Feb-12 20:09
memberpraveen ts4-Feb-12 20:09 
QuestionWhere to apply script? Pin
MIB42621-May-07 16:57
memberMIB42621-May-07 16:57 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170524.1 | Last Updated 19 May 2007
Article Copyright 2007 by prabhu_g_cool
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid