Auto scrolling html to give an impression of rolling news

• Download Guide_lines_and_sample_code.zip - 2.0 KB

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