Lighting 

sanctuary

test

// ********************************************* // DROP-DOWN TEXTAREA (editable) // ********************************************* My.Templates.DropEditTA = Active.Templates.Text.subclass(); My.Templates.DropEditTA.create = function() { var obj = this.prototype; var editarea = new Active.HTML.TEXTAREA; editarea.setId("myDDtxt"); editarea.setClass("templates", "dropdowntextarea"); editarea.setStyle("height", "52"); // editarea.setAttribute("readonly", "true"); editarea.setAttribute("type", "text"); editarea.setContent("text", function(){ return template.getItemProperty("text") }); var editor = new Active.HTML.INPUT; editor.setClass("templates", "input"); editor.setStyle("background-color", "lightyellow"); editor.setAttribute("type", "text"); editor.setAttribute("readonly", "true"); editor.setAttribute("value", function(){ return document.all.myDDtxt.value } ); //EVENTS obj.setEvent("ondblclick", switchToEditMode ); editor.setEvent("onclick", switchToTextMode ); editarea.setEvent("onblur", switchToTextMode ); //FUNCTIONS // templatet variable provides temporary reference // to the parent template during edit mode. var template; function switchToEditMode(){ if (template) { switchToTextMode(); } template = this; document.all.myselect.innerHTML=editarea; var el = template.element(); var pos = getAbsolutePos(el); editarea.setStyle("left", pos.x); editarea.setStyle("top", pos.y + el.offsetHeight); editarea.setStyle("width", el.offsetWidth); template.element().style.padding = 0; template.element().innerHTML = editor; document.all.myDDtxt.focus(); } function switchToTextMode(){ var value = document.all.myDDtxt.value; template.setItemProperty("text", value); document.all.myselect.innerHTML=""; template.refresh(); template=null; } function getAbsolutePos(el) { var SL = 0, ST = 0; var is_div = /^div$/i.test(el.tagName); if (is_div && el.scrollLeft) SL = el.scrollLeft; if (is_div && el.scrollTop) ST = el.scrollTop; var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST }; if (el.offsetParent) { var tmp = getAbsolutePos(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } return r; }; }; My.Templates.DropEditTA.create(); //************************************** //************************************** And as usual the CSS............. .active-templates-dropdowntextarea { width: 100%; height: 100%; padding: 0px 5px; margin: 0px 0px; border: 0px solid #666; vertical-align: top; font: menu; line-height: 1.4em; BORDER-TOP: black 2px solid;BORDER-BOTTOM: black 2px solid; BORDER-RIGHT: black 2px solid;BORDER-LEFT: black 2px solid; OVERFLOW: auto;POSITION: absolute } .active-templates-dropdowntextarea.gecko { display: block; margin: 0px; }