Popular Tutorials on 99Points

$(document).ready(function() { 
 
 // refresh captcha
 $('img#captcha-refresh').click(function() {  
 
		change_captcha();
 });
 
 function change_captcha()
 {
	document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
 }
 
});

<!-- Captcha HTML Code -->
 
	<div id="captcha-wrap">
		<div class="captcha-box">
			<img src="get_captcha.php" alt="" id="captcha" />
		</div>
		<div class="text-box">
			<label>Type the two words:</label>
			<input name="captcha-code" type="text" id="captcha-code">
		</div>
		<div class="captcha-action">
			<img src="refresh.jpg"  alt="" id="captcha-refresh" />
		</div>
	</div>
 
	<!--  Copy and Paste above html in any form and include CSS, get_captcha.php files to show the captcha  -->

/* 
Recaptcha Style Captcha 
=======================
 re-Captcha Style Captcha with php and jQuery 
 
 Created By: Zeeshan Rasool 
 URL : http://www.99Points.info 
 
 Get JQuery, PHP, AJAX, Codeigniter and MYSQL Tutorials and Demos on Blog
 */
 
#captcha-wrap{
	border:solid #870500 1px;
	width:270px;
	-webkit-border-radius: 10px;
	float:left;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:#870500;
	text-align:left;
	padding:3px;
	margin-top:3px;
	height:100px;
	margin-left:80px;
}
#captcha-wrap .captcha-box{
	-webkit-border-radius: 7px;
	background:#fff;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align:center;
	border:solid #fff 1px;
}
#captcha-wrap .text-box{
	-webkit-border-radius: 7px;
	background:#ffdc73;
	-moz-border-radius: 7px;
	width:140px;
	height:43px;
	float:left;
	margin:4px;
	border-radius: 7px;
	text-align:center;
	border:solid #ffdc73 1px;
}
 
#captcha-wrap .text-box input{ width:120px;}
#captcha-wrap .text-box label{
	 color:#000000;
	 font-family: helvetica,sans-serif;
	 font-size:12px;	
	 width:150px;
	 padding-top:3px; 
	 padding-bottom:3px; 
}
#captcha-wrap .captcha-action{
	float:right; width:117px; 
	background:url(logos.jpg) top right no-repeat; 
	height:44px; margin-top:3px;
}
#captcha-wrap  img#captcha-refresh{
	margin-top:9px;
	border:solid #333333 1px;
	margin-right:6px;
	cursor:pointer;
}

$(document).ready(function() {
 
	var Arrays=new Array();
 
	$('.add-to-cart-button').click(function(){
 
		var thisID 	  = $(this).parent().parent().attr('id').replace('detail-','');
 
		var itemname  = $(this).parent().find('.item_name').html();
		var itemprice = $(this).parent().find('.price').html();
 
		if(include(Arrays,thisID))
		{
			var price 	 = $('#each-'+thisID).children(".shopp-price").find('em').html();
			var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
			quantity = parseInt(quantity)+parseInt(1);
 
			var total = parseInt(itemprice)*parseInt(quantity);
 
			$('#each-'+thisID).children(".shopp-price").find('em').html(total);
			$('#each-'+thisID).children(".shopp-quantity").html(quantity);
 
			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)-parseInt(price);
 
			prev_charges = parseInt(prev_charges)+parseInt(total);
			$('.cart-total span').html(prev_charges);
 
			$('#total-hidden-charges').val(prev_charges);
		}
		else
		{
			Arrays.push(thisID);
 
			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)+parseInt(itemprice);
 
			$('.cart-total span').html(prev_charges);
			$('#total-hidden-charges').val(prev_charges);
 
			var Height = $('#cart_wrapper').height();
			$('#cart_wrapper').css({height:Height+parseInt(45)});
 
			$('#cart_wrapper .cart-info').append('
<div id="each-'+thisID+'" class="shopp">
<div class="label">'+itemname+'</div>
<div class="shopp-price"> $<em>'+itemprice+'</em></div>
<span class="shopp-quantity">1</span><img class="remove" src="remove.png" alt="" /><br class="all" /></div>
');
 
		}
 
	});	
 
	$('.remove').livequery('click', function() {
 
		var deduct = $(this).parent().children(".shopp-price").find('em').html();
		var prev_charges = $('.cart-total span').html();
 
		var thisID = $(this).parent().attr('id').replace('each-','');
 
		var pos = getpos(Arrays,thisID);
		Arrays.splice(pos,1,"0")
 
		prev_charges = parseInt(prev_charges)-parseInt(deduct);
		$('.cart-total span').html(prev_charges);
		$('#total-hidden-charges').val(prev_charges);
		$(this).parent().remove();
 
	});	
 
	$('#Submit').livequery('click', function() {
 
		var totalCharge = $('#total-hidden-charges').val();
 
		$('#cart_wrapper').html('Total Charges: $'+totalCharge);
 
		return false;
 
	});	
 
function include(arr, obj) {
  for(var i=0; i
 
[ad#co-4]
<h2>HTML</h2>
<pre lang="php">
<div style="min-height: 800px;">
<div id="cart_wrapper">
<form id="cart_form" action="#">
<div class="cart-total">
 
				<strong>Total Charges:          </strong> $<span>0</span>
<input id="total-hidden-charges" name="total-hidden-charges" type="hidden" value="0" /></div>
<button id="Submit">CheckOut</button>
</form></div>
<div id="wrap">
 
		<a id="show_cart" href="javascript:void(0)">View Cart</a>
<ul>
	<li id="1">
				<img class="items" src="product_img/1.jpg" alt="" height="100" />
<div>Red Grocery Bag</div></li>
	<li id="2">
				<img class="items" src="product_img/2.jpg" alt="" height="100" />
<div>Reusable Grocery Bag</div></li>
	<li id="3">
				<img class="items" src="product_img/3.jpg" alt="" height="100" />
<div>White Grocery Bag</div></li>
	<li id="4">
				<img class="items" src="product_img/4.jpg" alt="" height="100" />
<div>Yellow Grocery Bag</div></li>
<!-- Detail Boxes for above four li -->
<div id="detail-1" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/1.jpg" alt="" width="340" height="310" />
<div class="detail_info">
 
					<label class="item_name">Red Grocery Bag</label>
 
						shopping bag, shopping, bag, merchandise, consumerism, gift:
 
						$<span class="price">80.00</span>
 
					<button class="add-to-cart-button">Add to Cart</button></div>
</div>
<div id="detail-2" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/2.jpg" alt="" width="340" height="310" />
<div class="detail_info">
 
					<label class="item_name">Reusable Grocery Bag</label>
 
						shopping bag, shopping, bag, merchandise, consumerism, gift:
 
						$<span class="price">70.00</span>
 
					<button class="add-to-cart-button">Add to Cart</button></div>
</div>
<div id="detail-3" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/3.jpg" alt="" width="340" height="310" />
<div class="detail_info">
 
					<label class="item_name">White Grocery Bag</label>
 
						shopping bag, shopping, bag, merchandise, consumerism, gift:
 
						$<span class="price">50.00</span>
 
					<button class="add-to-cart-button">Add to Cart</button></div>
</div>
<div id="detail-4" class="detail-view">
<div class="close">
					<a href="javascript:void(0)">x</a></div>
<img class="detail_images" src="product_img/4.jpg" alt="" width="340" height="310" />
<div class="detail_info">
 
					<label class="item_name">Yellow Grocery Bag</label>
 
						shopping bag, shopping, bag, merchandise, consumerism, gift:
 
						$<span class="price">90.00</span>
 
					<button class="add-to-cart-button">Add to Cart</button></div>
</div></ul>
</div>
</div>

html, body{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}
 
#wrap{ width:100%; min-height:900px; top:0px; position:relative; bottom:0px; }
#wrap ul{ margin:0px; padding:0px; width: 700px;text-align:center;  }

#wrap .detail-view {
   /* background: none repeat scroll 0 0 #F3F4EE;*/
    border: 1px solid #E2E2E2;
    border-top: 1px solid #E2E2E2;
    left: 0;
	height:380px;
    overflow: hidden;
	clear:both;
	display:none;
	margin-left:13px;
	margin-bottom:15px;
    width: 96%;
}
 
#wrap .detail-view .close{ text-align:right; width:98%; margin:5px; }
#wrap .close a{ padding:6px; height:10px; width:20px; color:#525049; }
#wrap .detail-view .detail_images{ float:left}

#wrap .detail-view .detail_info{
	float:right;
	font-family: "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
	color:#525049;
	margin-right:20px;
	margin-top:30px;
	text-align:justify;
	width:250px;
	font-size:12px;
}
 
#wrap .detail-view .detail_info label{ font-size:12px;text-transform:uppercase; letter-spacing:1px; line-height:60px;} 

#wrap .detail-view .detail_info p{ height:110px;}

a#show_cart{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
    cursor: pointer;
	display:block;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    color:#525049;
	padding:8px;
	text-decoration:none;
 
    text-transform: uppercase;
}
.add-to-cart-button{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
    cursor: pointer;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    padding-top: 10px;color:#525049;
	margin-top:15px;
    text-transform: uppercase;
}
 
.add-to-cart-button:hover {
    background: none repeat scroll 0 0 #F8F8F3;
}
 
.shopp{background: none repeat scroll 0 0 #F8F8F3;}

#wrap ul li{

	list-style-type:none;
	height:146px;
	width:160px;
	margin-left:10px;
	margin-bottom:15px;
	float:left;
	padding:15px 0px 0px 0px;
	font-family:"LubalGraphBdBTBold",Tahoma;
	font-size:2em;
	border:solid #fff 1px;
	overflow:hidden;
}
 
.footer{ height:400px; background:#E2E2E2} 

#wrap ul li:hover{ border:solid #f3f4ee 1px; }

#wrap ul li div{ 

	height:31px;
	text-align:center;
	width:160px;
	margin-top:10px;
	position:relative;
	bottom:0px;
	padding-top:6px;
	padding-bottom:4px;
	background:#f3f4ee ;
	font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
	opacity:0.8;
	color: #525049 ;
	text-shadow: 0px 2px 3px #555;
}
 
img#cart{bottom:0px;position:fixed; margin-left:30px; /* keep the bar on top  */}

#wrap ul li { cursor:pointer;}

#cart_wrapper {
	border:solid #E8E7DC 1px;
	min-height:120px;
	width:100%;
	padding-top:15px;
	display:none;
    background:#E2E2E2;
	font: 12px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
 
	position:relative
}
 
#Submit {
  height: 78px;
  float:left;
}
 
.closeCart{ cursor:pointer;}
 
button {
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E8E7DC;
	width:140px;
    cursor: pointer;
    display: inline-block;
    font: 9px/21px "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,sans-serif;
    letter-spacing: 2px;
    padding-top: 12px;color:#525049;
	margin-top:1px;
	border:solid #ccc 1px; padding:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	margin-left:20px;
    text-transform: uppercase;
}
 
button:hover {
    background: none repeat scroll 0 0 #F8F8F3;
}
 
.cart-total{background: none repeat scroll 0 0 #F8F8F3;}

.shopp,.cart-total{
	border:solid #E8E7DC 1px; padding:8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; font-size:12px;
	background:url(remove.png) center right no-repeat 5px;
	border-radius: 8px;
	font-family:"LubalGraphBdBTBold",Tahoma;
	margin-top:3px;
	width:320px;
	float:left;
	}
 
#cart_form{ width:570px; padding-left:15px;}

div.shopp span{ float:left;}
div.shopp div.label{ width:130px; float:left; }
div.shopp div.shopp-price{ width:70px; float:left;}
.quantity{ float:left; margin-top:-3px; width:20px;}
 
img.remove{float:right;cursor:pointer;}
.cart-total b{width:130px;}

$(document).ready(function(){
 
	var clicking = false;
	var blast = false;
	var blasts = false;
	var where = 0;
	$('#Move').click(function(){
 
		if(clicking == false)
		clicking = true;
		else
		clicking = false;
	});
 
	$('#maze').click(function(){
 
		clicking = false;
	});
 
	$(document).mouseover(function(e){  
 
		if(clicking == false){ return;}
 
		xpos = e.pageX;
		ypos = e.pageY;
 
		if((ypos > 520 && xpos > 420) || (ypos > 495 && xpos > 464))
		{
			completed();
		}
		if(ypos < 24 || xpos > 482 || ypos > 583 || xpos < 18) 		{ 			blast = true;where=2; 		} 		else if(ypos >= 24 && ypos <= 77 && xpos >= 372 && xpos <= 404) 		{ 			blast = true;where=3; 		} 		else if(ypos >= 30 && ypos <= 81 && xpos >= 422)
		{
			blast = true;where=4;
		}
		else if(ypos >= 39 && ypos <= 81 && xpos >= 47 && xpos <= 352) 		{ 			blast = true;where=5; 		} 		else if(ypos >= 39 && ypos <= 189 && xpos >= 314 && xpos <= 352) 		{ 			blast = true;where=6; 		} 		else if(ypos >= 92 && ypos <= 133 && xpos >= 317 && xpos <= 462) 		{ 			blast = true;where=7; 		} 		else if(ypos >= 311 && ypos <= 352 && xpos >= 24 && xpos <= 80) 		{ 			blast = true;where=8; 		} 		else if(ypos >= 311 && ypos <= 570 && xpos >= 47 && xpos <= 81) 		{ 			blast = true;where=9; 		} 		else if(ypos >= 146 && ypos <= 188 && xpos >= 351 && xpos <= 460) 		{ 			blast = true;where=10; 		} 		else if(ypos >= 146 && ypos <= 244 && xpos >= 428 && xpos <= 460) 		{ 			blast = true;where=11; 		} 		else if(ypos >= 202 && ypos <= 243 && xpos >= 428)
		{
			blast = true;where=12;
		}
		else if(ypos >= 202 && ypos <= 243 && xpos >= 264 && xpos <= 408) 		{ 			blast = true;where=13; 		} 		else if(ypos >= 92 && ypos <= 134 && xpos >= 47 && xpos <= 299) 		{ 			blast = true;where=14; 		} 		else if(ypos >= 92 && ypos <= 188 && xpos >= 99 && xpos <= 134) 		{ 			blast = true;where=15; 		} 		else if(ypos >= 147 && ypos <= 188 && xpos >= 99 && xpos <= 191) 		{ 			blast = true;where=16; 		} 		else if(ypos >= 92 && ypos <= 188 && xpos >= 264 && xpos <= 296) 		{ 			blast = true;where=17; 		} 		else if(ypos >= 148 && ypos <= 298 && xpos >= 47 && xpos <= 81) 		{ 			blast = true;where=18; 		} 		else if(ypos >= 202 && ypos <= 243 && xpos >= 47 && xpos <= 242) 		{ 			blast = true;where=19; 		} 		else if(ypos >= 147 && ypos <= 350 && xpos >= 209 && xpos <= 242) 		{ 			blast = true;where=20; 		} 		else if(ypos >= 256 && ypos <= 515 && xpos >= 99 && xpos <= 134) 		{ 			blast = true;where=21; 		} 		else if(ypos >= 311 && ypos <= 461 && xpos >= 155 && xpos <= 189) 		{ 			blast = true;where=22; 		} 		else if(ypos >= 474 && xpos >= 155 && xpos <= 189) 		{ 			blast = true; where=23; 		} 		else if(ypos >= 474 && ypos <= 514 && xpos >= 155 && xpos <= 299) 		{ 			blast = true;where=24; 		} 		else if(ypos >= 420 && ypos <= 461 && xpos >= 155 && xpos <= 351) 		{ 			blast = true;where=25; 		} 		else if(ypos >= 528 && xpos >= 99 && xpos <= 134) 		{ 			blast = true;where=26; 		} 		else if(ypos >= 202 && ypos <= 353 && xpos >= 318 && xpos <= 348) 		{ 			blast = true;where=27; 		} 		else if(ypos >= 258 && ypos <= 297 && xpos >= 374 && xpos <= 460) 		{ 			blast = true;where=28; 		} 		else if(ypos >= 256 && ypos <= 458 && xpos >= 374 && xpos <= 406) 		{ 			blast = true;where=29; 		} 		else if(ypos >= 365 && ypos <= 405 && xpos >= 319 && xpos <= 406) 		{ 			blast = true;where=30; 		} 		else if(ypos >= 420 && ypos <= 460 && xpos >= 374)
		{
			blast = true;where=31;
		}
		else if(ypos >= 474 && ypos <= 515 && xpos >= 318 && xpos <= 460) 		{ 			blast = true;where=32; 		} 		else if(ypos >= 422 && ypos <= 568 && xpos >= 318 && xpos <= 348) 		{ 			blast = true;where=33; 		} 		else if(ypos >= 528 && ypos <= 567 && xpos >= 374 && xpos <= 460)
		{
			blast = true;where=34;
		}
 
		if(blast == true)
		{
			xpos2 	= parseInt(xpos)-parseInt(20);
			ypos2 	= parseInt(ypos)-parseInt(29);
 
			$('img#explosion').css({'left': xpos2+'px','top': ypos2+'px'}).show();
			$('#Move').hide();
			$('#lose').fadeIn();
 
			clicking = false;
			return false;
		}
 
		xpos 	= parseInt(xpos)-parseInt(17);
		ypos 	= parseInt(ypos)-parseInt(22);
		$('#Move').css({'left': xpos+'px','top': ypos+'px'});
 
	});
 
	function completed()
	{
		$('#Move').hide();
		$('#won').fadeIn();
		clicking = false;
	}
 
});

99Points : Demos : JQuery Based Maze Game
 
<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="script.js" type="text/javascript"><!--mce:1--></script>
 
<!--
body{ background:#fff}
#maze{ background:url(maze.gif) top left no-repeat; height:610px; width:502px;float:left;}
#Move{position:absolute; cursor:pointer; height:38px; margin-top:10px; left:0px;}
#exit{ float:left; margin-top:500px; margin-left:-30px;}
#explosion{ display:none; position:absolute}
#won{ position:absolute; margin-top:460px; margin-left:-110px; display:none}
#lose{ position:absolute; margin-top:460px; margin-left:-110px; display:none}
-->
 
<img id="Move" src="bomb.png" alt="" />
 
<div id="maze"> <img id="explosion" src="explosion.gif" alt="" /></div>
 
 
<img id="exit" src="exit.png" alt="" />
<img id="won" src="won.png" alt="" />
<img id="lose" src="lose.png" alt="" />

$(document).ready(function() {
 
	//$('#loader').hide();
 
	$('.parent').livequery('change', function() {
 
		$(this).nextAll('.parent').remove();
		$(this).nextAll('label').remove();
 
		$('#show_sub_categories').append('<img id="loader" style="float: left; margin-top: 7px;" src="loader.gif" alt="" />');
 
		$.post("get_chid_categories.php", {
			parent_id: $(this).val(),
		}, function(response){
 
			setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
		});
 
		return false;
	});
});
 
function finishAjax(id, response){
  $('#loader').remove();
 
  $('#'+id).append(unescape(response));
}

<div id="show_sub_categories">
<select class="parent" name="search_category">
<option selected="selected">-- Categories --</option>
 
<option value="&lt;?php echo $rows['id'];?&gt;"></option>
 
	</select></div>

 0)
	{?>
<select class="parent" name="sub_category">
<option selected="selected">-- Sub Category --</option>
 
<option value="&lt;?php echo $rows['id'];?&gt;"></option>
 
		</select>
 
	No Record Found !';}
}
?&gt;