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

Popular posts from this blog

what is Event Cache table in sharepoint

CAML Query syntax and options in SharePoint

Change anchor link url in sharepoint calender