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");

CSS nowrap Alternative

To achieve the same results as a TD nowrap (<td nowrap=”true”>) using cascading style sheets, use the following:

white-space: nowrap;

This style attribute only applies at the TD element level ie needs to be applied to each TD, ie not the the TR or TBODY.  If you’re desparate to not apply it to each TD,  then you can get away with only applying it to the TD’s of the first row – but this is only effective if applied to the cells containing thelongest data (so IMHO is a half-baked approach – ie don’t do it).

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

Convert a Menu to a Dropdown for Small Screens

<!DOCTYPE html>
<html>
<head>
<meta charset=’UTF-8′>
<title>Convert Menu to Dropdown</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
font: 300 21px “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
width: 500px;
margin: 0 auto 15px;
}
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
} Continue reading