June 2012 - Aldomatic

Mobile Friendly Clearable Text boxes Using jQuery

This is a quick and dirty example of how to make a mobile friendly text box clearable. This could easily be turned into a jquery plugin.

HTML:


<div class="ui-input">
		<input name="firstname" type="text"  id="firstname" placeholder="First Name">
		<span class="ui-icon-delete"></span>
	</div>
	
	<div class="ui-input">
		<input name="lastname" type="text" id="lastname" placeholder="Last Name">
		<span class="ui-icon-delete"></span>
	</div>

jQuery Code:


$(function(){
	$("input").focus(function(){
		$(this).parent().addClass("ui-focus");
		$(this).parent().find(".ui-icon-delete").show();
	});
	$("input").blur(function(){
		$(this).parent().removeClass("ui-focus");
	});

	$(".ui-icon-delete").click(function(){
		$(this).parent().find("input").val("");
		$(this).hide();
	});
});

CSS:


input{
			width:86%;
			padding: 7px 0 7px 5px;
			line-height: 1.4;
			font-size: 14px;
			border:none;
			outline: 0 !important;
			margin-left:5px;
		}
		#form{
			margin:10px auto;
			padding:10px;
		}
		.ui-input{
			-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
			box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
			position: relative;
			border: 1px solid #CCC;
			color: #333;
			text-shadow: 0 1px 0 white;
			background: white;
			border-radius:10px;
			background-clip: padding-box;
			margin-bottom:10px;			
		}
		.ui-focus{
			-webkit-box-shadow:  0px 0px 3px 2px rgba(0, 25, 288, 0.3);
			box-shadow:  0px 0px 3px 2px rgba(0, 93, 288, 0.3);
		}
		.ui-icon-delete{
			padding: 0;
			margin: 0;
			background: rgba(0, 0, 0, 0.398438) url(icons-18-white.png) -72px 50%;
			background-position: -72px 50%;
			background-size: 776px 18px;
			display:none;
			float:right;
			border:solid #fff 2px;
			width:18px;
			height:18px;
			position:relative;
			top:8px;
			right:8px;
			border-radius:20px;
			box-shadow:  0px 0px 3px 2px rgba(000, 000, 000, 0.2);
			cursor:pointer;
		}

View Demo

Disable Autocorrect & Autocapitlize In Mobile Forms

Disabling autocorrect seems obvious when dealing with mobile forms. This especially comes true in a log in page or creating an account page.


<input type="text" name="some-name" autocapitalize="off"/>
<input type="text" name="another-name" autocorrect="off"/>

For further clarification, see the Safari Web Content Guide.

Working with NodeJS, CouchDB and Express Framework

This is a simple example of using node.js, nano (couch db modules) and the express framework to retrieve some data from a couch instance.

Setting up the modules

We will be using a couch instance from www.iriscouch.com. The database will be named “employees”.

var nano = require('nano')('http://lugomatic.iriscouch.com');
var db = nano.use('employees');

1 2	var nano = require('nano')('http://lugomatic.iriscouch.com'); var db = nano.use('employees');

We need to include the express module and create an express server:

var app = require('express').createServer();

1	var app = require('express').createServer();

With all modules setup it should look like this.

var nano = require('nano')('http://lugomatic.iriscouch.com');
var db = nano.use('employees');
var app = require('express').createServer();

var nano = require('nano')('http://lugomatic.iriscouch.com');

var db = nano.use('employees');

var app = require('express').createServer();

We need to give express access to the imgs, css and js directories so it can retrieve our assets.

app.configure(function(){
 app.use("/public", express.static(__dirname + '/public'));
});

app.configure(function(){

app.use("/public", express.static(__dirname + '/public'));

});

Setting up a route

We are setting up a route to “all” that will call a view from the couch instance and retrieve some data.

app.get('/all', function(req, res){
	db.view('getAll','getAll',function (error, body, headers) {
     res.send(body, 200);
    });
});

app.get('/all', function(req, res){

db.view('getAll','getAll',function (error, body, headers) {

res.send(body, 200);

});

Starting sever

app.listen(3000);
console.log('App is running at http://localhost:3000');

1 2	app.listen(3000); console.log('App is running at http://localhost:3000');

Point your browser to http://localhost:3000/all. You should see a JSON object return like below. I only added 2 employees for the demo.

{
    "total_rows": 2,
    "offset": 0,
    "rows": [{
        "id": "8c370768eafc4d67b0d743ffc5000e5d",
        "key": "Eric Vaughan",
        "value": ["Web Developer", true]
    }, {
        "id": "8c370768eafc4d67b0d743ffc5002f27",
        "key": "Joe Lopez",
        "value": ["Web Developer", true]
    }]
}

{

"total_rows": 2,

"offset": 0,

"rows": [{

"id": "8c370768eafc4d67b0d743ffc5000e5d",

"key": "Eric Vaughan",

"value": ["Web Developer", true]

}, {

"id": "8c370768eafc4d67b0d743ffc5002f27",

"key": "Joe Lopez",

"value": ["Web Developer", true]

}]

}

I will go over how to create a couch instance, create a view and add some data in another post.

Aldomatic

Full Stack Web/Software Developer & Cloud Developer from Dallas, TX

About Me

Search

Tags

MonthJune 2012