This time I will share jQuery Plugin and tutorial about Lightweight Forex Ticker Widget In jQuery – forex-ticker.js, hope it will help you in programming stack.
| File Size: | 5.06 KB |
|---|---|
| Views Total: | 1824 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
forex-ticker.js is a jQuery plugin for creating a compact Forex Ticker Widget to show the real-time forex tick data & currency exchange rates using 1forge.com‘s API. Current supports 500 forex currency pairs and commodities.
How to use it:
1. Put the forex-ticker.css in the header of the webpage that will provide the basic styles for the Forex Ticker Widget.
1 |
<link rel="stylesheet" href="css/forex-ticker.css"> |
2. Put both jQuery library and the forex-ticker.js at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="js/forex-ticker.js"></script> |
3. Add the forex currency pairs you want to convert between into the Forex Ticker Widget.
001 |
<div class="forex-ticker"> |
002 |
<table> |
003 |
<tr> |
004 |
<td class="currency-pair"> |
005 |
EUR/USD |
006 |
</td> |
007 |
<td class="price" data-currency-pair="EURUSD"> |
008 |
<div class="top"> |
009 |
010 |
</div> |
011 |
<div class="bottom"> |
012 |
<span class="first"></span><span class="last"></span> |
013 |
</div> |
014 |
</td> |
015 |
</tr> |
016 |
<tr> |
017 |
<td class="currency-pair"> |
018 |
USD/JPY |
019 |
</td> |
020 |
<td class="price" data-currency-pair="USDJPY"> |
021 |
<div class="top"> |
022 |
023 |
</div> |
024 |
<div class="bottom"> |
025 |
<span class="first"></span><span class="last"></span> |
026 |
</div> |
027 |
</td> |
028 |
</tr> |
029 |
<tr> |
030 |
<td class="currency-pair"> |
031 |
GBP/USD |
032 |
</td> |
033 |
<td class="price" data-currency-pair="GBPUSD"> |
034 |
<div class="top"> |
035 |
036 |
</div> |
037 |
<div class="bottom"> |
038 |
<span class="first"></span><span class="last"></span> |
039 |
</div> |
040 |
</td> |
041 |
</tr> |
042 |
<tr> |
043 |
<td class="currency-pair"> |
044 |
USD/CHF |
045 |
</td> |
046 |
<td class="price" data-currency-pair="USDCHF"> |
047 |
<div class="top"> |
048 |
049 |
</div> |
050 |
<div class="bottom"> |
051 |
<span class="first"></span><span class="last"></span> |
052 |
</div> |
053 |
</td> |
054 |
</tr> |
055 |
<tr> |
056 |
<td class="currency-pair"> |
057 |
AUD/JPY |
058 |
</td> |
059 |
<td class="price" data-currency-pair="AUDJPY"> |
060 |
<div class="top"> |
061 |
062 |
</div> |
063 |
<div class="bottom"> |
064 |
<span class="first"></span><span class="last"></span> |
065 |
</div> |
066 |
</td> |
067 |
</tr> |
068 |
<tr> |
069 |
<td class="currency-pair"> |
070 |
EUR/JPY |
