html5 datetime

HTML5 Input Type datetime

HTML5 Input Type datetime is just like Input Type Date except it will allow visitor to select a date and time (with time zone).

You can call this datetime picker using input type="datetime" on your input field.This will certainly reduce your development time so need nasty Javascript code. Read more

HTML5 Input Type Email

A typical email address structure is [email protected]
As you can never trust your website user so you have to check the email id when user submit the form.
To solve this, HTML5 came with a news input type email.
The syntax is as basic as a text input you just have to use type="email".

Some advantage of using this new Email input type is:

  • This input field will be automatically validated when submitted.
  • On mobile device like iPhone or on Android will display a keyboard with the @ symbol provided on the primary screen

Syntax for this Input Type:

<input type="email" name="usremail" />
html5 input date

HTML5 Input Type Date

HTML5 Input Type Date will allows the user to select a date.
Previously this is done by Javascript date picker.
To make you life easier you can now call this date picker by simply using this
type="date" on your input field.

May be looks like this way :

<input type="date" name="birthday" />

Currently the latest version of Chrome, Opera and Safari browser supporting this.

If you are using any of this above browser then you are lucky to see it on action

Date Picker:

The code i used abode is:

<form action="#">
Date Picker: <input type="date" name="bday" />
<input type="submit" />
</form>

Or it may look like the screenshot below

html5 input date

color Input Type

HTML5 Input Type Color

You can get color input box in html5 with this attribute type="color".
With this new html5 Input Type Color, you no longer need a complex Javascript color picker.

Not all major browsers support all the new input types. Only latest version of Chrome and Opera support this.
If the browser are not supported, they will behave as regular text fields.

Select your color: <input type="color" name="favcolor" />

color Input Type

What is jQuery Mobile

jQuery Mobile is a HTML5 based user interface system for all popular mobile device platforms.It built on the rock-solid jQuery and jQuery UI foundation.
jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.
See the full list here.
Read more

HTML5 Autocomplete Attribute

When HTML5 autocomplete is on, the browser will automatically complete values that the user has entered before.
This HTML5 autocomplete attribute works with the following input types: text, search, url, tel, email, password, datepickers, range, and color.

Also you can turn off this autocomplete attribute by using this attribute autocomplete="off"

<form action="/" autocomplete="on">
  First name:<input type="text" name="f_name" />
  E-mail: <input type="email" name="email" autocomplete="off" />
  <input type="submit" />
</form> 

On this above HTML form autocomplete on and autocomplete is off for email input field.

Best SEO Plugins For WordPress 2012

On my previous article for optimizing WordPress for seo i showed how some basic change on wordpress and installing some plugin can improve your website seo.

Now i recommend to use WordPress SEO by Yoast along with those steps.
This plugin have the following features :

  • Page Analysis
  • Technical WordPress Search Engine Optimization
  • XML Sitemaps
  • RSS Optimization
  • Breadcrumbs
  • Social Integration
  • Import functionality for other WordPress SEO plugins and lots more…

WordPress SEO by Yoast

HTML5 input autofocus Attribute

HTML5 allows us input autofocus attribute on elements when page loads.
This is accomplished by using the autofocus attribute.
Using this autofocus attribute the INPUT, TEXTAREA, or BUTTON element will be automatically selected on page load.

The best part is no JavaScript is needed.

This autofocus attribute can be set using this 3 ways :

<input autofocus>
<input autofocus="autofocus">
<input autofocus="">

The autofocus attribute is supported in all major browsers, except Internet Explorer.

Easy Press : Free WordPress Theme

Easy Press is a free WordPress theme.You can easily use this theme for your WordPress blog or for your news website.I make this theme using my BLANK RESPONSIVE HTML5 WORDPRESS THEME.

It came with following features:
[list style=”check”]

  • HTML5 and CSS3
  • Theme Option Panel
  • Custom Widgets
  • Dynamic Footer widget area
  • Have full control on Home page, post and page
  • SEO optimized

[/list]

[button link=”http://dynamicweblab.com/project/easypress/” color=”#b00″ size=”1″ style=”1″ dark=”1″ square=”1″] Live Demo [/button]

version 1: [wpdm_file id=2]

Version 2: [wpdm_file id=3]

Add visitor browser name in the body class function

You can easily detect browser using this function and add visitor browser name in the body class function .

Put this on your theme functions.php

add_filter('body_class','myfunction_browser_body_class');
function myfunction_browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown_browser';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

The sample output may like this

<body class="home logged-in ie">

Source: Snipplr.com