WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Miscellaneous

TextResize

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


TextResize - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

See it in action

To see it in action, head to: http://getfresh.ro/demos/text_resize/

What is TextResize?

TextResize is a jQuery plugin that allows your visitors to adjust the text size of your content.
TextResize adapts both the text size and the line height of the text according to the size requested.

TextResize can be set to allow a maximum number of text size increase/decrease, based on a custom size step. It also features a text reset button, that reverts the text to its initial size.

TextResize is constructed on a parent jQuery selector (e. g. to an element ID, class, tag name) and it can be applied to all child elements, or to a selection of child elements.
You can contain TextResize to a particular HTML element, or apply it to the whole page.

Choose the skin, apply, see effects

Applying the TextResize behavior to your website is simple. You just need to follow the steps below:
  1. Choose the element(s) to which you wish to apply the TextResize behavior.
  2. Choose the location of the text adjustment tools (Decrease, Revert, Increase)
  3. Choose the skin of the adjustment tools (18 currently available skins)
  4. You’re all set, simply paste the code in your page and enjoy
Usage:
<script type="text/javascript" src="textresize.jquery.js"></script> <script type="text/javascript"> $('#your_content').textResize({ createNav: 1, // creates the HTML for the resize links innerTags: '*', // or you can apply just a selection: e. g. 'p', 'div' navHolder: '#tools', // resize links location: decrease, revert, increase maxSteps: {increase: 5, decrease: 4} // how many times one can in/decrease }); </script> 

Updated v1.1

  • Fixed IE javascript issue.
  • New calling method – you can apply TextResize to a list of parent elements in your page:
    <script type="text/javascript" src="textresize.jquery.js"></script> <script type="text/javascript"> $('#your_content, #another_element').textResize({ // applies text resize to list of parent elements createNav: 1, // creates the HTML for the resize links innerTags: '*', // or you can apply just a selection: e. g. 'p', 'div' navHolder: '#tools', // resize links location: decrease, revert, increase maxSteps: {increase: 5, decrease: 4} // how many times one can in/decrease }); </script> 

Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
14 February 11

Last Update:
3 November 11

Compatible Browsers:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Keywords

eCommerce, eCommerce, All Items, custom, decrease, font, increase, jquery, resize, size, skins, text, utility, widget