Question

I am adding this simple plugin that I have working in a static html site, and am trying to add it to a wordpress development site based off of 960 gs. The jquery code links are correct but the console gives me this error “Uncaught TypeError: Cannot call method ‘addGrid’ of null” I got the code from this turtorial http://www.badlydrawntoy.com/2009/04/21/960gs-grid-overlay-a-jquery-plugin/

Here is the code I am using

/*<![CDATA[*/
    // onload
    $(function() {

        $("body").addGrid(12, {img_path: 'img/'});
    });
/*]]>*/

Here is the code for the plugin

/*
 * @ description: Plugin to display 960.gs gridlines See http://960.gs/
 * @author: badlyDrawnToy sharp / http://www.badlydrawntoy.com
 * @license: Creative Commons License - ShareAlike http://creativecommons.org/licenses/by-sa/3.0/
 * @version: 1.0 20th April 2009
*/
(function($){$.fn.addGrid=function(cols,options){var defaults={default_cols:12,z_index:999,img_path:'/images/',opacity:.6};var opts=$.extend(defaults,options);var cols=cols!=null&&(cols===12||cols===16)?cols:12;var cols=cols===opts.default_cols?'12_col':'16_col';return this.each(function(){var $el=$(this);var height=$el.height();var wrapper=$('<div id="'+opts.grid_id+'"/>').appendTo($el).css({'display':'none','position':'absolute','top':0,'z-index':(opts.z_index-1),'height':height,'opacity':opts.opacity,'width':'100%'});$('<div/>').addClass('container_12').css({'margin':'0 auto','width':'960px','height':height,'background-image':'url('+opts.img_path+cols+'.png)','background-repeat':'repeat-y'}).appendTo(wrapper);$('<div>grid on</div>').appendTo($el).css({'position':'absolute','top':0,'left':0,'z-index':opts.z_index,'background':'#222','color':'#fff','padding':'3px 6px','width':'40px','text-align':'center'}).hover(function(){$(this).css("cursor","pointer");},function(){$(this).css("cursor","default");}).toggle(function(){$(this).text("grid off");$('#'+opts.grid_id).slideDown();},function(){$(this).text("grid on");$('#'+opts.grid_id).slideUp();});});};})(jQuery);

Answer 1

I’m pretty sure that WordPress uses Jquery.noConflict() so depending on how you are calling jQuery this may be your problem. Try

    /*<![CDATA[*/
    // onload
    jQuery(function() {

        $("body").addGrid(12, {img_path: 'img/'});
    });
/*]]>*/