Jquery Easy ticker – Demo

by Aakash Chakravarthy

HTML

<script src="http://www.aakashweb.com/resources/js/jquery.easing.js"></script>
<script src="http://www.aakashweb.com/resources/js/jquery.easy-ticker.js"></script>
<h2>Basic working - Demo 1</h2>
<h3>Direction: Up</h3>
<div class="demo1">
    <div>
        <div>
            <a href="#">The world of Gilbert and George</a>
            <p>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</p>
        </div>
        
        <div>
            <a href="#">From propaganda to pop artist</a>
            <p>Song Byeok had every reason to be pleased with his success. A gift for drawing led to a prestigious career as a propaganda artist and full membership in North Korea's communist party.</p>
        </div>
        
        <div>
            <a href="#">Japan's inspirational footballer</a>
            <p>CNN's Kyung Lah sits down with Japan's World Cup-winning captain to reflect on their win amid tragedy.</p>
        </div>
        
    </div>
</div>

<h2>Basic working - Demo 2</h2>
<h3>Direction: Down</h3>
<div class="demo2">
    <div>
        <div>
            <a href="#">The world of Gilbert and George</a>
            <p>The art duo of Gilbert and George on how their work can ruffle feathers and the benefits of routine.</p>
        </div>
        
        <div>
            <a href="#">From propaganda to pop artist</a>
            <p>Song Byeok had every reason to be pleased with his success. A gift for drawing led to a prestigious career as a propaganda artist and full membership in North Korea's communist party.</p>
        </div>
        
        <div>
            <a href="#">Japan's inspirational footballer</a>
            <p>CNN's Kyung Lah sits down with Japan's World Cup-winning captain to reflect on their win amid tragedy.</p>
        </div>
        
    </div>
</div>

<h2>The "visible" property</h2>
<p>The <code>visible</code> property can be used to change the no of default visible elements</p>
<div...

CSS

.demo1{
    border: 1px solid #ccc;
    margin-top: 10px;
}
.demo1 div div{
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.demo2{
    border: 1px solid #ccc;
    margin-top: 10px;
    font-size: 12px;
}
.demo2 div div{
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.demo3{
    font-family: "Arial" sans-serif;
    border: 3px solid #CE00CE;
    margin-top: 10px;
    font-size: 12px;
    background: #639 url('http://www.aakashweb.com/resources/images/pages/jquery-easy-ticker/hot-news.png') no-repeat 10px 3px;
    color: white;
    border-radius: 10px;
}
.demo3 ul li{
    padding: 5px 10px 5px 50px;
    list-style: none;
}


.demo4{
    border: 2px solid #FF9900;
    margin-top: 10px;
    border-radius: 10px;
}
.demo4 div div{
    padding: 10px 10px 10px 60px;
    border-bottom: 1px solid #FF9900;
    background: url(http://www.aakashweb.com/resources/images/pages/jquery-easy-ticker/rss.png) no-repeat 15px center;
    border-radius: 10px;
}

.demo5{
    border: 2px solid #FF3333;
    margin-top: 10px;
    border-radius: 10px;
    width: 500px;
    -webkit-box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
}
.demo5 ul{
    padding: 0;
}
.demo5 ul li{
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #FF3333;
    border-radius: 10px;
    list-type: none;
    margin: 0;
}
.et-run{
    background-color: #0cf;
    color: white;
    border: 1px solid black;
}

JavaScript

$('.demo1').easyTicker({
    direction: 'up'
});


$('.demo2').easyTicker({
    direction: 'down'
});

$('.demo3').easyTicker({
    visible: 1,
    interval: 2500
});

$('.demo4').easyTicker({
    direction: 'up',
    easing: 'easeOutBounce',
    interval: 2500
});

$('.demo5').easyTicker({
    direction: 'up',
    visible: 3,
    controls: {
        up: '.btnUp',
        down: '.btnDown',
        toggle: '.btnToggle'
    }
});