auto scrolling msg panel
by Mahfuz Ahmed
HTML
<div id="fbComments" class="container" onmouseover="marquee.scroll('fbComments',0);" onmouseout="marquee.scroll('fbComments',-1);">
<div style="position: absolute; width: 98%;">
<b><a href="https://shopping247.club">Shopping Club</a></b><br>
SHOPPING CLUB shopping abrod with BDT. Shopping 24 hours in a day and 7 days in a week. New Order Confirm Payment
<br><br>
<b><a href="https://shopping247.club">Shopping Club2</a></b><br>
SHOPPING CLUB shopping abrod with BDT. Shopping 24 hours in a day and 7 days in a week. New Order Confirm Payment 2
<br><br>
CSS
.container{
position: relative;
width: 200px; /*marquee width */
height: 100px; /*marquee height */
overflow: hidden;
background-color: white;
padding: 2px;
}
JavaScript
var marquee={
init:function(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;
p.style.overflow='hidden';
obj.style.position='absolute';
obj.style[mde[0]]='0px';
obj.style[mde[3]]=sz+'px';
clone=obj.cloneNode(true);
clone.style[mde[0]]=sz+'px';
clone.style[mde[2]]='0px';
obj.appendChild(clone);
o=this[id]={
obj:obj,
mde:mde[0],
sz:sz
}
if (typeof(srt)=='number'){
o.dly=setTimeout(function(){ marquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
}
else {
this.scroll(id,0)
}
},
scroll:function(id,ud){
var oop=this,o=this[id],p;
if (o){
ud=typeof(ud)=='number'?ud:0;
clearTimeout(o.dly);
p=parseInt(o.obj.style[o.mde])+ud;
if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
p+=o.sz*(ud>0?-1:1);
}
o.obj.style[o.mde]=p+'px';
o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
}
}
}
function init(){
marquee.init({
ID:'fbComments',
Mode:'Vertical',
StartDelay:100,
});
}
init();