Change Font Size After Decimal Point

April 21, 2024 Post a Comment

I am working with an Opencart E-Commerce website, I need to customize product price font size, for example: product price: $ 250.50 i need to set font size for $ = 16px; 250 = 22px

Solution 1:

$.each($('.price'), function(){
var price = $(this).html();
$(this).html(price.replace(/(\D*)(\d*\.)(\d*)/,'<span style="font-size:16px;">$1</span><span style="font-size:22px;">$2</span><span style="font-size:14px;">$3</span>'));
});

http://jsfiddle.net/gr8x5/10/

Solution 2:

Here's a quick and dirty example:

<html><head><style>.dollar_sign { font-size: 16px; }
        .dollars { font-size: 22px; }
        .cents { font-size: 14px; }
    </style></head><body><?$product = array('price' => '245.50');
    $part    = explode('.', $product['price']);
?><spanclass="dollar_sign">$</span><spanclass="dollars"><?=$part[0] ?></span>.<spanclass="cents"><?=$part[1] ?></span></body></html>

Solution 3:

Try this code

var pri = $(".price").text();
var sig = pri.split(" ");
var dol_smbl = "<span style='font-size:16px;'>" + sig[0] + "</span>";
var digits = sig[1].split(".");
befr_dec = "<span style='font-size:22px;'>" + digits[0] + "</span>";
aftr_dec = "<span style='font-size:14px;'>." + digits[1] + "</span>";
$(".price").html(dol_smbl + " " + befr_dec + aftr_dec);

Solution 4:

Can be beautifully done with a little css and regex. See this fiddle

the HTML :

<span class="price">$250.50</span>

the css :

.currency { font-size:16px; }
.number { font-size:22px; }
.decimal { font-size:14px; }

the javascript :

var price = $('span.price').text();  
    var pArry = price.match(/^(\$)(\d+)(\.\d+)?/);    
    var new_span = $(
        '<span class="currency">' + pArry[1] + '</span>' +
        '<span class="number">' + pArry[2] + '</span>' +
        '<span class="decimal">' + pArry[3] + '</span>');
    $('span.price').replaceWith(new_span);

Done

Solution 5:

Try like this

var my_price = $(".price").text();
var dol_smbl = "<span style='font-size:16px;'>"+my_price[0]+"</span>";
var price = split(" ",my_price);
var price_arr = split('.',price[1]);
befr_dec = "<span style='font-size:22px;'>"+price_arr[0]+"</span>";
aftr_dec = "<span style='font-size:14px;'>."+price_arr[1]+"</span>";
$(".price").html(dol_smbl + " " + befr_dec  + aftr_dec);

Html5 Website