change font size after decimal point

S

9

5

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; .50 = 14px;

How can I set different font sizes for a single amount..???

this s my dynamic php code that display price text to my product page:

<span class="price"><?php echo $product['price']; ?></span>

my product list page not a single product with price, there is a lots of product with price list.

thanks for any help, if anybody asked the same question before here, please share with me those links...

Shortbread answered 18/6, 2013 at 7:26 Comment(0)

N

9

$.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/

Nympho answered 18/6, 2013 at 7:46 Comment(3)

thanks for your answer, its working for single product.... but when tried multiple product lists same page, i got result first product price repeat wit all other product price... can you check your example..?? – Shortbread 18/6, 2013 at 8:7

@kuraiinazuma... thank you its working now... one more question, my site have 2 currencies, USD $, and Kuwait Dinar KD, how can i set both of them this code.? your above answer only working with USD $.. i need Kuwait KD too... any idea...? thanks – Shortbread 18/6, 2013 at 8:25

Great code. You can also make it dynamic: '$1$2<span style="font-size: smaller;">$3</span>' (or use 70% or so. – Hysteresis 30/3, 2017 at 10:54

R

3

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']);
?>
    <span class="dollar_sign">$</span><span class="dollars"><?= $part[0] ?></span>.<span class="cents"><?= $part[1] ?></span>   
</body>
</html>

Regazzi answered 18/6, 2013 at 7:41 Comment(0)

E

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);

Evenson answered 18/6, 2013 at 8:10 Comment(0)

B

3

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

Brita answered 18/6, 2013 at 8:18 Comment(0)

A

1

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);

Abbreviate answered 18/6, 2013 at 7:32 Comment(0)

E

1

The easiest way would be to split up that var? Look at the php function explode().

http://php.net/manual/de/function.explode.php

Ecto answered 18/6, 2013 at 7:32 Comment(0)

O

1

You can try this generic approach

$('.price').each(function () {
    var $this = $(this),
        txt = $this.text(),
        splt = txt.split('.'),
        spltFirst = splt.pop(),
        spn3 = $('<span/>', {
            text: spltFirst,
                'class': 'font-small'
        }),
        spltSecond = splt.pop(),
        spn1 = $('<span/>', {
            text: spltSecond.substring(0, spltSecond.lastIndexOf('$') + 1),
                'class': 'font-medium'
        }),
        spn2 = $('<span/>', {
            text: spltSecond.substring(spltSecond.lastIndexOf('$') + 1) + '.',
                'class': 'font-big'
        });
    $this.text('');
    $this.append(spn1).append(spn2).append(spn3);
});

Check Fiddle

Obsolete answered 18/6, 2013 at 8:6 Comment(0)

C

0

Use different span element for those three different segments and set class for them individually to assign different font styles. Basically spans are inline element, so you dont need to worry about its placement.

For example:

After rendering your markup should be like this,

<span class="price">
    <span class="currencySymbol">$</span>
    <span class="amt1">250</span>
    <span class="amt2">.50</span>
</span>

then in CSS:

.currencySymbol{ font-size:16px; } 
.amt1{ font-size:22px; } 
.amt2{ font-size:14px; }

Cist answered 18/6, 2013 at 7:34 Comment(2)

its not static text, its dynamically generated price text... see my question – Shortbread 18/6, 2013 at 7:46

@Shortbread well, i dont have any ideas about php, you can make your php code to render your html like i given. I think this would be cleaner in your case. – Cist 18/6, 2013 at 7:50

P

0

A possible simple dynamic way using only split().

This will wrap decimals in a <small> tag on each element having a class format .

document.querySelectorAll(".format").forEach((e) => {
  let txt = e.innerHTML.split(".")
  e.innerHTML = txt[0] + ".<small>" + txt[1] + "</small>"
})

.format {font-size:3rem}
small {font-size:1.4rem}

<div class="format">34454.545432</div>
<div class="format">0.0000463533</div>
<div class="format"><mark>Hello</mark> -8765.9876</div>

Powwow answered 17/1, 2020 at 21:18 Comment(0)

Recommended topics

Hot tags