I am in the process of writing my first plugin for jQuery and object oriented programming in general. I am used to javascript and jQuery at this point and always use console.log() when doing debug things as I am now. However this time around I am getting an error the the 'console' portion of console.log() is undeclared and I can't spit any information out. Does anything about my method look strange or look like it would cause this strange error?
$.fn.setup = function(map) {
var coords;
map_ref = "map[name='"+ map + "']";
img_ref = "img[usemap='#" + map + "']";
$(img_ref + ',' + map_ref).wrapAll('<div class="mapContainer"></div>');
$('.mapContainer').append('<canvas id="canvMap" class="ctxLight"></canvas>');
$(img_ref).addClass("imgLight");
$('.mapContainer').css( {
"position": "relative",
"display": "inline-block"
} );
$('.imgLight').css( {
"position": "absolute", // necessery styling for
"z-index": "1" // layering image and canvas
} );
$('.ctxLight').css( { // Other things Setup needs to do:
"position": "relative", // - Add data- to area tags for group referencing
"z-index": "2",
"pointerEvents": "none"
} );
ctx = document.getElementById('canvMap').getContext('2d');
$('#canvMap').attr('width', $(this).width());
$('#canvMap').attr('height', $(this).height());
$(this).initMap();
for (i = 0; i < $(map_ref + ' > area').length(); i++) {
obj[i] = new MapArea(calcDimension($(this)), 1, $(this));
console.log('testing'); //this is the line in question
}
};
