Cryptocurrency Data Ticker With jQuery - cryptoticker.js

File Size: 6.38 KB
Views Total: 3032
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cryptocurrency Data Ticker With jQuery - cryptoticker.js

A jQuery plugin to create a horizontal, auto-scrolling cryptocurrency ticker that displays the current prices, market caps, and percentage changes form popular cryptocurrencies such as Bitcoin, Litecoin, Ripple, Ethereum, Monero and much more. Heavily based on CoinMarketCap's API v1.

How to use it:

1. Import jQuery library and the Cryptocurrency Data Ticker's files into the document.

<link rel="stylesheet" href="cryptoticker.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery.cryptoticker.js"></script>

2. Create a container in which you want to place the Cryptocurrency Data Ticker.

<div class="ticker" id="example"></div>

3. Initialize the plugin to enable a default Cryptocurrency Data Ticker.

$('#example').cryptoticker();

4. Config the Cryptocurrency Data Ticker by overriding the default settings as displayed below:

  • id: search by id ("bitcoin" for example) - can only return one coin at a time
  • getTopCoins: return n coins - overrides 'top5' and 'top10' but not 'id'- default 10 coins
  • startIndex: default startIndex is 0, most likely 'bitcoin'
  • top5: returns top 5 coins by market cap - will not set if any of the above is already set
  • top10: returns top 10 coins by market cap - will not set if any of the above is already set
  • speed: time until slide ends - default 30 seconds
  • fadeInOutSpeed: time it takes to fade out after slide animation ends - default 2.5 seconds,
  • resetSpeed:1000: time it takes for the ticker to reset position after fading out - default 1 second
  • separatorColor: default separator color
  • separatorWidth: default separator width (px)
  • nameColor: default name color
  • priceColor: default price color
  • capColor: default market cap color
$('#example').cryptoticker({
  id:null,
  getTopCoins:null,
  startIndex:0,
  top5:false,
  top10:false, 
  speed:10000,  
  fadeInOutSpeed:2500,
  resetSpeed:1000, 
  separatorColor: '#555',
  separatorWidth:1, 
  nameColor:'#F9B016',
  priceColor:'#ffffff', 
  capColor:'#ffffff',
});

Changelog:

2019-06-13

  • Bugfix

2018-10-08

  • Bugfix

This awesome jQuery plugin is developed by pkellz. For more Advanced Usages, please check the demo page or visit the official website.