Marquee JS

by Zuhaib Siddiqui

HTML

<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
 <section id="cpi_ticker">
    	
        <div class="heading_wrapper">
    	<div class="heading">CPI
        	<a href="javascript:void(0)" id="cpi_ticker_up" class="btn_up"><i class="fa fa-sort-up"></i> UP</a>
            <a href="javascript:void(0)" id="cpi_ticker_down" class="btn_down"><i class="fa fa-sort-desc"></i> DOWN</a>
        </div>
        </div>
        
        <div class="data">
        
        <!--<marquee scrollamount="2" behavior="scroll" direction="right" onmouseover="this.stop();" onmouseout="this.start();">-->
    <ul>
    	<li>Pine <i class="fa fa-angle-up"></i> 0.5</li>
    	<li>Assort Nuts <i class="fa fa-angle-down"></i> -16.3</li>
    	<li>Tomacus <i class="fa fa-angle-up"></i> 7.3</li>
        <li>Garic - 0.0 </li>
    	<li>Pine <i class="fa fa-angle-up"></i> 0.5</li>
    	<li>Assort Nuts <i class="fa fa-angle-down"></i> -16.3</li>
    	<li>Tomacus <i class="fa fa-angle-up"></i> 7.3</li>
        <li>Garic - 0.0 </li>
    </ul>
        </div>
    
    </section>

CSS

#cpi_ticker{
	position:relative;
	width:100%;
	float:left;
	height:26px;
	margin:10px 0;
	overflow:hidden;
	background-color: #fff;}
	
#cpi_ticker .heading_wrapper{
	position:absolute;
	left:0;
	top:0;
	z-index:9;}

#cpi_ticker .heading{
	  display: inline-block;
  background-color: #7c2a2b;
  color: #FFF;
  position: relative;
  padding: 8px 10px 6px 8px /*8px 30px 6px 8px*/;
  font-size: 14px;}
	
#cpi_ticker .heading [class^="btn_"]{
	position:absolute;
	right:6px}
	
#cpi_ticker .heading .btn_up{
	top:2px;}
	
#cpi_ticker .heading .btn_down{
	top:8px;}
	
#cpi_ticker .data{
    display: block;
    padding: 3px 0 0;
	

    width: 300px;
    overflow: hidden;
    border:1px solid #ccc;
    background: black;
    color: rgb(202, 255, 195);}
	
#cpi_ticker .data ul{
	margin:0;}
	
#cpi_ticker .data ul > li{
	 display: inline-block;
  white-space: pre-line;
  padding: 0 15px;
  margin-top: -4px;
  padding-bottom: 5px;}
	
#cpi_ticker .data .fa-angle-up:before{
	color: #7c2a2b;}
#cpi_ticker .data .fa-angle-down:before{
	color: #017e00;}

#cpi_ticker .data .fa-angle-up:before,
#cpi_ticker .data .fa-angle-down:before{
  font-size: 22px;
  display: inline-block;
  padding: 0 4px;}

JavaScript

$(function () {
    $('#cpi_ticker .data').marquee({
        duration: 5000,
        direction: 'right',
        pauseOnHover:true
    });
    
    
    $('#cpi_ticker_up').click(function(){
        //alert('left');
        $('#cpi_ticker .data').marquee('destroy');
        $('#cpi_ticker .data').marquee({
            duration: 5000,
            direction: 'left',
            pauseOnHover:true
        });
        
    });
    
    $('#cpi_ticker_down').click(function(){
        //alert('right');
        $('#cpi_ticker .data').marquee('destroy');
        $('#cpi_ticker .data').marquee({
            duration: 5000,
            direction: 'right',
            pauseOnHover:true
        });
        
    });  
       
});