Styling jQuery script output

Question

So here’s the code

 <script>
function get_price(){
        var price_margin = 0.00174;
        jQuery.get("https://min-    api.cryptocompare.com/data/price?    fsym=XRP&tsyms=USD").then(function(data){
        jQuery('#xrp_price').text(function(price){
            return "PRICE " + data["USD"].toFixed(5);
        });
    .......

That returns a value 0.45678 for e.g but I’d like to make the last 3 digits really small so just the 0.45 stands out. I have tried changing the .text to .html and adding or but that just makes the whole value bold and not the last 3 digits. Hmmmmmm (scratches chin). All help is greatly appreciated

Instead use .toFixed(5); set it to .toFixed(2); :w3schools.com/jsref/jsref_tofixed.asp — לבני מלכה
– לבני מלכה, Commented Nov 11, 2018 at 7:37
I need to keep 5 decimal places though, just the first 2 bold or regular size with the remaining 3 smaller — Zach89
– Zach89, Commented Nov 11, 2018 at 7:43

לבני מלכה · Accepted Answer · 2018-11-11 08:03:32Z

2

Instead set .text set .html

and set the 3 first chars in span with class='bold'

and the other chars get by use data.toFixed(5).slice(3) and set another class='small'

then style in css according classes in html

    var data=0.45678 ;
    $('#xrp_price').html(function(price){
        return "PRICE <span class='bold'>" + data.toFixed(2) + "</span> <span class='small'>"+ data.toFixed(5).slice(3) + "</span>";
    });

.bold{
  font-weight: bold;
}
.small{
font-size:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xrp_price"></div>

EDIT: You can use <small> DOM instead <span class='small'>

edited Nov 11, 2018 at 8:03

answered Nov 11, 2018 at 7:55

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zach89 Over a year ago

Excellent! Works a treat. Can it be done within the script itself without using spam? For instance using <small> to make the last 3 digits smaller?

לבני מלכה Over a year ago

of course you can I wull update answer(I use class to style as you want like color...)

Collectives™ on Stack Overflow

Styling jQuery script output

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related