Jquery simple scrool text
<div class="jp-title">
<div class="scrollingtext">
abcd
<label id="txtDate"/></div><div class="scrollingtext1">
<label id="txtDate123"/>
efgh
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
CSS styles
div.jp-title{
position:relative;
height:30px;
width:300px;
display:block;
overflow:hidden;
border:#CCCCCC 0px solid;
}
.scrollingtext{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
jquery code
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ right: -tw });
ob.animate({ right: ww }, 20000, 'linear', function() {
ob.trigger('marquee');
});
}).trigger('marquee');
var d = new Date();
var strDate = d.getDate() + "/" + (d.getMonth()+1) + "/" +d.getFullYear() ;
document.getElementById("txtDate").textContent=strDate;
});
Comments