15 Dec 2009

Twitter-style Status TextArea w/ XUI JavaScript and CSS for PhoneGap

4 Comments javascript, Mobile, programing, project

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Powered by WP Greet Box WordPress Plugin

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.

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

<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

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

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"; 
		}
	}

Popularity: 9% [?]

written by Alex Britez
I am a designer, developer & dad who interested in educational technology and using media for social goodness.

4 Responses to “Twitter-style Status TextArea w/ XUI JavaScript and CSS for PhoneGap”

Reply @zitterbewegung says:
July 19, 2010 at 5:54 am

Do you mind if I use it in an android project I am working on?
Reply @zitterbewegung says:
July 19, 2010 at 6:00 am

Do you mind if I use it in a personal project also? I am trying to send sms messages using phonegap and this would be very useful.
- Reply Alex Britez says:
  September 18, 2010 at 10:55 am
  
  Sure thing, use it however you\’d like
Reply harry says:
January 26, 2011 at 7:42 am

thank u for the example, you have know idea how long i just wanted to see how xui works cause i wasn’t getting anything.