CODEWITHSUNDEEP
javascriptjquery
Michael Schwartz
Michael Schwartz

Reputation: 8425

Call Function Only On Single Option

http://liveweave.com/iAEThw
http://jsbin.com/UXAhuki/1/edit

I have three options in a select element div, text, and remove.

Here I state that when div is selected it calls the IntDraw function.

if ($(this).val() === 'div') {
    $('#divoptions').show();
    $('#spanoptions').hide();

    // No Background Option
    $('#nobg').click(function() {
        $('input[name=bgcolor]').val('none');
    });

    IntDraw();
    code.val(preview.html());
}

However when I select any other option I can still draw a div which means the function is still called.

I tried everything I can think of, but can't seem to fix this. Any help is greatly appreciated.

Here's the draw function...

var enabled = true;

function IntDraw() {
    if(enabled === true) {
        setMousePosition = function(e) {
            var ev = e || window.event; //Moz || IE
            if (ev.pageX) { //Moz
                mouse.y = ev.pageY + window.pageYOffset;
                mouse.x = ev.pageX + window.pageXOffset;
            } else if (ev.clientX) { //IE
                mouse.y = ev.clientY + document.body.scrollTop;
                mouse.x = ev.clientX + document.body.scrollLeft;
            }
        }

        var mouse = {
            x: 0,
            y: 0,
            startX: 0,
            startY: 0
        };
        var element = null;

        canvas.onmousemove = function(e) {
            setMousePosition();
            if (element !== null) {
                var bcolor = $('input[name=bcolor]').val(),
                    bgcolor = $('input[name=bgcolor]').val(),
                    divborderstyle = $('#divborderstyle').val(),
                    divborder = $('#divborder').val();

                element.style.position = 'absolute';
                element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
                element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
                element.style.width = Math.abs(mouse.x - mouse.startX) + '%';
                element.style.height = Math.abs(mouse.y - mouse.startY) + '%';
                element.style.border = divborder + ' ' + divborderstyle + ' ' + bcolor;
                element.style.background = bgcolor;
                element.style.overflow = 'auto';
            }
        };

        canvas.onmousedown = function(e) {
            if (element !== null) {
                element = null;
                canvas.style.cursor = "default";
                console.log("finsihed.");
            } else {
                console.log("begun.");
                mouse.startY = mouse.y;
                mouse.startX = mouse.x;
                element = document.createElement('div');
                element.className = 'rect';
                element.style.top = mouse.y + '%';
                element.style.left = mouse.x + '%';
                canvas.appendChild(element);
                canvas.style.cursor = "crosshair";
            }
        };


        canvas.onmouseup = function(e) {
            element = null;
            canvas.style.cursor = "default";
            console.log("finsihed.");
            code.val(preview.html());
        };
    }
    else {
        enabled = false;
    }
}

Upvotes: 0

Views: 88

Answers (1)

jbarnett
jbarnett

Reputation: 984

You need to return the mouse events when you don't have the 'div' option selected. And by return, I mean don't do anything on the canvas when 'div' option is not selected. You can do this by checking which option you have selected in each mouse event with 

if ($('select#tools option:selected').val() !== 'div') return;

http://jsbin.com/UXAhuki/2/edit

Upvotes: 1

Related Questions