├── README.md
├── twitlimit-0.2.0.compressed.js
├── twitlimit-0.2.0.js
└── examples
    └── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | #jQuery-TwitLimit
 2 | *A jQuery Plug-in*
 3 | 
 4 | ##Description
 5 | **Author**: Mike Helmick <mikeh@ydekproductions.com>  
 6 | **Last Edit**: July 14th, 2010  
 7 | **Version**: 0.2.0
 8 | 
 9 | 
10 | A nice, easy jQuery plug-in limiting the amount of characters on a give DOM element.
11 | 
12 | ##Usage
13 | * See example folder for usage https://github.com/michaelhelmick/jquery-twitlimit/tree/master/examples
14 | 
15 | ##License
16 | This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
17 | 
18 | This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
19 | 
20 | You should have received a copy of the GNU General Public Licensealong with this program.  If not, see <http://www.gnu.org/licenses/>.


--------------------------------------------------------------------------------
/twitlimit-0.2.0.compressed.js:
--------------------------------------------------------------------------------
1 | (function($){$.fn.twitLimit=function(_1){$.fn.twitLimit.defaults={limit:140,message:"%1 Characters Remaining.",counterElem:"#limit",allowNegative:false,dangerMode:true,dangerBold:true,dangerColors:{dark:"550505",medium:"980808",bright:"e90909"},onNegative:function(){},onPositive:function(){}};var o=$.extend({},$.fn.twitLimit.defaults,_1);o.limit=Math.abs(o.limit);function _2(_3){var _4=$("<p />");if(_3<=20&&_3>=10){var _5=$("<span />").attr("class","twitLimit_count").text(_3).css({"color":"#"+o.dangerColors.dark});}else{if(_3<10&&_3>0){var _5=$("<span />").attr("class","twitLimit_count").text(_3).css({"color":"#"+o.dangerColors.medium});}else{if(_3<=0){var _5=$("<span />").attr("class","twitLimit_count").text(_3).css({"color":"#"+o.dangerColors.bright});}else{return _3;}}}if(o.dangerBold==true){_5.css({"font-weight":"bold"});}if(_3<=20){_4.append(_5);}_5=_4.html();return _5;};function _6(_7,_8){_7=$(_7);_8=$(_8);if(o.allowNegative===false){if(_7.val().length>o.limit){_7.val(_7.val().substr(0,o.limit));}}if(o.dangerMode==true){_8.html(o.message.replace(/%1/,_2((o.limit-_7.val().length))));}else{_8.html(o.message.replace(/%1/,(o.limit-_7.val().length)));}if(o.limit-_7.val().length<0){o.onNegative(_7,_8);}if(o.limit-_7.val().length>=0){o.onPositive(_7,_8);}};return this.each(function(e){var _9=$(this);_9.bind("keydown keypress keyup change focus mouseout mouseover paste",function(e){_6(_9,o.counterElem);});if(_9.addEventListener){_9.addEventListener("input",function(){_6(_9,o.counterElem);},false);}_6(_9,o.counterElem);});};})(jQuery);


--------------------------------------------------------------------------------
/twitlimit-0.2.0.js:
--------------------------------------------------------------------------------
 1 | /***********************************************************************************************************
 2 | /	TwitLimit v0.2.0
 3 | /	by Mike Helmick - http://michaelhelmick.com
 4 | /	Last Modification: 7.14.2010
 5 | /	Documentation: http://blog.michaelhelmick.com/2010/07/15/twitlimit-jquery-character-limiter/
 6 | /	Examples: http://code.michalehelmick.com/twitlimit/
 7 | 
 8 | 
 9 |            ,--.       ,--.                            ,--.                ,--.  ,--.                      
10 | ,--. ,--.,-|  | ,---. |  |,-.  ,---. ,--.--. ,---.  ,-|  |,--.,--. ,---.,-'  '-.`--' ,---. ,--,--,  ,---. 
11 |  \  '  /' .-. || .-. :|     / | .-. ||  .--'| .-. |' .-. ||  ||  || .--''-.  .-',--.| .-. ||      \(  .-' 
12 |   \   ' \ `-' |\   --.|  \  \ | '-' '|  |   ' '-' '\ `-' |'  ''  '\ `--.  |  |  |  |' '-' '|  ||  |.-'  `)
13 | .-'  /   `---'  `----'`--'`--'|  |-' `--'    `---'  `---'  `----'  `---'  `--'  `--' `---' `--''--'`----' 
14 | `---'                         `--'                                                                        
15 | 
16 | 
17 | /	Licensed under both MIT and GPL licenses:
18 | /	http://www.opensource.org/licenses/mit-license.php
19 | /	http://www.gnu.org/licenses/gpl.html
20 | 
21 | /	Thanks jQuery for making javascript simple! :)
22 | /	Copyright 2010 Mike Helmick
23 | **********************************************************************************************************/
24 | 
25 | (function($) {
26 | 	
27 | 	$.fn.twitLimit = function(options) {
28 | 		
29 | 		$.fn.twitLimit.defaults = {
30 | 			limit: 140,								// Default limit, if no limit set upon selector. (In honor of Twitter <3)
31 | 			message: '%1 Characters Remaining.',	// Keep %1 intact when defining custom message. (%1 is replaced by number of characters left.)
32 | 			counterElem: '#limit', 					// ID or Class of element where you want the message to display.
33 | 			allowNegative: false,					// Whether to allow the count to go negative or not.
34 | 			dangerMode: true,						// Will change the number of characters left "%1" with the colors defined in dangerColors.
35 | 			dangerBold: true,						// Will make the number of characters left "%1" bold.
36 | 			dangerColors: {dark:'550505',			// Colors for dangerMode.
37 | 						   medium:'980808',			// Colors for dangerMode.
38 | 						   bright:'e90909'},		// Colors for dangerMode.
39 | 			onNegative: function(){},				// Called when character limit is less than zero.
40 | 			onPositive: function(){}				// Called for when character limit is greater than or equal to zero.
41 | 		};
42 | 			
43 | 		var o = $.extend({}, $.fn.twitLimit.defaults, options);
44 | 		
45 | 		o.limit = Math.abs(o.limit);
46 | 		
47 | 		function danger(count) {
48 | 			var $temp = $('<p />');
49 | 			
50 | 			if(count <= 20 && count >= 10)		var $count = $('<span />').attr('class', 'twitLimit_count').text(count).css({'color':'#'+o.dangerColors.dark});
51 | 			else if(count < 10 && count > 0)	var $count = $('<span />').attr('class', 'twitLimit_count').text(count).css({'color':'#'+o.dangerColors.medium});
52 | 			else if(count <= 0)					var $count = $('<span />').attr('class', 'twitLimit_count').text(count).css({'color':'#'+o.dangerColors.bright});
53 | 			else								return count
54 | 				
55 | 			if(o.dangerBold == true)	$count.css({'font-weight':'bold'});
56 | 			if(count <= 20)				$temp.append($count); $count = $temp.html();
57 | 			
58 | 			return $count;
59 | 		}
60 | 		
61 | 		function count(elem, counterElem) {
62 | 			elem = $(elem);
63 | 			counterElem = $(counterElem);
64 | 			
65 | 			if(o.allowNegative === false)	if(elem.val().length > o.limit)		elem.val(elem.val().substr(0, o.limit));
66 | 			
67 | 			if(o.dangerMode == true)		counterElem.html(o.message.replace(/%1/, danger((o.limit - elem.val().length))));
68 | 			else							counterElem.html(o.message.replace(/%1/, (o.limit - elem.val().length)));
69 | 			
70 | 			if(o.limit-elem.val().length < 0)		o.onNegative(elem, counterElem);
71 | 			if(o.limit-elem.val().length >= 0)		o.onPositive(elem, counterElem);
72 | 		}
73 | 	
74 | 		return this.each(function(e) {
75 | 			var toCheck = $(this);
76 | 			
77 | 			// Check limit upon each of the following events.
78 | 			toCheck
79 | 				.bind("keydown keypress keyup change focus mouseout mouseover paste", function(e) {
80 | 					count(toCheck, o.counterElem); 
81 | 				});
82 | 			
83 | 			if (toCheck.addEventListener) toCheck.addEventListener('input', function () { count(toCheck, o.counterElem); }, false);	
84 | 			count(toCheck, o.counterElem);
85 | 		});
86 | 		
87 | 	}
88 | 	
89 | })(jQuery);


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2 | 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3 |  
  4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  5 | <head> 
  6 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  7 | 	<title>Character Limit</title>
  8 | 	
  9 | 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 10 | 	<script type="text/javascript" src="js/twitlimit-0.2.0.compressed.js"></script>
 11 | 	
 12 | 	<script type="text/javascript"> 
 13 | 	$(document).ready(function(){
 14 | 		$('#limitThis').twitLimit({});
 15 | 		
 16 | 		$('#limitThis2').twitLimit({
 17 | 			message: 'You have %1 Characters left!',
 18 | 			counterElem: '#limit2',
 19 | 			allowNegative: true
 20 | 		});
 21 | 		
 22 | 		$('#limitThis3').twitLimit({
 23 | 			counterElem: '#limit3',
 24 | 			allowNegative: true,
 25 | 			dangerMode: false,
 26 | 			onNegative: function(){ $('#submit-button').attr('disabled', 'disabled'); },
 27 | 			onPositive: function(){ $('#submit-button').removeAttr('disabled'); }
 28 | 		});
 29 | 		
 30 | 		$('#limitThis4').twitLimit({
 31 | 			counterElem: '#limit4',
 32 | 			dangerBold: false,
 33 | 			dangerColors: {
 34 | 				dark: '5b04dd',
 35 | 				medium: '3d0fe9',
 36 | 				bright: '374aff'
 37 | 			}
 38 | 		});
 39 | 	});
 40 | 	</script>
 41 | </head> 
 42 |  
 43 | <body style="width: 450px;">
 44 | <h2>Demo running TwitLimit 0.2.0</h2>
 45 | 
 46 | <p><a href="http://blog.michaelhelmick.com/2010/07/15/twitlimit-jquery-character-limiter/" target="_blank">Documentation</a><br />
 47 | <a href="twitlimit-0.2.0.zip">Download</a></p>
 48 | 
 49 | <h4>Demo 1:</h4>
 50 | <span class="description">This example is using all default options of TwitLimit.</span>
 51 | <div class="code">
 52 | 	<p>
 53 | 	$(document).ready(function(){<br />
 54 | 	<span class="tab">$('#limitThis').twitLimit({});</span>
 55 | 	});
 56 | 	</p>
 57 | </div>
 58 | <div id="limit"></div>
 59 | <textarea id="limitThis"></textarea>
 60 | 
 61 | <hr />
 62 | 
 63 | <h4>Demo 2:</h4>
 64 | <span class="description">This example modifies the "message" option (%1 is used because it is replaced by the number characters left) and the "counterElem" which is where the message is displayed.</span>
 65 | <div class="code">
 66 | 	<p>
 67 | 	$(document).ready(function(){<br />
 68 | 	<span class="tab">$('#limitThis2').twitLimit({<br />
 69 | 		<span class="tab"><b>message:</b> 'You have %1 Characters left!',</span>
 70 | 		<span class="tab"><b>counterElem:</b> '#limit2',</span>
 71 | 		<span class="tab"><b>allowNegative:</b> true</span>
 72 | 	});</span>
 73 | 	});
 74 | 	</p>
 75 | </div>
 76 | <div id="limit2"></div>
 77 | <textarea id="limitThis2"></textarea>
 78 | 
 79 | <hr />
 80 | 
 81 | <h4>Demo 3:</h4>
 82 | <span class="description">This example disables "dangerMode", so the number of characters left won't go from dark to medium to bright red. It also adds listeners for when the count goes negative (it disables the submit button) and when it returns positive (it enables the submit button).</span>
 83 | <div class="code">
 84 | 	<p>
 85 | 	$(document).ready(function(){<br />
 86 | 	<span class="tab">$('#limitThis3').twitLimit({<br />
 87 | 		<span class="tab"><b>counterElem:</b> '#limit3',</span>
 88 | 		<span class="tab"><b>allowNegative:</b> true,</span>
 89 | 		<span class="tab"><b>dangerMode:</b> false,</span>
 90 | 		<span class="tab"><b>onNegative:</b> function(){ $('#submit-button').attr('disabled', 'disabled'); },</span>
 91 | 		<span class="tab"><b>onPositive:</b> function(){ $('#submit-button').removeAttr('disabled'); }</span>
 92 | 		
 93 | 	});</span>
 94 | 	});
 95 | 	</p>
 96 | </div>
 97 | <div id="limit3"></div>
 98 | <textarea id="limitThis3"></textarea>
 99 | <input type="submit" id="submit-button" value="Submit Post"/ >
100 | 
101 | <hr />
102 | 
103 | <h4>Demo 4:</h4>
104 | <span class="description">This demo changes the colors of the count changes and does not change the count bold (when 20 characters or less left) when dangerMode is enabled.</span>
105 | <div class="code">
106 | 	<p>
107 | 	$(document).ready(function(){<br />
108 | 	<span class="tab">$('#limitThis4').twitLimit({<br />
109 | 		<span class="tab"><b>counterElem:</b> '#limit4',</span>
110 | 		<span class="tab"><b>dangerBold:</b> false,</span>
111 | 		<span class="tab"><b>dangerColors:</b> {
112 | 			<span class="tab"><b>dark</b>: '5b04dd'</span>
113 | 			<span class="tab"><b>medium</b>: '3d0fe9'</span>
114 | 			<span class="tab"><b>bright</b>: '374aff'</span>
115 | 		</span>
116 | 		<span class="tab">}</span>
117 | 	});</span>
118 | 	});
119 | 	</p>
120 | </div>
121 | <div id="limit4"></div>
122 | <textarea id="limitThis4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu enim lectus. Quisque ac sapien dui. Donec scelerisque.</textarea>
123 | 
124 | 
125 | <div id="footer">
126 | 	<p><b><em>Copyright 2010 - Michael Helmick</em></b></p>
127 | 	<p><b>Contact <a href="mailto:code@michaelhelmick.com">code@michaelhelmick.com</a></b>
128 | 		<br /><em>Please only contact with ideas or issues with the code. Do not use this email for help with TwitLimit.</em></p>
129 | </div>
130 | </body>
131 | </html>


--------------------------------------------------------------------------------