Geek Answers Handbook

Text Resize Function

I need to make a control that has three T of different sizes that are connected. By clicking on each T, the text of the article will resize to small, medium or large font accordingly.

Does anyone know how I can do this? Also, do you know about a site that uses this feature to resize text?

Thanks in advance.

UPDATE: Thanks for all your answers. I went a little deeper into Google and found that it has potential: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript It uses JS to dynamically change the font size, and that’s exactly what I want to do. I would rather do it in CSS, if possible, though - anyone?

+4
source share
5 answers

You can do this with CSS - if all of your fonts are percentages, then you can set one font size for the document, and all children will be a percentage of that.

+5
source

This approach will not be implemented using CSS only. You will need to use CSS in conjunction with JavaScript.

A better approach would be to set the default body size using either percent or ems. You would create two additional classes for larger and smaller font sizes for the page container or the <body> . These classes could use the larger and lower percentages / ems, or you could use the keywords: xx-small, x-small, small, large, x-large, xx-large. (NOTE: I left less and more as they don't seem to work sometimes).

Then, using JavaScript, you can attach the onclick event to your three Ts, which will dynamically add the desired class to the page container (or the <body> ). If they clicked on the middle T, then the applied large / small class would be deleted, returning the page to its default size.

A few things to keep in mind:

  • The user can set the minimum font size for his browser, so if you set your "small" size below this parameter, this user will never see your smallest font settings.
  • You will need to experiment with how your layout works if the user has a larger default font size.

Hope this helps and good luck!

+1
source

You can attach different CSS files depending on which "t" person clicked (by resizing the paragraph text). I am sure there is a better way, but it will do the job!

0
source

Using jQuery, you can do something like this:

 $(function(){ $('#smallT').click(setTextToSmall); $('#mediumT').click(setTextToMedium); $('#largeT').click(setTextToLarge); }); function setTextToSmall(evt) { $('.text-to-resize').addClass('small').removeClass('medium').removeClass('large'); } // Have similar setTextTo.. functions for Medium and Large here

To clarify this, CSS is actually used for resizing. You will have three CSS classes named "small", "medium" and "large":

 .small { font-size: 0.5em; } .medium { font-size: 1em; } .large { font-size: 1.5em; }

The setTextToSmall() function is called when the user clicks on the small "T". It adds a small class to all elements that already have a text-to-resize class, and removes the middle and large classes. So, if you have it until you click:

 <div class="text-to-resize">Some sample text</div>

You will have this after clicking:

 <div class="text-to-resize small">Some sample text</div>

If you want to apply this to every element of the page, you simply change setTextToSmall() to the following:

 function setTextToSmall(evt) { $().addClass('small').removeClass('medium').removeClass('large'); }

The advantage of jQuery (or other frameworks for that matter) is that it abstracts the DOM, which is very complex in different browsers. For example, in direct Javascript, you can instinctively use document.getElementsByClassName() . However, this method does not exist in any version of IE .

0
source

you can use

 ("fontSize",+=3px)

If you do not want to have a restriction.

-one
source

More articles:


All Articles