HTML5 Form Validation With Regex


There are two ideas that enters the scene now:

  • The tag has new type attribute values like url, email, date, telephone number, and color.
  • The tag has the new attribute pattern where you can describe allowed input with a regex.

Here are three pragmatic (but not globally perfect) examples I created:


Strong password: <input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

Email address: <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Phone number: <input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>
Advertisements

“Go Back” Button


Browsers already have “back” buttons, so you’d better have a darn good reason for needing to put one on your page!

Input button with inline JavaScript

<input type="button" value="Go Back From Whence You Came!" onclick="history.back(-1)" />

This is totally obtrusive, but you could fix that by only appending this button through JavaScript.

PHP

If JavaScript isn’t a possibility, you could use the HTTP_REFERER, sanitize it, and echo it out via PHP.

<?php
  $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
  echo "<a href='$url'>back</a>"; 
?>

Floating Header: Scroll Effect using HTML,CSS,JQuery


Ever scrolled halfway down the page – and then the navbar at the top appears? This can be very useful and looks professional. This tutorial will introduce a very basic approach how to get this happening.

1. Download the basic ‘Bootstrap’  Pre-Config from ( BootStrap ) .

Now update the index.html with the following:

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>

<style type="text/css">

body {

padding-top: 60px;
 Continue reading 

Adding multiple backgound images to same element


To add multiple background in the same element just add the images like this:

div.test {
	background-image: url(17072011167.jpg), url(25022010220.jpg);
	background-repeat: repeat;
	background-position: top left, top right;
	height: 768px;
	border: 1px solid #000000;
}

just replace div.test with #test and add div with id test and you are all done !!

Firebug Script for IE6


Just write the following line in the head tag of your html.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

jQuery Ajax Tutorial and Example


Before we are going with example let’s read something about jQuery and AJAX.

In this example we are submitting a simple form using AJAX.

To create a form first we are creating a database with name “ajax”.

Create a config file with name config.php.

<?
$dbhost = "localhost";   //replace it with your host name
$dbuser="root";               //replace it with your database username
$dbpassword="";             // replace it with your database password
$dbname="ajax";            // replace it with your database name

mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_select_db($dbname);
?> Continue reading 

What is jQuery and Ajax ?


What is jQuery ?

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. jQuery is free, open source software and it is a fast, small, and feature-rich JavaScript library. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

What is AJAX ?

AJAX (means Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used instead), and the requests do not need to be asynchronous.

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

If you need to check the example on jQuery AJAX, you can check it out here