unthink media » javascript http://blog.unthinkmedia.com creativity + technology Wed, 11 Jan 2012 22:20:49 +0000 en hourly 1 Twitter-style Status TextArea w/ XUI JavaScript and CSS for PhoneGap http://blog.unthinkmedia.com/2009/12/15/twitter-style-status-textarea-w-xui-javascript-and-css/ http://blog.unthinkmedia.com/2009/12/15/twitter-style-status-textarea-w-xui-javascript-and-css/#comments Tue, 15 Dec 2009 18:18:46 +0000 Alex Britez http://blog.unthinkmedia.com/?p=306 Note: XUI is developed for WebKit (hence it’s light weight) since that is the mobile browser of choice for most devices. If something doesn’t seem to work, try using Chrome or Safari since they too use Webkit.

Twitter Style TextArea

Here is some code for a JavaScript, CSS, Twitter style status text area that i plan on using on a PhoneGap project i am working on. It makes use of the XUI Javascript framework, which i use throughout the project. XUI, compared to other Javascript frameworks is super light, and is developed by the the people behind PhoneGap
You could find the XUI framework at http://xuijs.com/

The code supports:

  • 140 character count down
  • Visual styling cue when you go over 140 characters
  • prompting text when textarea is empty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
 
<script type="text/javascript" src="includes/js/xui.js"></script>
<script type="text/javascript" src="includes/js/messageBox.js"></script>
<link rel="stylesheet" href="includes/css/messageBox.css" type="text/css" media="screen" title="no title" charset="utf-8" />
 
</head>
<body>
  <div class="promptTextField">
	<form name="myForm">
		<textarea id="messageAreaTxt" onKeyDown="checkCharCount(this.value)" onBlur="checkCharCount(this.value);handleMessageBlur(this.value);" onFocus="handleMessageFocus(event);" ></textarea>
	</form>
	<div id="textPromptText" onClick="document.myForm.messageAreaTxt.focus();" class="textPromptText active">Type in your message...</div>
	<div id="charCount">140</div>
  </div>
</body>
</html>

CSS Styling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

div.promptTextField{
		position:relative;
		height:100px;
		width:300px;
	}
 
	#messageAreaTxt{
		position:absolute;
		resize: none;
		top:0px;
		left:0px;
		height:100px;
		width:300px;
	}
	#charCount{
		position:absolute;
		top:78px;
		right:5px;
 
	}
	#textPromptText{
		-khtml-user-select: none;
		font-style: italic;
		color:#999999;
		position:absolute;
		top:5px;
		left:5px;
	}
	#textPromptText.inactive{
		display:none;
	}
	#textPromptText.active{
		display:block;
	}

JavaScript Coding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var MAX_CHARACTER_LENGTH=140;
 
	function checkCharCount(str){
		console.log(str.length + " characters typed")
		var count = MAX_CHARACTER_LENGTH - str.length
		x$('#charCount').html('inner', count.toString());	
		if((str.length-1) < (MAX_CHARACTER_LENGTH)){
			x$('#messageAreaTxt').setStyle('color', '#000000');
			x$('#messageAreaTxt').setStyle('background', '#FFFFFF');
			x$('#charCount').setStyle('color', '#000000');
		}else{
			x$('#messageAreaTxt').setStyle('color', '#FFFFFF');
			x$('#messageAreaTxt').setStyle('background', '#FF0000');
			x$('#charCount').setStyle('color', '#FFFFFF');
		}
	}
 
	function handleMessageFocus(event){
		document.getElementById('textPromptText').className = "inactive";
	}
 
	function handleMessageBlur(str){
		if(str.length == 0){
			document.getElementById('textPromptText').className = "active";
		}else{
			document.getElementById('textPromptText').className = "inactive"; 
		}
	}
]]> http://blog.unthinkmedia.com/2009/12/15/twitter-style-status-textarea-w-xui-javascript-and-css/feed/ 4