• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 383
  • Last Modified:

decrease font-size of all html elements

I want to decrease font-size of all html elements by -2 unit. Can I solve it using JQuery ?

my html elements has either px or pt as  font-size unit.

0
cofactor
Asked:
cofactor
  • 5
  • 3
2 Solutions
 
leakim971PluritechnicianCommented:
click on the - or + sign : http://jsfiddle.net/fDFNG/

<span>-</span><H3>HELLO</H3><span>+</span>

Open in new window

$("span").click(function() {
    var s = $("h3").css("font-size");
    var u = s.replace(/\d/g,"");
    if( $(this).text() == "-" ) {
        s = parseInt(s.replace(/\D/g,"")) - 1;
    }
    else {
        s = parseInt(s.replace(/\D/g,"")) + 1;
    }
    $("h3").css("font-size", s + u);
})

Open in new window

0
 
cofactorAuthor Commented:
Thanks for the comment.

Few issues in your code:

(i)your code works only for H3 element.  But I want it for all elements. e.g  input, td , span, textarea, a , select ,th .

(ii)I  want font-resize  ie  either increase or decrease by an offset value .  if I input offset = -2 , then all font-size will be decreased by -2 .  similarly , if I input offset = +2 , then all font-size will be increased by +2 .


so, truly  I am looking for a function like this

function fontResize(var offset){

// resize font with the given offset value using JQuery

}

Could you please provide a solution which will fit my requirement .
0
 
leakim971PluritechnicianCommented:
updated : http://jsfiddle.net/fDFNG/8/

<img src="http://upload.wikimedia.org/wikipedia/commons/5/52/Fairytale_button_add.png" id="plus" width="64px" /><img src="http://www.iconarchive.com/icons/deleket/button/256/Button-Delete-icon.png" id="moins" width="64px" />

<H3>HELLO</H3>
<input type="text" value="123">

Open in new window

$("#plus,#moins").click(function() {
        if( $(this).attr("id") == "moins" ) {
            fontResize(-2);
        }
        else {
            fontResize(2);
        }

})
    
function fontResize(offset){

    $("*", "body").each(function() {
        var s = $(this).css("font-size");
        if(s!=null) {
            var u = s.replace(/\d/g,"");
            s = parseInt(s.replace(/\D/g,"")) + offset;
            $(this).css("font-size", s + u);
        }
    })

}

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
cofactorAuthor Commented:
Still having some trouble with the code. I have put alerts in each itration.

>>> s = parseInt(s.replace(/\D/g,"")) + offset;

Could you please check with this line. This line is cumulatively increasing  value of s ....like 19 , 21 , 23, 25 , 27  in the iteraion and as a result I get a very BIG font-size.

What could be the issue there ?
0
 
cofactorAuthor Commented:
little typo

>>>.like 19 , 21 , 23, 25 , 27
it should be  .like 19 , 21 , 23, 25 , 27 ......so on
0
 
cofactorAuthor Commented:
Can you please restrict your code to resize font-size of   input, td , span, textarea, a , select ,th   element
only ??  I may not need all elements.
0
 
leakim971PluritechnicianCommented:
>Can you please restrict your code to resize font-size of   input, td , span, textarea, a , select ,th   element

$("input,td,span,textarea,a,select,th", "body").each(function() {

Open in new window

0
 
cofactorAuthor Commented:
your input was helpful.  This helped me to achieve the solution.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now