Setting attribute disabled on a SPAN element to prevent click events

I have a SPAN element which does something on a click event.

When I disable it, using jQuery:

$("span").attr("disabled", true);

The event handler continues to be called when I click on the span element.

T o prevent click event, you can try this:

$("span").css("pointer-events", "none");

you can enabled those back by

$("span").css("pointer-events", "auto");

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"/>

“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 !!