MonthJune 2012

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.


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

jQuery Code:




			padding: 7px 0 7px 5px;
			line-height: 1.4;
			font-size: 14px;
			outline: 0 !important;
			margin:10px auto;
			-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;
			background-clip: padding-box;
			-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);
			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;
			border:solid #fff 2px;
			box-shadow:  0px 0px 3px 2px rgba(000, 000, 000, 0.2);

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 The database will be named “employees”.

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

With all modules setup it should look like this.

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

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.

Starting sever

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.

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

© 2018 Aldo Lugo

Theme by Anders NorenUp ↑