DOM-scroller

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

DOM-SCROLLER

In tegenstelling tot andere tekstscrollers werkt deze in alle huidige browsers.

Dit is bericht 1 Dit is bericht 2 Plaats de muis op een link en het scrollen stopt Dit is bericht 4

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :

.groen {
	color:			green;
	cursor:			pointer;
	padding-bottom:	2px;
	padding-left:	2em;
	padding-right:	2em;
	margin:			0px;
}

.rood {
	color:			red;
	cursor:			pointer;
	padding-bottom:	2px;
	padding-left:	2em;
	padding-right:	2em;
	margin:			0px;
}

</style>

function Ticker(name, id, shiftBy, interval){
  this.name     = name;
  this.id       = id;
  this.shiftBy  = shiftBy ? shiftBy : 1;
  this.interval = interval ? interval : 20;
  this.runId	= null;
  this.div = document.getElementById(id);

var node = this.div.firstChild;
  var next;
  while (node){
    next = node.nextSibling;
    if (node.nodeType == 3)
      this.div.removeChild(node);
    node = next;}

this.left = 0;
  this.shiftLeftAt = this.div.firstChild.offsetWidth;
  this.div.style.height	= this.div.firstChild.offsetHeight;
  this.div.style.width = 2 * screen.availWidth;
  this.div.style.visibility = 'visible';}

function startTicker(){
  this.stop();
  this.left -= this.shiftBy;
  if (this.left <= -this.shiftLeftAt){
    this.left = 0;
    this.div.appendChild(this.div.firstChild);
    this.shiftLeftAt = this.div.firstChild.offsetWidth;}
  this.div.style.left = (this.left + 'px');
  this.runId = setTimeout(this.name + '.start()', this.interval);}

function stopTicker(){
  if (this.runId)
    clearTimeout(this.runId);
	this.runId = null;}

function changeTickerInterval(newinterval){
  if (typeof(newinterval) == 'string')
    newinterval =  parseInt('0' + newinterval, 10);
  if (typeof(newinterval) == 'number' && newinterval > 0)
    this.interval = newinterval;
    this.stop();
    this.start();}

Ticker.prototype.start = startTicker;
Ticker.prototype.stop = stopTicker;
Ticker.prototype.changeInterval = changeTickerInterval;

var ticker = null;

function startticker(){
	ticker = new Ticker('ticker', 'tickerID', 1, 20); // 20 regelt de snelheid
	ticker.start();}

</script>

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina : 3. Plaats binnenin de BODY-tag: <body onload="startticker()">

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.