All geek questions in one place

Change font size after decimal point

I work with the Opencart e-commerce website, I need to set the font size of the product price, for example: product price: $ 250.50 I need to set the font size for $ = 16px; 250 = 22px; .50 = 14px; how can i set a different font size for one amount .. ???

this is my dynamic php code displaying price text on my product page:

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

My product page does not constitute a single product with a price; there are many products with a price list.

thanks for any help, if someone asked the same question before that, please share with me that the links ...

+4
source share
8 answers
 $.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/

+5
source

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);
+3
source

Here is 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>
+2
source

Can be nicely done with css and regex. See fiddle

HTML:

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

css:

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

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

+2
source

try it

 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);
+1
source

The easiest way is to split this var? Take a look at the php explode() function.

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

+1
source

You can try this general 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 feed

+1
source

Use different span elements for these three different segments and define a class for them to individually assign different font styles. Spans are basically an inline element, so you don't have to worry about placing it.

For instance:

After rendering, your markup should look something 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; }
0
source

Source: https://habr.com/ru/post/1486760/

More articles:


All Articles