Monday, October 29, 2012

Best Facebook Clone Script Download

Today, We are extremely pleased and excited about introducing this blockbuster Facebook clone script, Extended Facebook script, Super Facebook, Next Gen Facebook script, Facebook replica or whatever you want to call it.



This is an amazing social networking script made in simple core php using smarty for your convenience. You can customize it frequently to fit your suit or hire me  for the customization.

Facebook clone script has many more feature then Facebook and its free to use or redistribute but not to sale without prior permission from my end.

Click here  to go to the site using this script and then sign up there.



Mail us using contact form on site, if you face some issues after purchase or before.

Add on plugins included in this version.

1. Wall plugin

Lets you post photos, links, video, audios and status on your wall and customize who can see your posts.

2. Mobile Version Plugin

Redirect you to mobile version of site when you visit the site on a mobile device. The mobile version is awesome.



How to get this script for free
Method 1: If you have more then 500 twitter follower , more then 500 Facebook fans or frnds or followers. just share this link to your Facebook and twitter profile and email us with your twitter and Facebook account url. once verified we will send you this script for free.

2. Just bring us two more paying leads to purchase this script and we will give this script to you for free.  :-)

WARNING: YOU AGREE TO THE TERMS OF PURCHASE AND CANNOT SELL THIS SCRIPT FURTHER FOR BUSINESS USE. THIS SCRIPT IS JUST FOR PERSONAL USE.

CONTACT US IF YOU NEED RESALE RIGHTS FROM US.

Friday, October 26, 2012

FOLLOW US AND GET AWARDED

For all the amazing scripts on this website , that we have created , We can't put them free to download on blog How ever, I will randomly chose 2 people every week from the blog followers (feed subscribers, Facebook, Twitter) and then We will send them the Full Version script copy on their email address.

Tuesday, October 23, 2012

HTML 5 Sphere Effect.

Today I decided to play with HTML 5  and its surprisingly cool effects , that can be made using its canvas elements. I am posting two different HTML 5 sphere effect over here, where sphere has been created using HTML 5 and JavaScript.

Click the links below to got to previews:

Demo 1

Demo 2

 

 

 

Monday, October 22, 2012

AJAX Pagination using jQuery and PHP with Animation



I have created an Ajax JQuery based pagination few months before which my users liked very much and there are thousands of downloads of that tutorial. So, I thought to create on another tutorial for pagination with some jquery effects to make stylish and attractive. Its animated loading of records using jquery animation. I hope you will like it very much as it looks nice.
Thanks !

 


 

Database




CREATE TABLE IF NOT EXISTS `records` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`message` text NOT NULL,
`image` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `records`
--

INSERT INTO `records` (`id`, `message`, `image`) VALUES
(1, 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s,', '1.png'),
(2, 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don''t look even slightly believable.', '2.png');



JQuery Code




$(document).ready(function(){

function showLoader(){

$('.search-background').fadeIn(200);
}

function hideLoader(){

$('.search-background').fadeOut(200);
};

$("#paging_button li").click(function(){

showLoader();

$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#006699'});

$("#content").load("data.php?page=" + this.id, hideLoader);

return false;
});

$("#1").css({'background-color' : '#006699'});
showLoader();
$("#content").load("data.php?page=1", hideLoader);

});



 

HTML




<div>

<div id="container">

<div class="search-background">
<label><img src="loader.gif" alt="" /></label></div>
</div>

<div id="paging_button">

<ul>
'.$i.'

';
}?&gt;
</ul>
</div>
</div>


Super Shopping Cart with JQuery



You have seen and like the previous shopping cart tutorials and here is part 2 for that one. I was wondering over internet and I checked a cart which I liked very much and I thought to create a cart with some animation like that. So I created this one.Ajax and JQuery shopping carts are my favorite way to implement a cart in to website. I hope you will love it.

 


 

JQuery Code




$(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+'">
<div>'+itemname+'</div>
<div> $<em>'+itemprice+'</em></div>
<span>1</span><img src="remove.png" alt="" /><br /></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>



CSS




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;}



reCaptcha style Captcha with JQuery and PHP




This tutorial is about to creating a captcha same as recaptcha. I used CSS and PHP for this. You can find few tutorials about creating and integrating captcha/recaptcha in php over dalip.in, but now you can create your own recaptcha style captcha with php and jquery. I have created a form with captcha few months before.

JQuery Code




$(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();
}

});




HTML




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




CSS




/* 
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;
}