Solved

decrease font-size of all html elements

Posted on 2011-09-10
8
360 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:cofactor
Comment Utility
little typo

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

Author Comment

by:cofactor
Comment Utility
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
Comment Utility
>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
Comment Utility
your input was helpful.  This helped me to achieve the solution.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

743 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

17 Experts available now in Live!

Get 1:1 Help Now