Auto Scrolling Effect with javascript and DHTML.
Wall Script
Follow Me:
Monday, February 16, 2009

Auto Scrolling Effect with javascript and DHTML.

Take a look at this post a nice auto scrolling effect using javascript and dynamic HTML. It's useful to display your website headlines and latest news . Just you have to do very few modifications.

Watch this demo.
Live Demo


Download Script     Live Demo

Add these three javascript files within the tag HEAD of the page.
<script language="javascript" src="js/dhtmllib.js"></script>
<script language="javascript" src="js/scroller.js"></script>
<script language="javascript" src="js/mydata.js"></script>

Demo.html
Contains javascript and HTML code. Div tag id placeholder to present your data.
<script language="javascript">
function runmikescroll() 
{
  var layer;
  var mikex, mikey;
  // Locate placeholder layer so we can use it to 
  // position the scrollers.
  layer = getLayer("placeholder");
  mikex = getPageLeft(layer);
  mikey = getPageTop(layer);
  // Create the first scroller and position it.
  myScroller1.create();
  myScroller1.hide();
  myScroller1.moveTo(mikex, mikey);
  myScroller1.setzIndex(100);
  myScroller1.show();
}
window.onload=runmikescroll
</script>

<DIV id="tempholder"></DIV>
<DIV id="placeholder"></DIV>

mydata.js
Add headlines in mydata.js. Include your HTML tags inadditem(" ")

var myScroller1 = new Scroller(0, 0, 385,130, 0, 0);
//(xpos, ypos, width, height, border, padding)

myScroller1.addItem(" <span><h3>Scrolling Data 1</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 2</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 3</h3></span> ");

myScroller1.setPause(2000);
//set pause beteen msgs, in milliseconds

Download Script     Live Demo

Note : Best view open with Firefox and Safari brower.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


6 comments:

  1. Hi,

    nice script! but why does it only function in quirks mode?

    thanks!

    ReplyDelete
  2. is there anyway to make this script work with images or divs instead of just text?

    ReplyDelete
  3. trima kasih banyak atas ilmunya

    ReplyDelete
  4. Why? Oh Why? Doesn't it work in Chrome?!

    ReplyDelete
  5. i cant get it to work it just throws all of my head line on the top left screen.

    ReplyDelete
  6. Demo not working, please fix it....

    ReplyDelete

Make in India