If you want to publish your jQuery plugins following jQuery core code writing guidelines is a good idea. Here is the some of the guidelines.

• Do NOT append an element to the DOM in your loop.
• Don't use string concatenation, instead use array's join() method for a very long strings.
• Don't use "string".match() for RegExp, instead use .test() or .exec()
• Local variables are declared and initialized on one line just below the function declaration with no extra line:
• All strings are in double quotes " ", not single quotes ' ':
• The last but not least, variable naming uses camelCase.

See more details

Read more...

Hello Friends,

There are so many ways to fix table header. We can fix table header row and rest of content of table will have overflow scroll css set  so that a scroll bar appears if page content is higher than page size. We have developed virtual fix table header jQuery plugins. It will copy table header automatically. The TABLE TR ,for which we want to fix position,should have an id specified. Have a look at the code for better understanding. I hope you may like it.

<table>
    <tr id="fixHeader">
        <td>No</td>
        <td>Name</td>
        ................
    </tr>
    <tr>
        <td>No</td>
        <td>Name</td>
        ................
    </tr>
    <tr>
        <td>No</td>
        <td>Name</td>
        ................
    </tr>
    ................
</table>

After creating table you need to call jVirtualFixHeader plugin on jquery onload function. The code looks like this;

jQuery(function(){
    jQuery('#fixHeader').jVirtualFixHeader();
});

Demo Download

Hello friends,

I always wanted to have one common function to reset all form elements. Please have a look at jQuery code that does the same thing. It finds out all element of form and loops over it and reset them. I hope this thing will be helpful specifically where there are many search fields and you need to reset them frequently.

function resetFormElements(frm){
$(frm).find(':input').each(function() {
    switch(this.type){
        case 'password':
        case 'select-multiple':
        case 'select-one':
        case 'text':
        case 'textarea':
            $(this).val('');
            break;
        case 'checkbox':
        case 'radio':
            this.checked = false;
    }
});
 }

Note : I noticed that some time in IE selectbox is not getting cleared. So you can modify script and put

'$(this).attr("selectedIndex",0);'

Demo

Hi everyone,

Sometime you might want to call a function in Javascript but check whether the function exists or not before calling it. You can test if a function exists in Javascript by simply testing for the name of it in an if() condition.

But Note that you can't test for the function name by itself.
This will work but if the function doesn't exist the Javascript will error out.

if(some_function_name)
		{}

The Correct method is Like this

 if(window.some_function_name)
		{} 

It's a method of the window object so you need to test for window.some_function_name like so, where some_function_name is the name of the function you wish to test for.

Hello All,

I have created simple jquery plugin for file upload.
I have used multiple file upload in Ajax but it’s not possible to upload file in Ajax.
This problem can be solved by this two method.

1. flash to solve this problem.
2. JavaScript works.

Javascript works more nice than Flash.

Read more...

Hi everyone
    I just came across this problem that is happening in IE.
    In the html I am adding an onclick event to an element that calls a function 'changeStatus' like this :

<a id="my_a" onclick="changestatus('my_a',1);" href="javascript:void(0);">Click Here</a>

function changestatus(id,status)
    {
        alert(status);
        jQuery('#'+id).html('Yes');
        jQuery('#'+id).unbind('click').removeAttr('onClick');
        jQuery('#'+id).click(function(event){changestatus(id,0);});
    }

Inside the changeStatus function I added the .unbind('click').removeAttr('onClick'); in order to remove the old onclick event and then add the new one.

This is working fine in FF, but in IE it is calling both the new click event and the old at the same time for some reason. I think that this causes jQuery to not know what events are taking place elsewhere, so both events get run.
When I put the following code and just bind the click event with jquery on document.ready and not set the onclick attribute of the anchor tag.

<a id="my_a" href="javascript:void(0);" >Click Here</a>

jQuery(document).ready(function(){
        $('#my_a').click(function() {
            changestatus('my_a',1);
        });
    });

This is works well on both FF and IE and I believe that this is the best way to fix this problem.
    Please correct me if this is wrong logic or any other way to fix this problem.

Our current application has been affected by a change in the latest jQuery (1.4.1) from the previous release.

In form submission using ajax, jQuery now posts multiple selectbox or checkboxes values with a character "[]" appended to variable (I think jQuery is being more favorable to PHP).

I used firebug to look my argument passed. Just look below how it passed an argument with "[]" appended.

It is just because jQuery 1.4 adds support for nested param serialization in jQuery.param, using the approach popularized by PHP, and supported by Ruby on Rails.

For instance, {foo: ["bar", "baz"]} will be serialized as "foo[]=bar&foo[]=baz".

If its added for PHP or Ruby on Rails support then what about others existing application? I think jQuery should give an optional boolean param (language specific) for them to set up these settings.

If you need the old behavior, you can turn it back on by setting the traditional Ajax setting.

jQuery.ajaxSettings.traditional = true;

Hello Friends,

A jQuery plugin is simply a way to put your code into a package. It makes it easier to maintain and use in different projects.

I have created sample jquery plugin for checking all checkboxes at one click. Also you can select odd or even row using this plugin. You need to give class of child checkboxes. Remember, Class name must be same for all.

This plugins have three attributes.

1. child - It contains name of class which is assinged to child checkboxes.
2. odd - It contains boolean value either true or false. default value is false;
3. even - It also contains boolean value either true or false. defaule value is false;

Demo  Download

jQuery(function(){
    jQuery('#one').checkall({
          child : 'child',
          odd : true              
   });  
});

jQuery.checkAll.js contains

(function($){
    $.fn.extend({ 
        // Check and uncheck all check boxes
        checkall: function(options){
            var defaults = { 
                child : '',
                odd : false,
                even : false
            };
            var opts = $.extend({},defaults, options);
            return this.each(function(){
                obj = $(this);
                obj.click(function(){
                    var checkStatus = $(obj).attr('checked');
                    if(opts.odd == true){
                        $('.'+opts.child+'').attr('checked',false);
                        $('.'+opts.child+':even').attr('checked',checkStatus);            
                    }else if(opts.even == true){
                        $('.'+opts.child+'').attr('checked',false);
                        $('.'+opts.child+':odd').attr('checked',checkStatus);            
                    }else{
                        $('.'+opts.child+'').attr('checked',checkStatus);
                    }
                });
            });
        }
    });
})(jQuery);