jQuery Vote Plugin

This plugin depends on the jQuery Corner Plugin. The styles are from the jQuery-ui themes. Dual licensed under the MIT and GPL licenses.

The following shows how to use the plugin.

$('#voter-1').voter();
<div id="voter-1"></div>

$('#voter-2').voter({start:5,max:7,min:4});
<div id="voter-2"></div>

$('#voter-3').voter({width:60,fontSize:30});
<div id="voter-3"></div>

$('#voter-4').voter({
  max:3,
  min:0,
  afterUp:function(val){$('#message').html("Thank you for voting up!");},
  afterDown:function(val){$('#message').html("But.. Why?");},
  maxReached:function(val){$('#message').html("You can't vote more than that..");},
  minReached:function(val){$('#message').html(val+" is the minimum.");}
});
<div id="voter-4"></div> 
<div id="message"/> 

Download available here.

jQuery Plugin Tutorial Part V - The Implementation

Now we will look into implementing the plugin. After we finish the plugin we should be able to call the voter in the following manner.

$("#element-id").voter();

In order to achieve this we will make the changes to the matched elements in our plugin as follows.

return this.each(function(){
    $(this).addClass("voter-wrapper");
    
    var inner=$('<div>'+settings.start+'</div>');
    var up = $('<div>+</div>').addClass('voter-action');     
    up.click(function(){
        if(parseInt(inner.html())<settings.max){
            inner.html(parseInt(inner.html())+1);
        }
    });
    $(this).append(up);

    $(this).append(inner);
    
    var down = $('<div>-</div>').addClass('voter-action');
    down.click(function(){
        if(parseInt(inner.html())>settings.min){
            inner.html(parseInt(inner.html())-1);
        }
    });
    $(this).append(down);
});

Let us take a look at the code line by line.

$(this).addClass("voter-wrapper");

This line will add the class "voter-wrapper" to the matched element. That css class will define the styles related to the whole element.

var inner=$('<div>'+settings.start+'</div>');

This line will create a new html div element and assign the value to the variable 'inner'.

var up = $('<div>+</div>').addClass('voter-action');     
up.click(function(){
   if(parseInt(inner.html())<settings.max){
       inner.html(parseInt(inner.html())+1);
   }
});
$(this).append(up);

This above code will create a new html element containing the "+" mark that will be used to vote up. Then we assign it an onclick handler and append it to our element.

$(this).append(inner);

The above line will append the 'inner' element that we created above. It element will show the vote count.
The code

var down = $('<div>-</div>').addClass('voter-action');
down.click(function(){
    if(parseInt(inner.html())>settings.min){
        inner.html(parseInt(inner.html())-1);
    }
});
$(this).append(down);

will create and append the element that will be used to vote down.
The full code of our plugin is given below.

(function($){
    $.fn.voter = function(options){
        var settings = {
            start:0,
            max:10,
            min:0
        };
        if(options){            
            $.extend( settings, options );                
        }
        return this.each(function(){
            $(this).addClass("voter-wrapper");            
            
            var inner=$('<div>'+settings.start+'</div>');
            var up = $('<div>+</div>').addClass('voter-action');     
            up.click(function(){
                if(parseInt(inner.html())<settings.max){
                    inner.html(parseInt(inner.html())+1);
                }
            });
            $(this).append(up);
            $(this).append(inner);
            
            var down = $('<div>-</div>').addClass('voter-action');
            down.click(function(){
                if(parseInt(inner.html())>settings.min){
                    inner.html(parseInt(inner.html())-1);
                }
            });
            $(this).append(down);
        });
    };
 }
)(jQuery);

Now we can call the plugin as follows.

$("#voter").voter();

A demo and code is available at this jsFiddle.

jQuery Plugin Tutorial Part IV - The Options

As discussed in part one, our target is to create a voter that will allow visitors to vote on something. So we need at least two parameters passed to this function and they are starting value and the maximum value. Let us see how we can pass these variables to our plugin.

(function($){
    $.fn.voter = function(options){
        //The following are the default values
        var settings = {
            start:0,
            end:100,
        };
         //if options are passed
        //to the plugin
        if(options){
            //the following line merges the
            //variable 'settings' and 'options'
            //overwriting the values in 'settings'
            $.extend( settings, options );                
        }
        return this.each(function(){
           //our functionality here
        });
    };
 }
)(jQuery);

You will be able to understand the above code by taking a look at the comments. Take a look at this link to learn more about the $.extend() function.
Now when we call the plugin, we can set the options like shown below.

$("#element-id").voter({start:10});

This will set the "start" value to '10'. The end value will still be the default value which is 100.

jQuery Plugin Tutorial Part III - The Beginning

Before we start, do you know what the following code does?

(function(msg){
    alert(msg);
 })("Hey!");

Its called a self executing function.  In this code the String "Hey!"  will be passed to the anonymous function and the function will execute. You can see it in action here. If you want to learn more about self executing functions, take a look at this article on self executing functions.
I mentioned this because we will be adding our plugin to jQuery inside such a function. The following is a very simple jQuery plugin that will make the matched elements disappear.

(function($){
    //our plugin code
    $.fn.disappear = function(){
        this.each(function(){
            $(this).fadeOut("slow");
        });
    };
 }
)(jQuery); 

Now you can use this plugin to make elements disappear as follows.

$("p").disappear();

Will make all "p" or paragraph elements disappear. The $("p") part will match all paragraph elements and pass them to our function. And inside our function, we make each element fade out. You can see the code in action here.
If you remember in tutorial two, it was mentioned that jQuery supports chaining of function calls. Our above code does not support this. So in order to make sure that we don't break the chainability we  return the elements that were matched as shown below.

(function($){
    //our plugin code
    $.fn.disappear = function(){
        return this.each(function(){
            $(this).fadeOut("slow");
        });
    };
 }
)(jQuery);

Now we can chain functions like shown below. 

$("p").disappear().fadeIn();

You can see how the code works at this jsFiddle.

jQuery Plugin Tutorial Part II - jQuery Basics

Before diving into developing a jQuery plugin, I decided to explain a bit about jQuery. If you are familiar with jQuery you can skip this part of the tutorial. jQuery as stated on the jQuery website, is a "write less do more JavaScript library". The most unique thing about jQuery is the jQuery selectors functionality.

Normally if we were to select an element using its "id" in JavaScript we would have to write

var element = document.getElementById("element-id");

but when using jQuery it is as simple as

var element = $("#element-id");

In order to set the class attribute of an element using JavaScript, we say

var element = document.getElementById("element-id");
element.setAttribute("class" , "class-name");

but when using jQuery, all we have to do is

$('#element-id').attr('class','class-name'); 

Another feature of jQuery is that you can chain functions in jQuery like follows.

$('#element-id').addClass('new-class').removeClass('old-class'); 

Not only can you select specific elements by id, but also you can select various other combinations.

$(".class-name")

selects all elements of a class.

$("img")

selects all elements of type "img".
So the code

$("img").addClass("class-name");

will add the class "class-name"  to all img elements.

By now you would have noticed that these are css selectors. But jQuery has its own selectors as well, such as the :animated selector.

Now let us look at how a plugin is invoked using jQuery. If you have included a date-picker plugin for jQuery, the usual way of invoking a date-picker would be

$("input-element").datepicker();

And you will have a date-picker that looks like the following.

Quite easy right? It was easy because some one else took the time and effort to write the functionality as a jQuery plugin. As you can see the benefit of writing this as a plugin is that it can be very easily reused. It is about writing such  a plugin that we are going to discuss in this tutorial.

jQuery Plugin Tutorial Part I - What We'll be Doing

In this tutorial series we will go through developing a jQuery plugin that will be a simple voting widget. The plugin will allow a user to easily embed a voter which will allow users to vote something up or down.

Custom Comment Message - Wordpress Plugin

This Wordpress plugin allows you to change the 'Leave a Relpy' message that appears as the heading of the comments form.
You can specify the message to be shown on a per-post basis. The following screen-shot shows how the user interface looks.

If you do not specify a comments section title for a certain post, it will default to the global value. You can set this global value on an admin panel. The following screen-shot shows this.

After you set the comments-section title, you will see that this appears when a single post is shown like below.

If the plugin does not work,  check to see if the comments.php file of the currently activated theme calls the 'comment_form()' function.
This plugin should work from Wordpress version 3.0 upwards and has been tested on 3.0, 3.1.1  and 3.1.2.

In order to install the plugin, download it from here and upload the contents of the zip file to the wp-content/plugins folder. Then activate the plugin. You can also install it from the Wordpress admin dashboard.