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



Sunday, August 19, 2012

Clone of w3schools.com is out on ScriptCart

Today, we are announcing  a replica website of popular web tutorial portal  w3schools.com  , after a huge demand from our visitors for clone of this website.

This can be downloaded directly from our website http://techbrush.org but you need to contact us for the download link. we  will provide a zip archive which works exactly like a live site on your local machine and a good option for people with rare internet access or slow speed or limited data uses. So  you can keep this replica of w3school on your computer and surf like online site freely.

The content is highly copyrighted and has been only provided for the convenience of the users, it can not be used for any  financial or business benefits under any circumstances.

If you want to own a similar website for personal , professional or business use, please contact us for the fully functional site with complete ownership of the content , customized design and layout.

Click Here To View Demo




References’ basis in PHP

The first step is to answer the following question: What are references? In PHP references are a way to access to the content of a variable by others names. We will briefly cover the three different kind of references available in PHP.

1. References as a function’s parameter


By default, PHP handle the variables you send to a function locally, what I mean is what is in the function stay in the function. By passing a reference you will make your local function variable referencing to the variable in the calling scope of your application. Here is a short example with and without references.


<?php
/**
* Using references
*/
function foo(&$var){
$var++;
}
$a=5;
foo($a);
echo($a); //Will display 6
?>





<?php
/**
* Without references
*/
function foo($var){
return $var++;
}
$a=5;
$a=foo($a);
echo($a); //will display 6
?>



2. Return by references


Another case is to return a reference. But you have to be very careful with this one because with some tricky code you can access to the private attributes of a class and indeed modify their values.
Here is a classic use of a return reference:


<?php
class Personne {
public $age = 22;

public function &getAge() {
return $this->age;
}
}

$obj = new Personne();
$myAge = &$obj->getAge(); //$myAge is a reference to $obj->age, which is 22.
$obj->age = 18;
echo $myAge; //will display 18
?>



And now we will see that we can modify a private attribute by using a return reference:


<?php
class Personne {
private $age = 22;

public function &getAge() {
return $this->age;
}
public function __toString(){
return $this->age;
}
}

$obj = new Personne();
$myAge = &$obj->getAge();
$myAge = 897; //the private attribute $age has been modified
echo($obj); //unfortunately it will display 897
?>



3. Assign by references


The last case and the easiest is the assignment. It is done just like that:


<?php
$a =& $b;
?>



Which means that $a and $b reference to the same content.

In conclusion, references might seems pretty useless with these examples but it is actually wise to use some of them when you are working on a complex software architecture with a lot of objects using others objects. It is also nicer to avoid the $var=foo($var).

Add a ‘Share this on twitter’ link

In this article we will discuss about how to add a link which allow your visitors to immediately share an article from your website to their twitter account. Nowadays it is a very common feature on website and it will bring new audience. You will see that it is actually pretty simple.

First step: find a nice twitter icon. When it is about icons, I always check this website: http://www.iconfinder.net. You have plenty of choice just pick up one, for this example I choose this icon:



Ok, now we are ready to create our ‘share this on twitter’ link.
Twitter is almost making all the work for us, the only thing we have to do is to access the http://www.twitter.com/home page and add some parameters like the URL to your article.

In this example the link I should use to share this article on twitter would be:
http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113

You just need to give the link to your article. This link has to be permanent, otherwise it will not work if any changes are made.

Here is the final code to display the image and link it with twitter:


<a href="http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113">
<img src="twitter_button.png" alt="share this article on twitter" />
</a>



Here is the result of our example:



Of course what you can do is display a pop-up towards Twitter so your visitors can still browse your website. Here is a snippet code to do so:


<html>
<head>
<!-- other smart stuff here... -->
<script type="text/javascript">
function popup_share(url, width, height)
{
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(url, '" + id + "', 'toolbar=0,scrollbars=1,location=1,statusbar=0,menubar=0,resizable=0,width=" + width + ", height=" + height + ", left = 363, top = 144');");
}
</script>
</head>

<body>
<!-- other smart stuff here... -->
<a href="javascript:popup_share('http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113',800,320)" title="Share on Twitter">
<img src="twitter_button.png" alt="share this article on twitter" />
</a>
</body>
</html>



This is the basic idea you can add other parameters to indicate a title, etc. I choose twitter for the article, but you can easily adapt it for other social network websites like Facebook, MySpace, etc it is the same pattern expect that you will have to modify the URL and its parameters (which are indeed specific to each platform).

CakePHP: working with Elements



One of my favorite PHP framework at the moment is CakePHP, it is not very different from others frameworks like CodeIgniter, Symphony, etc.

In this article I will present you a very handy feature of CakePHP: the Elements.
An element (like it is named) is a part of a web page which can be display into multiple pages (a sort of template if you want). Here are some elements’ examples:

  • A header: with your banner, your brand logo

  • A menu: with your categories, links

  • A footer: company name, copyright


In CakePHP, Elements are located in the app/views/elements/ directory (or if you are using a custom theme you can create specific elements and put them in the /app/views/themed/your_theme_folder/elements/ directory).

So let’s get started. We will create a basic element which will display ‘Hello World!’:


<h1>Hello World</h1>



You can save this Element: app/view/elements/helloworld.ctp
The last step is to include the element in our pages, to do so you just have to request it like that:


/*For instance I want to display Hello Word on my app/views/posts/index.ctp page:*/
echo $this->element('helloworld');



Elements using Controller with requestAction


Displaying basic information is great, but it would be much more better if we could access to our data and request something like the five latest comments or posts added. This is indeed possible through the requestAction method.

First of all, we have to add a method in our controller which will allow us to retrieve the data we want to render.


/* For instance I want to display the 5 latest posts on my index page. */
public function lastposts($limit=5)
{
/* We retrieve only the required fields, and configure the query. */
$posts = $this->Post->find('all', array('fields'=>array('Post.id', 'Post.name', 'Post.created'),
'recursive'=>0,
'order'=>array('Post.created desc'),
'limit'=>$limit));

if(isset($this->params['requested']))
{
return $posts;
}

$this->set('lastposts', $posts);
}



Second of all, we create our element. This step is exactly the same as what we have done before, create a page called lastposts.ctp in your app/views/elements/ directory but this time there will be more code’s lines. The first thing to do in your element is to get our data, to do that you will have to use the requestAction method, now you are ready to display your latest posts:


<?php 
/* First step: get the latest posts, the URL should be like your_controller_name/method_name/params */
$posts = $this->requestAction('posts/lastposts/5');
?>

<h3>Our latest posts</h3>

<ul>
<?php foreach($posts as $post): ?>
<li><i><?php echo $post['Post']['created']; ?></i> : <?php echo $post['Post']['name']; ?></li>
<?php endforeach; ?>
</ul>



To get the job done we have to display our element in a page. We have already done that before, do it again:


echo $this->element('lastposts');



You should now be able to see the posts on the page. You also may see a little issue when you try to display the page, it takes an extra time to load it. The requestAction method is the responsible.

Enable cache for requestAction


To make things right and avoid that extra consuming resources, you can and should enable the caching functionality for your element. It is very simple and your visitors, as much as your server, will see a significant reduce during the pages’ load.


echo $this->element('lastposts', array('cache'=>'1 hour');




 

 

How to clean URL in PHP



Have nice and clean URL on your website is mandatory to provide a better visibility on search engines. Let’s say you want a URL like that: http://www.florian-hacquebart.eu/news/161/clean-url-in-php you will have to use URL rewriting which is not the first subject of this post but for instance you will have to generate a specific string: clean-url-in-php instead of Clean URL in PHP.

You can do that by using regulars expressions:


function cleanURL($title) {
$title = preg_replace("/[^a-zA-Z0-9/_|+ -]/", '', $title);
$title = strtolower(trim($title, '-'));
$title = preg_replace("/[/_|+ -]+/", '-', $title);

return $title;
}



What are we doing in this function:

  1. First of all we remove any characters which are not a letter from the alphabet, a number or a special character (/,_, etc).

  2. Next we trimmed the string and lower the characters.

  3. Finally we replace character like +,[,_ with a -.


Let’s see step by step what this function is doing this string: I’m # an example !

  1. Im an example

  2. im-an-example

  3. not even needed



 

 

How to create your first jQuery plugin



In this article I will show you how to create a simple jQuery plugin menu.
First of all, check this demo so you know where we are heading to: smoothymenu plugin.

As you can see, we will create a plugin to render a menu with fading effect on its items.
The first step to create your plugin is to download the latest jQuery library at jquery.com.

Now you can create a new JavaScript file, this file will contain the main function of our plugin (our plugin will also use a CSS file). To declare a plugin function in jQuery you have to use this syntax:


jQuery.fn.smoothymenu = function() {}



Before we get started with the Javascript let’s take a look at an HTML example file. By doing this we can define the basic structure of our menu:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SmoothyMenu Jquery plugin</title>
<link href="css/smoothymenu.css" rel="stylesheet" type="text/css" media="screen"></link>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/smoothymenu.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#menu').smoothymenu();
});
</script>
</head>
<body>
<h1>SmoothyMenu Jquery plugin</h1>

<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</body>
</html>



As you can see I apply my plugin on a list with an id. Now we can write our plugin, the first step is to retrieve the element we will work with. In or case the list, to do that you can create a variable:


var menu = $(this);



After that, we want to apply some styles to our menu so we will programmatically add a class to the menu. This class is in our CSS plugin file and will be provide with the JavaScript file (of course the end user will be able to customize the CSS to match his needs).


menu.attr('class', 'smoothymenu');



Here is the trick to create the fade in/out: we add a block to each menu item, if the mouse if out of the item it will be not visible, when the user will hover an item we will fade it in and vice-versa.


/* Append the specific effect block to each menu items. */
menu.find('li').append('<div></div>');

/* Apply an effect on the hover of an element of the menu. */
menu.find('li').bind('mouseover', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
});

/* Apply an effect when the mouse is out of an element of the menu. */
menu.find('li').bind('mouseout', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
})



Ok we are done, of course you can add parameters to your function and do more complexes operations.
I tried to keep it it simple in this example, to sum up here is the whole smoothymenu plugin function:


jQuery.fn.smoothymenu = function()
{
var menu = $(this);

/* Define the class of the menu */
menu.attr('class', 'smoothymenu');

/* Append the specific effect block to each menu items. */
menu.find('li').append('<div></div>');

/* Apply an effect on the hover of an element of the menu. */
menu.find('li').bind('mouseover', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
});

/* Apply an effect when the mouse is out of an element of the menu. */
menu.find('li').bind('mouseout', function(){
$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
})
};



You can download the sources right here: smoothymenu jquery plugin sources (see the demo).

Sunday, August 12, 2012

A beautiful JQuery Image Slider



JQuery galleries are most liked part on this blog So I decided to create another one.This Slider is a beautiful image slider for your web applications. I created this for those people who needs a fancy jquery image slider with a simple to use but for limited number of images. This slider accepts two lists of images, each list will have 12 thumbs limit which means you can add 24 images in this gallery. Currently this version has some limitations such as number of images to be used and maximum limit of images. But it is one of best gallery I have created.
This slider has feature such as:

- Play Paus Button
- Navigate through First and Second List
- Control images with Arrow keys on Keyboard
- Click to see a specif image
- Caption on Images

 

Limitations :


There are few limitations in this gallery such as you have to use 6,9 or 12 images for one slider. It means if you have 5 images then you cant use this slider. If you have 9 then add all thumbs in first list and assign var totalThumbsFirstList = 9;
and set var totalThumbsSecondList = 0; If you have 18 Images then assign 12 to first and remaining 6 to second list and then you will define param like this:

var totalThumbsFirstList = 12;
var totalThumbsSecondList = 6;

In short this is perfect for 12 or 24 images so try to use 12 or 24 images. We have another variable for controlling the sliding interval which is :

var Interval = 6000;//6 seconds


I created this by inspiring the design from premiumpixels.com Special thanks to Orman for this. I hope you will like this gallery. Previously the other image galleries are really appreciated by you guys. I received lot of emails from the readers mostly from India, USA, Indonesia, Pakistan, France and UK and all from the world. I really appreciate your love for the blog and your kind words keep me buys in creating beautiful tutorials for you guys. Thanks again :)

Popular Tutorials on Dalip.in


Merging Image Boxes with jQuery

Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter ...



View demo | Download source

Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.



When the window gets resized, the positions of the thumbnails will automatically adapt to fit the screen. We are using the jQuery 2D Transform plugin for the animated rotation. You can find the plugin here:

http://plugins.jquery.com/project/2d-transform



The beautiful photographs are by tibchris and you can find his stunning works on his Flickr page:
http://www.flickr.com/photos/arcticpuppy/



When navigating through the full images, we will reveal the next or previous image by removing the current image box by box.

Have fun with the demo and download the ZIP to experiment with this cool effect!
The whole animation looks best in Google Chrome and Apple Safari.

View demo | Download source

Friday, August 10, 2012

5 Common Web Design Mistakes Small Businesses Make (and How to Avoid Them)

navigation

In today’s interconnected world, websites play an integral part in the branding and marketing of every company. A web design mistake will directly affect your customer relationship and can have a negative impact upon your business.


In order to create an awesome user experience for your clients and make sure you are engaging them, avoid making the following mistakes:

#1. Spelling and Grammar Errors



Spelling and grammar mistakes can make your website look unprofessional and detract from your credibility. Usually, the message you’re sending out is more important than a small grammatical error, but there are users who won’t consider your business professional enough, and they won’t link to you, subscribe to your updates or buy any kind of product or service from your company if you make spelling/grammar mistakes.

How to avoid it:


Check out the excellent list compiled by the people over at LitReactor. It should give you a good idea of the mistakes you need to avoid.

#2. Poor Navigation and Internal Linking



A very important aspect of a visitor experience on your company’s website is usability. A well-designed navigation and internal linking system guarantees all crucial areas of your website can be reached quickly and easily.

Make sure you’re not creating a frustrating experience for your visitors – they access your site for specific information which should be readily available and easy to reach from any point on your website. Think of your website as a map in which any area can be reached from any other area, with a central navigation for the main areas of your website. Always remember that navigation within a website should be seamless.

Here are a few tips on how to design a seamless navigation for your website:


  • Create focus points. These are parts of a page that are highly attractive and will capture the user’s interest. Use stronger, higher-contrast colors and larger fonts for your focus points.




  • Write short, interesting descriptions for each point. These should encompass the idea you’re trying to transmit and be interesting enough to maintain the visitor’s attention.




  • Any other text should be short and easy to read. Only provide essentials, as people will read short pieces of text but will be put off by long paragraphs.




How to avoid it:


While creating the navigation for your website, remember the 10 Principles of Navigation Design.



#3. No Contact and Social Sharing Buttons


We live in an increasingly social world and your visitors will most certainly want to share what they like. Sharebars, social buttons, floating widgets for liking, tweeting, pinning, e-mailing and more will make sure your visitors will never cut a frustrated figure when it comes to sharing. This is also a case of “the more, the merrier” as you’ll definitely enjoy the delicious traffic increase from social media.

Also, make sure you have a Contact or About page available where your visitors can engage with you – be it via a simple form, a Twitter handle, your Facebook page, site comments or owl-delivered mail.

How to avoid it:


There are many plugins that can assist you in creating contact forms (cformsII) and social sharing buttons. The PageLines Framework has this functionality built in, and you can extend it with plugins from the Store (ShareBar Extended, Social Excerpts). Additionally, there are many social sharing plugins to be found in the  WordPress Directory..

#4. No Call-to-Action (CTA) Buttons


 

Now that you’re driving a fair amount of traffic to your website and things seem on the right track, you have to think about leading those visitors somewhere. That traffic is essentially useless if the visitors don’t land where you want them to land or if your CTA button is buried somewhere in a sea of text.

You need to invest time and research into crafting a good CTA button and positioning it according to the action you want your prospective clients to take. Do you want visitors to subscribe to your blog? A carefully placed “Click Here to Subscribe” button on all blog pages and posts will do wonders to your subscription list. Do you want customers to buy your product? Place a button on your pricing page, homepage or even blog page. Always remember to make your Call to Action stand out.  The possibilities are endless!

How to avoid it:


Follow the awesome guide put together by the people at Uxbooth on good Call-to-Action buttons. It should give you a great head start on designing better CTAs. Remember, don’t overdo calls to action. Don’t have multiple CTAs on the same page or they will be competing against each other which will take away visitors from your main target.

#5. Content | c o n t e n t | CONTENT



Quick — think of the first reason why people should visit your website! If you said anything other than content, you’re doing something wrong. Your website content encompasses everything that can be seen (and heard, although we’re totally against background music) by a visitor.

It is fundamental that your website has a well-defined content strategy that is followed on a page-by-page basis. Your content should be interesting and valuable, while also engaging the user. Your readers are not going to be going over every single word on a page, so focus points need to be emphasized here as well. Create a strong  visual content hierarchy so the points of interest can be reached easily.

And while we’re discussing content (essentially what IS on the webpage), we’d also like to take the time and mention the impact white space has on general website design and page streamlining. It is, arguably, the most important factor to consider as it has the strongest impact on what text section your readers focus on. This has a lot to do with page clutter, which will quickly turn any visitor away. You can read more about the importance of white space in web design here and here.

How to avoid it:


This piece of advice might leave you cutting this figure, but we cannot stress how important simplicity and sticking to the point is: write interesting, meaningful content while keeping your general strategy in mind and you won’t fail. Too many small business websites make the mistake of putting too much or too little thought into their content strategy. Write down your organization’s mission statement and objectives and emphasize them through text. Write content that you find interesting and adapt to your readers’ preferences. Bonus tip: keep comments enabled and accept feedback. It will help you grow!