Nieuwsscroller 2

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

Nieuwsscroller 2

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

#scroller1 a{
text-decoration: none;
}

.eventuele_classnaam {
/* wordt opgenomen bij het oproepen van het script */
}
</style>

var scrollerinhoud=new Array()
// HIER VUL JE DE TEKSTEN IN VOOR DE NIEUWSSCROLLER
scrollerinhoud[0]='Dit is een universele nieuwsscroller.'
scrollerinhoud[1]='Uitzicht en afmetingen van deze scrollbox pas je aan in het css gedeelte.'
scrollerinhoud[2]='De berichten plaats je in het script gedeelte.'
scrollerinhoud[3]='De tekst kan volledig met html opgemaakt worden.'
scrollerinhoud[4]='<a href="#">Bij een hyperlink pauzeert de scroller bij muisover.</a>'
scrollerinhoud[5]=''

</script>

nieuwsscroller.prototype.initialize=function(){
this.scrollboxdiv=document.getElementById(this.scrollboxid)
this.visiblediv=document.getElementById(this.scrollboxid+"1")
this.hiddendiv=document.getElementById(this.scrollboxid+"2")
this.visibledivtop=parseInt(nieuwsscroller.getCSSpadding(this.scrollboxdiv))
this.visiblediv.style.width=this.hiddendiv.style.width=this.scrollboxdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.scrollboxid).onmouseover=function(){scrollerinstance.muisovervlag=1}
document.getElementById(this.scrollboxid).onmouseout=function(){scrollerinstance.muisovervlag=0}
if (window.attachEvent) //opruimen IE geheugenlek na unload
window.attachEvent("onunload", function(){scrollerinstance.scrollboxdiv.onmouseover=scrollerinstance.scrollboxdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.pauze)
}

nieuwsscroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.pauze)
}
}

nieuwsscroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

nieuwsscroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

nieuwsscroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.muisovervlag==1) // pauzeer bij muisover
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.inhoud.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.inhoud[this.hiddendivpointer]
this.animateup()
}
}

nieuwsscroller.getCSSpadding=function(scrollboxobj){
if (scrollboxobj.currentStyle)
return scrollboxobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //indien DOM2
return window.getComputedStyle(scrollboxobj, "").getPropertyValue("padding-top")
else
return 0
}

</script>

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina op de plaats waar je wenst dat de scroller verschijnt :

Opmerking: Om de nodige aanpassingen eenvoudig te kunnen uitvoeren en onmiddellijk zichtbaar te maken werd hier het css- en scriptgedeelte in HEAD opgenomen. Indien alles naar wens is kun je beide extern maken om je html-code overzichtelijker te houden.

22.03.2009: Dit script vervangt het vorige (dat niet in alle browsers werkte).

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