1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#pscroller1{
width: 200px;
height: 98px;
}
.someclass{ font-family:"Verdana";font-size:10px;}
.cDiv{
width: 200px;
height: 98px;
padding: 5px;
background-color: lightyellow;
border: 1px solid black;
}
</style>
<script type="text/javascript">
function CalculeTaille(tt,sQuoi){
String.prototype.textWidth=function(police,taille){
var container=document.createElement('div');
container.style.visibility='hidden';
if (sQuoi=="Hauteur"){
container.style.width = '200px'
}else{
container.style.height = '98px'
}
container.style.fontFamily=police
container.style.fontSize=taille+'px'
container.id="magicdiv";
container.style.display='inline';
document.body.appendChild(container);
document.getElementById('magicdiv').innerHTML=this;
if (sQuoi=="Hauteur"){
var longueur = document.getElementById('magicdiv').offsetHeight;
}else{
var longueur = document.getElementById('magicdiv').offsetWidth;
}
document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'))
return longueur + ' px'
}
return tt.textWidth('Verdana',10)
}
var pausecontent=new Array()
pausecontent[0]='<a href="http://www.codingforums.com">Coding " target="_new">CSS Drive</a><br>Categorized CSS gallery and examples.<br><br>'
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div class="cDiv"><div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
//alert(this.content[0] + '\n\n' + CalculeTaille(this.content[0],'Hauteur'))
}
pausescroller.prototype.animateup=function(){
if (parseInt(CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))>98){
var scrollerinstance=this
//alert(parseInt(this.hiddendiv.style.top) + ' ' + this.visibledivtop+5)
//alert(parseInt(CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))-98)
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.delay)
//alert(this.content[this.hiddendivpointer] + '\n\n' + CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))
}
}else{
//alert(this.hiddendiv.style.top + ' ' + this.visibledivtop)
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.delay)
//alert(this.content[this.hiddendivpointer] + '\n\n' + CalculeTaille(this.content[this.hiddendivpointer],'Hauteur'))
}
}
}
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1){ //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
}else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
</head>
<body>
<script type="text/javascript">
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
</script>
</body>
</html> |
Partager