Source: https://github.com/stowball/jQuery-rwdImageMaps

Demo: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#bubbles

One line code to make your image map responsive, $('img[usemap]').rwdImageMaps();

On developing a submition form, we will sometimes need a variable number of input for some options. In the case we usaully use jquery/js to dynamically add input fields to the form. However, today I face on a problem that the jquery added input does not post to the server side. Finally, I find the reason is related to the strcture of the html.

the html of my code

<table id="table">
	<form>
	<thead>
		<tr>
			<th>Title</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" name="dynamic[]"></td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<td><input type="button" id="addmore"></td>
		</tr>
	</tfoot>
	</form>
</table>

JS:

$(document).ready(function() {
	$("#addmore").click(function() { $("tbody",$("#table")).append(''); });
});

The reason cost the problem is the order of form and table. In the case, I have put the form inside the table which will make the added input not catch by the form, simply change to the following and the problem solve:

	

		

			

				

					Title
			
		
		

			

				

					
			
		
		

			

				

					
			
		
		

		
	

Using a float span as the placeholder message instead change the value of the input

Firstly, make the form input as following style

<label><input type="text" placeholder="email" /></label>

A nice jQuery menu, useful to make gallery menu.

Little Boxes Menu with jQuery

jQuery hoverIntent is a plugin used to delay the trigger of mouseover and mouse out of hover function. This helps us to prevent user trigger many times of event when move over a layer.

default hover:

$("#layer").hover(function() {
    //mouserover event
},function() {
    //mouserout event
});

hoverintent:

$("#layer").hoverIntent({
	interval: 500,
	over: function(){
		//mouserover event
	},
	timeout: 500,
	out: function(){
		//mouserout event
	}
});