<script type="text/javascript">
//<![CDATA[
var dragresize = new DragResize('dragresize',
{ minWidth: 50, minHeight: 100, minLeft: 10,maxLeft:1000, maxTop: 600 });
dragresize.isElement = function(elm)
{
if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
if (elm.className && elm.className.indexOf('drsElement1') > -1) return true;
};
dragresize.isHandle = function(elm)
{
if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
if (elm.className && elm.className.indexOf('drsMoveHandle1') > -1) return true;
};
dragresize.ondragfocus = function() { };
dragresize.ondragstart = function(isResize) { };
dragresize.ondragmove = function(isResize) { };
dragresize.ondragend = function(isResize) { };
dragresize.ondragblur = function() { };
dragresize.apply(document);
//]]>
</script>
<link rel="stylesheet" type="text/css" href="css/ima.css" />
</head>
<body oncontextmenu="return false;">
<table width="100%"><tr><td align="center">
</td></tr></table>
<div class="drsElement1" style="left: 210px; top: 100px;width: 250px; height: 20px;"><input type="text" id="txtbox" value="Write Here" size="79" maxlength="50" style="border:none" readonly onClick="selectArea()" onblur="deselectArea()" /></div>
<script language="javascript">
function selectArea(txtbox){
$(txtbox).readOnly=false;
$(txtbox).style.border='1px solid #AEFFAE';
}
function deselectArea(txtbox){
alert('dselect');
$(txtbox).readOnly=true;
$(txtbox).style.border='none';
}
</script>
</body>
</html>
/////////////////////////////
Also the resize handle at the bottom middle is not working.
thanks