Shout for jQuery

Shout is a jQuery plugin that changes an <input> field into a “shouting box”, displaying its text at the biggest size readable on a single line.

You can download the plugin here:

Click here to visit the official plugin page on the jQuery website.

Live demo

Try the plugin here:
http://www.whiletrue.it/demoshout/index.html

Default Behavior

This plugin will transform an <input> element into a “shouting box”, displaying its text at the biggest size readable on a single line.

You can use the plugin for this purpose “as is” (without specifying or changing any settings), if the DOM element containing the text has an “id” attribute with a unique value.

Here’s an example of an <input> element that fit the convention:

<input type="text" id="shout" /> 

This is the relative sample plugin use:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
<script type="text/javascript" src="/jquery.shout-1.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#shout").shout();
  });
</script>

Plugin Settings

Like most jQuery plugins, this plugin contains settings that can be configured in order to change the plugin’s behavior.  You can change the settings in two ways:

1.  You can denote the settings you want in an object literal and pass that object into the plugin when you invoke it:

<script type=”text/javascript”>
var settings= {zoomRatio:1.5, unaffectedLetters:6};
$(“#shout”).shout(settings);
</script>

2.  You can individually alter each of the ‘defaults’ properties of the plugin:

<script type=”text/javascript”>
$.fn.shout.defaults.zoomRatio = 1.5;
$.fn.shout.defaults.unaffectedLetters = 4;
$(“#shout”).shout();
</script>

Here is a list of all of the settings and how they are used:

 

zoomRatio

———————–

Possible values: every integer > 0

Default value: 1.7

The zoom multiplier applied to the text. The value for the parameter should be chosen between a span of 1.0 to 3.0 .

 

 

unaffectedLetters

———————–

Possible values: every integer > 0

Default value: 5

The number of letters unaffected by the zoomRatio multiplier. This parameter is used to limit excessive size of the first letters.

The value for the parameter should be chosen between a span of 1 to 30.

 

Public Functions

This plugin contains a function that can be called individually:

 

textResize(), with the parameters:

–target: a jQuery object representing the <input> field

–zoomRatio: an integer, XXX (typical values are from 1.0 to 3.0, default value is 1.7)

–unaffectedLetters: an integer, XXX (typical values are from 1 to 30, default value is 5)

 

The function can be called in your JavaScript via the plugin, as shown in the example below:

<script type=”text/javascript”>
$.fn.shout.textResize($(“#shout”), 1.5, 5);
</script>

The function can also be used as a callback when the window layout changes, as shown in the example below:

<script type=”text/javascript”>
$(window).resize(function () {
$.fn.shout.textResize($(“#shout”), 1.8, 5);
});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *