Question

Here is my code:

$.fn.createBox = function(id) {
        var ctr = 0;

        $(id).css({
            cursor:'crosshair'
        });

        $(id).click(function(e) {
            if (ctr == 0) {
                var clickLocX = e.pageX;
                var clickLocY = e.pageY;
                $('<div>').attr({
                    'class':'newBox'
                })
                .css({
                    top:clickLocY,
                    left:clickLocX
                })
                .appendTo(id);

                ctr = 1;

                if (ctr == 1) {
                    $(id).mousemove(function(e){
                        var XpageCoord = e.pageX;
                        var YpageCoord = e.pageY;
                            window.Xloc = XpageCoord;
                            window.Yloc = YpageCoord;
                        var boxOffset = $('.newBox').offset();
                        var boxHeight = YpageCoord - boxOffset.top; 
                        var boxWidth = XpageCoord - boxOffset.left;
                        $('.newBox').css({
                            height:boxHeight + 'px',
                            width:boxWidth + 'px'
                        });
                        ctr = 2;
                    });
                }
            }
            else if (ctr == 2) {
                $('.newBox').remove();
                $('#work_area').css({
                    cursor: 'default'
                });
            }
            else {
                $.noop();
            }
        });
    }

A fiddle of this is also here: http://jsfiddle.net/HYQp4/1/

This code is not producing a box (I have set a css class for newBox). Can anyone tell me what is missing here?

Answer 1

From what I can tell, you never reference the id of the 2 div elements. Use jQuery(“#clickMe”) to reference the click me box, and jQuery(“#work”) to reference the drawing area.

See http://jsfiddle.net/HYQp4/3/ for how to initiate the createBox function