Solved

decrease font-size of all html elements

Posted on 2011-09-10
8
363 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
  • 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 150 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 150 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now