?
Solved

decrease font-size of all html elements

Posted on 2011-09-10
8
Medium Priority
?
376 Views
Last Modified: 2012-05-12
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
Comment
Question by:cofactor
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36516518
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
 

Author Comment

by:cofactor
ID: 36516558
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 600 total points
ID: 36516590
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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 

Author Comment

by:cofactor
ID: 36516737
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
 

Author Comment

by:cofactor
ID: 36516740
little typo

>>>.like 19 , 21 , 23, 25 , 27
it should be  .like 19 , 21 , 23, 25 , 27 ......so on
0
 

Author Comment

by:cofactor
ID: 36516791
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 600 total points
ID: 36517746
>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
 

Author Comment

by:cofactor
ID: 36528701
your input was helpful.  This helped me to achieve the solution.
0

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

766 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question