Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

Introduction

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

Background

You can club this article with dynamic html code generation using c# in asp.net 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
  speed=speed+1;
// 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 
}
-->
</script>

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

History

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

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

Share

About the Author

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

Comments and Discussions

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

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140921.1 | Last Updated 19 May 2007
Article Copyright 2007 by prabhu_g_cool
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid