using nicedit to edit dynamically created divs

Question

I have three dynamically created divs on a page. when the user click on a div, an 'edit text' button appears.

When the user clicks the edit text button, I want a nicedit format bar to appear over the div so the user can edit the text.

I have created most of the code below but am having an issue with removing the format bar from one box when editing another box. Also once a box has been edited it cannot be edited again.

Where am I going wrong?

I have created a jsfiddle so you can see what my problem is - http://jsfiddle.net/j6FLa/7/

and here is the code

<style>
    .dragbox {
        position:absolute;
        width:10px;
        height:25px;
        padding: 0.0em;
        margin:25px;
        z-index:2
    }
    .textarea1 {
        width: 300px;
        height:75px;
        padding: 0.5em;
        z-index:3;
        resize:none;
    }
    #content {
        display: block;
        position:absolute;
        top:150px;
        left:0px;
        margin:auto;
        z-index:1;
    }
    .editbutton {
        background-color:#CCC;
        width:50px;
        height:20px;
        font-size:10px;
        z-index:1003;
    }
    #myNicPanel {
        visibility:hidden;
    }
</style>
<script>
    var startleft = -100;
    var myNicEditor;

    for (var m = 1; m < 4; m++) {
        startleft = +startleft + 200;
        OldTextArea(m, 'draggable', 50, startleft, '150', '150', 'new textbox', m, '5', 'solid', '#ff0000', '5');
    }

    function OldTextArea(i, id, top, left, width, height, content, zindex, borderwidth, borderstyle, bordercolor, padding) {
        id = id + i;
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute('class', 'dragbox');
        newdiv.setAttribute('iterate', i);
        newdiv.style.position = "absolute";
        newdiv.style.top = top + "px";
        newdiv.style.left = left + "px";
        newdiv.innerHTML = "<br><div id='div" + i + "' name='textarea[" + i + "]'  class='textarea1' style='padding:" + padding + "px; border-width:" + borderwidth + "px; border-style:" + borderstyle + ";  border-color:" + bordercolor + "; width:" + width + "px; height:" + height + "px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;'><span id='span" + i + "'>" + content + "</span></div></div>";
        document.getElementById("frmMain").appendChild(newdiv);
        var top_button_left_pos = -75;
        var area1 = "";
        var edit = document.createElement('input');
        edit.setAttribute('type', 'button');
        edit.setAttribute('value', 'edit this text');
        edit.setAttribute('class', 'editbutton');
        edit.style.position = "absolute";
        edit.style.top = "30px";
        edit.style.width = "75px";
        edit.style.left = +top_button_left_pos + "px";
        edit.style.float = "left";
        edit.style.visibility = "hidden";
        edit.onclick = function(e) {
            if (area1 == "") {
                myNicEditor = new nicEditor({
                    buttonList: ['fontSize', 'fontFamily', 'fontFormat', 'bold', 'italic', 'underline', 'left', 'centre', 'right', 'justify', 'ol', 'ul', 'removeformat', 'indent', 'outdent', 'hr', 'forecolor', 'bgcolor', 'link', 'unlink']
                });
                myNicEditor.setPanel('myNicPanel');
                myNicEditor.addInstance('div' + i);
                var contentclick = document.getElementById('span' + i);
                contentclick.style.cursor = "select";
                contentclick.onmousedown = function(event) {
                    event.stopPropagation();
                    e.cancelBubble = true;
                };

                document.getElementById('myNicPanel').style.position = 'relative';
                document.getElementById('myNicPanel').style.top = +top + "px";
                document.getElementById('myNicPanel').style.left = +left + "px";
                document.getElementById('myNicPanel').style.visibility = 'visible';
                area1 = '1';
            } else {
                area1 = "";
                document.getElementById('myNicPanel').style.visibility = 'hidden';
                myNicEditor.removeInstance('div' + i);
            }
        };
        newbr = document.createElement('BR');
        document.getElementById(id).appendChild(newbr);
        document.getElementById(id).appendChild(edit);

        $('.dragbox').click(function() {
            $(".editbutton").css('visibility', 'hidden');
            $(this).find(".editbutton").css('visibility', 'visible');
        });
        $('.dragbox').focusout(function() {
            $(".editbutton").css('visibility', 'hidden');
            $('#frmMain').find('#myNicPanel').style.visibility = 'hidden';
        });

    }
</script>

<div id="myNicPanel" style="width: 600px;"></div>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div19.php" method="post">
    <div id="content"></div>
</form>

EDIT

I have managed to get the edit bars to dissapear and reappear when clicking from box to box, but once edited I cannot get the bar to reappear ove that box - http://jsfiddle.net/j6FLa/8/

Answer 1

I managed to get it working by removing the focusout function.