Thursday, April 17, 2014

Jquery Easy ticker

In this article i am going to explain how to add ticker in website using jquery.

Jquery is used to create many functionality for website.We need library files to perform this action.Please find the demo below.

Demo


Lorem Ipsum is simply dummy text of the printing and typesetting industry
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Lorem Ipsum is simply dummy text of the printing and typesetting industry
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Lorem Ipsum is simply dummy text of the printing and typesetting industry
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.


HTML Code

<div class="test">
      <div>
        <div class="page-title"> <a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
        </div>
        <div class="page-title"> <a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
        </div>
        <div class="page-title"> <a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
        </div>
      </div>
    </div>

CSS Code

<style type="text/css">
    .test{border:1px solid #ccc; padding:10px}
    .page-title{ padding:10px; border-bottom:1px solid #ccc}
</style>

Jquery Files

   <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    <script type="text/javascript" src="http://vaakash.github.io/jquery/easy-ticker.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script type='text/javascript'>//<![CDATA[
    $(function(){
    $('.test').easyTicker({
        direction: 'up' //you can change direction down and up
    });
    });//]]> 
   
    </script>

Please share feedback and comments.Thanks!!

No comments:

Post a Comment