Texte werden nach oben gescrollt.
In den Header:
Code: Alles auswählen
<style type="text/css">
#scroller1{
width: 475px;
height: 25px;
border: 2px solid brown;
background-color: yellow;
font-family: arial;
font-size: 10pt;
font-weight: bold;
padding: 3px;
}
#scroller1 a{
text-decoration: none;
}
.eventuele_classnaam {
/* wordt opgenomen bij het oproepen van het script */
}
</style>
<script type="text/javascript">
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>
<script type="text/javascript">
// HIERONDER NIETS MEER WIJZIGEN
function nieuwsscroller(inhoud, divId, divClass, pauze){
this.inhoud=inhoud //inhoud berichten array
this.scrollboxid=divId //ID van de scroller box
this.pauze=pauze //pauze tussen de berichten (in milliseconden)
this.muisovervlag=0 //boolean vlag om bij muisover de scroller te pauzeren
this.hiddendivpointer=1 //index berichten array voor verborgen div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+inhoud[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+inhoud[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //start onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //start onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //start in DOM browsers na 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
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>
Code: Alles auswählen
<script type="text/javascript">new nieuwsscroller(scrollerinhoud, "scroller1", "eventuele_classnaam", 4000)</script>