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.
Live demo
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 src="http://code.jquery.com/jquery-latest.min.js">
<script src="/jquery.shout-1.0.min.js"></script>
<script>
$(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>
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>
$.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>
$.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>
$(window).resize(function () {
$.fn.shout.textResize($(“#shout”), 1.8, 5);
});
</script>