How to create own custom JQuery Plugin?


My last article was about “How to auto reload page content using Jquery, Ajax and PHP”. Today I will show you how to create your own custom plugin using Jquery.

Many times we simply code according to current need on the project and may be same repetitive code in the next project. Why to code multiple times? If you feel some functionality can be used in future task as well then instead just fulfilling current project needs, you can create a plugin which can be used anywhere in any project.

What if we code once and use it all over where ever it is applicable? Sound interesting! yes. You are able to save your time by this way. If you are still wondering how to create Jquery plugin then here is the simple steps by which you can get some idea to create your own custom plugin and how to bind data into the div using Jquery.

Step1: Create a file called index.html and inside your html body paste the below code.

<script src="" type="text/javascript"></script> 
<script src="js/custom-plugin.js" type="text/javascript"></script> 

<script type="text/javascript">

        //data binding
        $("#search").on("keyup keypress blur change" , function(){
           // Custom Plugin
                id        :  'hello-text' ,
                text      :  $("#search").val(),
                color     :  '#005dff',
                fontStyle :  'italic'

<input type="text" id="search" />
<div id="hello-text"></div>

Step2: Create a file called custom-plugin.js and paste the below code.


 * @Author Sanjoy Dey
 * @param {type} $
 * @returns {undefined}

(function($) { 
    $.fn.helloWorld = function(options) {
         // establish our default settings
        var settings = $.extend({
            id           : 'search',
            text         : 'Hello World!',
            color        : null,
            fontStyle    : null
        }, options);
        // Establish our default settings
        return $("#"+ function() {
            // bind the entered text
            $(this).text( settings.text );

           //Apply user defined style
            if ( settings.color ) {
                $(this).css( 'color', settings.color );

            // Apply user defined font style
            if ( settings.fontStyle ) {
                $(this).css( 'font-style', settings.fontStyle );


Step3: Run the index.html page into browser and keep typing text into the text box you can see same value displaying below div.


You can change the color, font, id etc. according to your needs. You may make use of this simple plugin app and build your own jquery plugin also lot of other functionality can be added into the same. Hope this small article helpful to you. If so don’t forget to like, share or leave your comments below. Keep visiting.

Auto reload page content every 3 sec using JQuery, Ajax & PHP

In my last article I wrote “How to auto resize textarea based on the user input.”. While surfing twitter and facebook recently I just noticed both the giant social networking site repetitively search for new comments/tweets to display into end user. Actually it is pretty simple concept, which can achieve via simple script with around 10 lines of code. I drafted this tutorial long back and today I am posting how to auto reload the part of the page and display the number of tweet counts with a simple steps.

Let us create index.php page and paste below code.

<script type="text/javascript" src=""></script>

<script type="text/javascript">

    var auto= $('#tweets'), refreshed_content;	
		refreshed_content = setInterval(function(){
		auto.fadeOut('slow').load("result.php?id="<?php  echo $userid; ?>).fadeIn("slow");}, 
		return false; 

The above script will call result.php page every 3 seconds and fetch the number of tweet count. We will place the count into the div content.

<div class=”container”>
<div id="tweets"> </div> 

Now let us create result.php to perform twitter live search and return the tweet count to the index.php page. Paste below piece of code into your result.php to perform live database search. Here i have used user_id to search against database similar case of facebook/twitter.

$userid = (string) (isset($_GET['id'])) ? $_GET['id'] : '';

$link = mysql_connect("localhost", "root", "");
mysql_select_db("twitter", $link);
$sql = "Select * FROM user_tweets where user_id = '$userId' ";
$result = mysql_query($sql, $link);
$num_rows = mysql_num_rows($result);

echo "Total $num_rows new Tweets ";exit;

That’s it. We are done. Simple script does all the magic behind. You can also use modified version this script for live notification system. Hope it helps! Please do like or share if it is helpful to you, and also leave your comments below. Keep visiting.

Follow Us On Facebook Open Source Web Developers by Appsntech facebook group Twitter Open Source Web Developers by Appsntech twitter group Google+ Open Source Web Developers by Appsntech Google group Linkedin Open Source Web Developers by Appsntech, LinkedIn group
Copyright @2011-2015 All rights reserved. Powered By- Sanjoy Dey Productions