CODEWITHSUNDEEP
css
Cindy
Cindy

Reputation: 41

Text resize feature

I need to make a control that has three T's of varying size that are linked. By clicking on each T the article text will resize to either a small, medium, or large font appropriately.

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

Thanks in advance.

UPDATE: Thanks for all of your responses. I went digging through Google a little further and found that this has potential: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript It's using JS to dynamically resize the font and this is exactly what I want to do. I'd much rather do this in CSS if possible still though - anyone?

Upvotes: 4

Views: 367

Answers (5)

Lark
Lark

Reputation: 4724

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

The best approach would be to set your page's default body size using either percentages or ems. You would create two extra classes for the larger and smaller font size for the page's container or <body> tag. These classes could use larger and smaller percentages / ems or you could use the keywords: xx-small, x-small, small, larger, x-large, xx-large. (NOTE: I left out smaller and larger since they seem not to work sometimes).

Then using JavaScript you could attach an onclick event to your three T's which would dynamically add the desired class to the page container (or <body> tag). If they clicked on the middle T then the applied large/small class would be removed returning the page to it's default font-size.

A few things to keep in mind:

  • A user can set a minimum font size for their browser so if you set your "small" size below that that setting, that user will never see your smallest font setting.
  • You will need to experiment with how your layout acts if a user has a larger default font-size setting.

Hope this helps and good luck!

Upvotes: 1

Darrell Brogdon
Darrell Brogdon

Reputation: 6983

Using jQuery you could 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 actually does use CSS to change the sizes. You would 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 the class 'small' to all elements that already have a class of 'text-to-resize' and removes the 'medium' and large classes. So where you might have this before the click:

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

You would have this after the click:

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

If you wanted to apply this to every element on the page then you would simply change setTextToSmall() to the following:

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

The benefit of jQuery (or other frameworks for that matter) is that it abstracts out the DOM which is very tricky across different browsers. For example, to do this in straight Javascript you might instinctively want to use document.getElementsByClassName(). However, that method doesn't exist in any version of IE.

Upvotes: 0

Axiol
Axiol

Reputation: 5962

You can use

("fontSize",+=3px)

If you don't want to have limit.

Upvotes: -1

Gabriel McAdams
Gabriel McAdams

Reputation: 58293

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.

Upvotes: 5

silentcontributor
silentcontributor

Reputation: 85

You could attach different CSS files depending on which 't' the person has clicked (changing the paragraph text size). I'm sure there's a better way, but that'll get the job done!

Upvotes: 0

Related Questions