Styling jQuery script output
up vote
2
down vote
favorite
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
javascript jquery html css
edited Nov 11 at 7:56
DPS
481112
asked Nov 11 at 7:34
Zach89
156
add a comment |
up vote
2
down vote
favorite
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
javascript jquery html css
edited Nov 11 at 7:56
DPS
481112
asked Nov 11 at 7:34
Zach89
156
2
Instead use.toFixed(5);set it to.toFixed(2);:w3schools.com/jsref/jsref_tofixed.asp
– לבני מלכה
Nov 11 at 7:37
1
I need to keep 5 decimal places though, just the first 2 bold or regular size with the remaining 3 smaller
– Zach89
Nov 11 at 7:43
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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
javascript jquery html css
edited Nov 11 at 7:56
DPS
481112
asked Nov 11 at 7:34
Zach89
156
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
javascript jquery html css
javascript jquery html css
edited Nov 11 at 7:56
DPS
481112
asked Nov 11 at 7:34
Zach89
156
edited Nov 11 at 7:56
DPS
481112
asked Nov 11 at 7:34
Zach89
156
edited Nov 11 at 7:56
DPS
481112
edited Nov 11 at 7:56
DPS
481112
edited Nov 11 at 7:56
DPS
481112
481112
asked Nov 11 at 7:34
Zach89
156
asked Nov 11 at 7:34
Zach89
156
asked Nov 11 at 7:34
Zach89
156
156
2
Instead use.toFixed(5);set it to.toFixed(2);:w3schools.com/jsref/jsref_tofixed.asp
– לבני מלכה
Nov 11 at 7:37
1
I need to keep 5 decimal places though, just the first 2 bold or regular size with the remaining 3 smaller
– Zach89
Nov 11 at 7:43
add a comment |
2
Instead use.toFixed(5);set it to.toFixed(2);:w3schools.com/jsref/jsref_tofixed.asp
– לבני מלכה
Nov 11 at 7:37
1
I need to keep 5 decimal places though, just the first 2 bold or regular size with the remaining 3 smaller
– Zach89
Nov 11 at 7:43
2
2
Instead use
.toFixed(5); set it to .toFixed(2); :w3schools.com/jsref/jsref_tofixed.asp– לבני מלכה
Nov 11 at 7:37
Instead use
.toFixed(5); set it to .toFixed(2); :w3schools.com/jsref/jsref_tofixed.asp– לבני מלכה
Nov 11 at 7:37
1
1
I need to keep 5 decimal places though, just the first 2 bold or regular size with the remaining 3 smaller
– Zach89
Nov 11 at 7:43
I need to keep 5 decimal places though, just the first 2 bold or regular size with the remaining 3 smaller
– Zach89
Nov 11 at 7:43
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
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'>
answered Nov 11 at 7:55
לבני מלכה
7,9691523
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?
– Zach89
Nov 11 at 8:00
of course you can I wull update answer(I use class to style as you want like color...)
– לבני מלכה
Nov 11 at 8:01
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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'>
answered Nov 11 at 7:55
לבני מלכה
7,9691523
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?
– Zach89
Nov 11 at 8:00
of course you can I wull update answer(I use class to style as you want like color...)
– לבני מלכה
Nov 11 at 8:01
add a comment |
up vote
2
down vote
accepted
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'>
answered Nov 11 at 7:55
לבני מלכה
7,9691523
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?
– Zach89
Nov 11 at 8:00
of course you can I wull update answer(I use class to style as you want like color...)
– לבני מלכה
Nov 11 at 8:01
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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'>
answered Nov 11 at 7:55
לבני מלכה
7,9691523
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'>
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> 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>answered Nov 11 at 7:55
לבני מלכה
7,9691523
edited Nov 11 at 8:03
answered Nov 11 at 7:55
לבני מלכה
7,9691523
answered Nov 11 at 7:55
לבני מלכה
7,9691523
answered Nov 11 at 7:55
לבני מלכה
7,9691523
7,9691523
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?
– Zach89
Nov 11 at 8:00
of course you can I wull update answer(I use class to style as you want like color...)
– לבני מלכה
Nov 11 at 8:01
add a comment |
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?
– Zach89
Nov 11 at 8:00
of course you can I wull update answer(I use class to style as you want like color...)
– לבני מלכה
Nov 11 at 8:01
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?
– Zach89
Nov 11 at 8:00
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?
– Zach89
Nov 11 at 8:00
of course you can I wull update answer(I use class to style as you want like color...)
– לבני מלכה
Nov 11 at 8:01
of course you can I wull update answer(I use class to style as you want like color...)
– לבני מלכה
Nov 11 at 8:01
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246726%2fstyling-jquery-script-output%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Instead use
.toFixed(5);set it to.toFixed(2);:w3schools.com/jsref/jsref_tofixed.asp– לבני מלכה
Nov 11 at 7:37
1
I need to keep 5 decimal places though, just the first 2 bold or regular size with the remaining 3 smaller
– Zach89
Nov 11 at 7:43