<HTML>
<HEAD>
<style>
h1, h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
.move
{
width:100%;
background-color:#99CCFF;
border-bottom:1px solid blue;
font-size:14px;
font-family:vardana;
font-color:"#33CCAA";
text-align:center;
}
.info
{
width:100%;
background-color:#99CCFF;
border-top:1px solid blue;
font-size:13px;
font-family:vardana;
font-color:"#33CCAA";
}
.panel2{
width:150; position:absolute; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana;}
.panel{
width:150; position:absolute; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana;}
.panel a:visited{color:blue;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}
#panel a.visited{
text-decoration:none;
}
.menu
{
width:100%;
background-color:lightyellow;
font-size:13px;
font-family:vardana;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
/// DEVELPED BY SYED NAVED ULLAH SHAH
// /********
/// CATALYST IT SOLUTIONS(PVT) LTD
///CATALYST.PK
//
function getSize(name)
{
op=document.getElementById(name).style.width;
alert(op);
//return value;
}
N = (document.all) ? 0 : 1;
var ob;
var over = false;
var over_id ="";
function MD(e) {
MOUSTSTART_X=event.clientX;
MOUSTSTART_Y=event.clientY;
if (over)
{
//alert(N)
if (N) {
ob = document.getElementById(over_id);
X=e.layerX;
Y=e.layerY;
return false;
}
else{
ob = document.getElementById(over_id);
ob = ob.style;
ob2 = document.getElementById("MAINTABLE");
ob2 = ob2.style;
obwidth=parseInt(ob.width);
obwidth2=parseInt(ob2.width);
X=event.offsetX;
Y=event.offsetY;
}
}
}
function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else{
st=event.clientX-MOUSTSTART_X+obwidth;
st2=event.clientX-MOUSTSTART_X+obwidth2;
if(st>=30)
{
ob.width=st;
ob2.width=st2;
document.getElementById("status").innerHTML=st;
}
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</HEAD>
<BODY>
<!--
YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
IT RETURNS .. ERROR..
-->
<H1>RESIZABLE TABLE COLUMN</H1>
<TABLE border="1" STYLE="width:500px; overflow:hidden" ID="MAINTABLE">
<TR>
<TH id="panel0" class='move' onmouseover="over=true;over_id='panel0'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO0</TH>
<TH id="panel1" class='move' onmouseover="over=true;over_id='panel1'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO1</TH>
<TH id="panel2" class='move' onmouseover="over=true;over_id='panel2'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO2</TH>
<TH id="panel3" class='move' onmouseover="over=true;over_id='panel3'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO3</TH>
<TH id="panel4" class='move' onmouseover="over=true;over_id='panel4'" onmouseout='over=false;' style='width:100px; cursor:move; overflow:hidden'>CO4</TH>
</TR>
<TR>
<TD>1_0</TD>
<TD>1_1</TD>
<TD>1_2</TD>
<TD>1_3</TD>
<TD>1_4</TD>
</TR>
<TR>
<TD>2_0</TD>
<TD>2_1</TD>
<TD>2_2</TD>
<TD>2_3</TD>
<TD>2_4</TD>
</TR>
<TR>
<TD>3_0</TD>
<TD>3_1</TD>
<TD>3_2</TD>
<TD>3_3</TD>
<TD>3_4</TD>
</TR>
<TR>
<TD>4_0</TD>
<TD>4_1</TD>
<TD>4_2</TD>
<TD>4_3</TD>
<TD>4_4</TD>
</TR>
</table>
<div id="status"></div>
<h2>Developed By Syed Naved Ullah Shah </h2>
*****<BR>
Karachi, Pakistan
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
var firefox = document.getElementById&&!document.all;
var isdrag = false;
var x0 = 0,y0=0,tx=0,ty=0;
var anchoc=0;anchot=0;
var objon = null;tabla = null;
getTopPos = function(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
}
return returnValue;
}
getLeftPos = function(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
}
return returnValue;
}
function comienza(e){
if(!firefox)e = event;
objon = (!firefox)?e.srcElement:e.target;
if(objon.className == "arrastrable"){
isdrag = true;
tabla = document.getElementById("arrastrablet");
x0 = e.clientX; y0 = e.clientY;
tx = getLeftPos(objon); ty = getTopPos(objon);
anchoc = objon.offsetWidth;
anchot = tabla.offsetWidth;
}
}
function moviendo(e){
if(!firefox)e = event;
if(isdrag){
ic=e.clientX-x0+anchoc;
it=e.clientX-x0+anchot;
objon.style.width = ic + "px";
tabla.style.width = it + "px";
window.status = ic + "-" + it;
}
}
function termina(e){
isdrag = false;
}
document.onmouseup = termina;
document.onmousemove = moviendo;
document.onmousedown=comienza;
</script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="1" cellpadding="1" id="arrastrablet">
<tr bgcolor="#0000FF">
<td class="arrastrable"><span class="style1">Arrastra 1</span></td>
<td class="arrastrable"><span class="style1">Arrastra 2</span></td>
<td class="arrastrable"><span class="style1">Arrastra 3</span></td>
<td class="arrastrable"><span class="style1">Arrastra 4</span></td>
</tr>
<tr>
<td>coor (0,0)</td>
<td>coor (1,0)</td>
<td>coor (2,0)</td>
<td>coor (3,0)</td>
</tr>
<tr>
<td>coor (0,1)</td>
<td>coor (1,1)</td>
<td>coor (2,1)</td>
<td>coor (3,1)</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
var firefox = document.getElementById&&!document.all;
var isdrag = false;
var x0 = 0,y0=0,tx=0,ty=0;
var anchoc=0;anchot=0;
var objon = null;tabla = null;
getTopPos = function(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
}
return returnValue;
}
getLeftPos = function(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
}
return returnValue;
}
function comienza(e){
if(!firefox)e = event;
objon = (!firefox)?e.srcElement:e.target;
if(objon.className == "arrastrable"){
isdrag = true;
tabla = document.getElementById("arrastrablet");
x0 = e.clientX; y0 = e.clientY;
tx = getLeftPos(objon); ty = getTopPos(objon);
anchoc = objon.offsetWidth;
anchot = tabla.offsetWidth;
}
}
function moviendo(e){
if(!firefox)e = event;
if(isdrag){
ic=e.clientX-x0+anchoc;
it=e.clientX-x0+anchot;
if(ic >= 5){
objon.style.width = ic + "px";
window.status = ic + "-" + it;
tabla.style.width = it + "px";
}else{
}
}
}
function termina(e){
isdrag = false;
}
document.onmouseup = termina;
document.onmousemove = moviendo;
document.onmousedown=comienza;
</script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
.arrastrable{
width:100px;
overflow:hidden;
}
-->
</style>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1" id="arrastrablet">
<tr bgcolor="#0000FF">
<td class="arrastrable"><span class="style1">Arrastra 1</span></td>
<td class="arrastrable"><span class="style1">Arrastra 2</span></td>
<td class="arrastrable"><span class="style1">Arrastra 3</span></td>
<td class="arrastrable"><span class="style1">Arrastra 4</span></td>
</tr>
<tr>
<td>coor (0,0)</td>
<td>coor (1,0)</td>
<td>coor (2,0)</td>
<td>coor (3,0)</td>
</tr>
<tr>
<td>coor (0,1)</td>
<td>coor (1,1)</td>
<td>coor (2,1)</td>
<td>coor (3,1)</td>
</tr>
</table>
</body>
</html>
<HTML>
<HEAD>
<style>
h1, h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
.move
{
width:100%;
background-color:#99CCFF;
border-bottom:1px solid blue;
font-size:14px;
font-family:vardana;
font-color:"#33CCAA";
text-align:center;
}
.info
{
width:100%;
background-color:#99CCFF;
border-top:1px solid blue;
font-size:13px;
font-family:vardana;
font-color:"#33CCAA";
}
.panel2{
width:150; position:absolute; border:1px solid blue; left:500; top:200; font-size:13px; font-family:vardana;}
.panel{
width:150; position:absolute; border:1px solid blue; left:350; top:200; font-size:13px; font-family:vardana;}
.panel a:visited{color:blue;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}
#panel a.visited{
text-decoration:none;
}
.menu
{
width:100%;
background-color:lightyellow;
font-size:13px;
font-family:vardana;
}
</style>
<!--[if IE]>
<style type="text/css">
div.scrollable {
/* shrink the window, adjust for the 2 border pixels */
height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= 80 ? "80px": "auto" );
overflow-x: visible;
overflow-y: auto;
}
div.scrollable table {
/* adjust for the 17 pixels for the scrollbar */
width: expression(this.parentNode.offsetWidth-17);
}
/* set the table row */
div.scrollable table thead tr {
position: relative;
/* this fixes IE header jumping bug */
top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}
</style>
<![endif]-->
<!-- if mozilla -->
<style type="text/css">
html>body div.scrollable tbody {
height: 80px;
overflow: auto;
}
/* add 17 for the scrollbar */
html>body th.scrollbarCol {
width:17px;
}
</style>
<script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" >
</script>
<SCRIPT LANGUAGE="JavaScript">
var ob;
var over = false;
var over_id ="";
var iEdgeThreshold = 10;
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft,curtop];
}
/* Function that tells me if on the border or not */
function isOnBorderLeft(objTable,objTh,event){
var left = objTh.offsetLeft;
var pos = findPos(objTable);
var absLeft = pos[0] + left;
if( event.clientX < (absLeft + iEdgeThreshold) ){
return 1;
}
return 0;
}
function isOnBorderRight(objTable,objTh,event){
var width = objTh.offsetWidth;
var left = objTh.offsetLeft;
var pos = findPos(objTable);
var absRight = pos[0] + left + width;
if( event.clientX > (absRight - iEdgeThreshold) ){
return 1;
}
return 0;
}
function getNodeName(objReference,nodeName){
var oElement = objReference;
while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
if (oElement.tagName.toUpperCase() == nodeName) {
return oElement;
}
oElement = oElement.parentNode;
}
return null;
}
function do_resize(objTh,event){
if(!event) event = window.event;
var objTable = getNodeName(objTh,"TABLE");
if( isOnBorderLeft(objTable, objTh,event) ){
objTh.style.cursor="e-resize";
return true;
}
else if( isOnBorderRight(objTable,objTh,event) ){
objTh.style.cursor="e-resize";
return true;
}
objTh.style.cursor="";
return false;
}
function MD(event) {
if(!event) event = window.event;
MOUSTSTART_X=event.clientX;
MOUSTSTART_Y=event.clientY;
if (over){
ob = document.getElementById(over_id);
ob2 = getNodeName(ob,"TABLE");
obwidth=parseInt(ob.style.width);
obwidth2=parseInt(ob2.style.width);
}
}
function MM(event) {
if(!event) event = window.event;
if (ob) {
st=event.clientX-MOUSTSTART_X+obwidth;
st2=event.clientX-MOUSTSTART_X+obwidth2;
if(st>=30){
ob.style.width=st;
ob2.style.width=st2;
document.getElementById("status").innerHTML=st;
}
if(event.stopPropagation)event.stopPropagation();
if(document.selection) document.selection.empty();
else if(window.getSelection)window.getSelection().removeAllRanges();
}
}
function MU(event) {
if(!event) event = window.event;
if(ob != null){
if(event.stopPropagation)event.stopPropagation();
if(document.selection) document.selection.empty();
else if(window.getSelection)window.getSelection().removeAllRanges();
ob = null;
}
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</HEAD>
<BODY>
<!--
YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
IT RETURNS .. ERROR..
-->
<H1>RESIZABLE TABLE COLUMN</H1>
<table style="border: 1px gray solid">
<tr>
<td>
<div class="scrollable">
<TABLE border="1" STYLE="width:500px; overflow:hidden; table-layout:fixed" class="sortable">
<THEAD>
<TR>
<TH id="panel0" class='move' onmousemove="over=do_resize(this,event);over_id='panel0'" onmouseover="over=do_resize(this,event);over_id='panel0'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO0</TH>
<TH id="panel1" class='move' onmousemove="over=do_resize(this,event);over_id='panel1'" onmouseover="over=do_resize(this,event);over_id='panel1'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO1</TH>
<TH id="panel2" class='move' onmousemove="over=do_resize(this,event);over_id='panel2'" onmouseover="over=do_resize(this,event);over_id='panel2'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO2</TH>
<TH id="panel3" class='move' onmousemove="over=do_resize(this,event);over_id='panel3'" onmouseover="over=do_resize(this,event);over_id='panel3'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO3</TH>
<TH id="panel4" class='move' onmousemove="over=do_resize(this,event);over_id='panel4'" onmouseover="over=do_resize(this,event);over_id='panel4'" onmouseout='over=false;' style='width:100px; overflow:hidden'>CO4</TH>
<TH class="sorttable_nosort scrollbarCol"></TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1_0</TD>
<TD><input type="text" value="this is a very long text string" style="width:100%" ></TD>
<TD>1_2</TD>
<TD>1_3</TD>
<TD>1_4</TD>
</TR>
<TR>
<TD>2_0</TD>
<TD>2_1</TD>
<TD>2_2</TD>
<TD>2_3</TD>
<TD>2_4</TD>
</TR>
<TR>
<TD>3_0</TD>
<TD>3_1</TD>
<TD>3_2</TD>
<TD>3_3</TD>
<TD>3_4</TD>
</TR>
<TR>
<TD>4_0</TD>
<TD>4_1</TD>
<TD>4_2</TD>
<TD>4_3</TD>
<TD>4_4</TD>
</TR>
</TBODY>
</table>
</div>
</td>
</tr>
</table>
<div id="status"></div>
</HTML>
<HTML>
<HEAD>
<style>
h1, h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
</style>
<!--[if IE]>
<style type="text/css">
div.scrollable {
/* shrink the window */
height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= parseInt(this.getElementsByTagName('TBODY')[0].style.height) && parseInt(this.getElementsByTagName('TBODY')[0].style.height) > 0 ? this.getElementsByTagName('TBODY')[0].style.height : "auto" );
overflow-x: visible;
overflow-y: auto;
width: expression(this.getElementsByTagName('TABLE')[0].offsetWidth);
}
/* set the table row */
div.scrollable table thead tr {
position: relative;
/* this fixes IE header jumping bug, adjust for the table border */
top: expression( (this.parentNode.parentNode.parentNode.scrollTop - 2)+ 'px' );
}
/* needed for IE if tbody.height is set */
div.scrollable tr{
height:auto;
}
</style>
<![endif]-->
<style type="text/css">
/* if mozilla */
html>body div.scrollable tbody {
overflow: auto;
}
table.resizable th{
text-align:center;
overflow: hidden;
}
/* if mozilla, add 10 for the scrollbar */
html>body th.scrollbarCol {
width:10px;
}
table.resizable td{
overflow: hidden;
}
table.resizable{
table-layout:fixed;
}
table.resizable input{
width:100%;
}
table.resizable textarea{
width:100%;
}
.nowrap {
white-space:nowrap;
}
/* needed for IE */
table.tabular th.scrollbarCol {
background-color:transparent;
}
table.tabular {
FONT-SIZE: 13px;
FONT-FAMILY: 'Verdana, Arial, Helvetica, sans-serif';
COLOR: #336699;
}
table.tabular thead {
COLOR: #ffffff;
FONT-WEIGHT: bold;
}
table.tabular th{
background-color:#c0c0c0;
padding: 4px;
}
table.tabular td {
background-color:#EAF4F3;
padding: 2px;
}
</style>
<script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" >
</script>
<SCRIPT type="text/javascript">
var objTh = null;
var objDiv = null;
var overColumn = false;
var overTable = false;
var iEdgeThreshold = 10;
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft,curtop];
}
/* Function that tells me if on the right border or not */
function isOnBorderRight(elem,event){
var width = elem.offsetWidth;
var pos = findPos(elem);
var absRight = pos[0] + width;
if( event.clientX > (absRight - iEdgeThreshold) ){
return true;
}
return false;
}
/* Function that tells me if on the bottom border or not */
function isOnBorderBottom(elem,event){
var height = elem.offsetHeight;
var pos = findPos(elem);
var absTop = pos[1];
if( event.clientY > (absTop + elem.offsetHeight - iEdgeThreshold) ){
return true;
}
return false;
}
function getParentNode(objReference,nodeName,className){
var oElement = objReference;
while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
if (oElement.tagName.toUpperCase() == nodeName && (className == null || oElement.className.search("\b"+className+"\b") != 1) ) {
return oElement;
}
oElement = oElement.parentNode;
}
return null;
}
function doColumnResize(th,event){
if(!event) event = window.event;
if( isOnBorderRight(th,event)){
overColumn=true;
th.style.cursor="e-resize";
}
else{
overColumn=false;
th.style.cursor="";
}
return overColumn;
}
function doTableResize(div,event){
if(!event) event = window.event;
if( isOnBorderBottom(div,event)){
div.style.cursor="move";
overTable=true;
}
else{
div.style.cursor="";
overTable=false;
}
return overTable;
}
function doneTableResizing(){
overTable=false;
}
function doneColumnResizing(){
overColumn=false;
}
function MD(event) {
if(!event) event = window.event;
MOUSTSTART_X=event.clientX;
MOUSTSTART_Y=event.clientY;
if (overColumn){
if(event.srcElement)objTh = event.srcElement;
else if(event.target)objTh = event.target;
else return;
objTh = getParentNode(objTh,"TH");
if(objTh == null) return;
objTable = getParentNode(objTh,"TABLE");
objThWidth=parseInt(objTh.style.width);
objTableWidth=parseInt(objTable.offsetWidth);
}
else if(overTable){
if(event.srcElement)objDiv = event.srcElement;
else if(event.target)objDiv = event.target;
else return;
objDiv = getParentNode(objDiv,"DIV","scrollable");
if(objDiv == null)return;
objDivHeight=objDiv.offsetHeight;
objTbodyHeight=objDiv.getElementsByTagName('TBODY')[0].offsetHeight;
}
}
function MM(event) {
if(!event) event = window.event;
if (objTh) {
var thSt=event.clientX-MOUSTSTART_X+objThWidth;
var tableSt=event.clientX-MOUSTSTART_X+objTableWidth;
/* check for minimum width */
if(thSt>=10){
objTh.style.width=thSt;
objTable.style.width=tableSt;
}
if(document.selection) document.selection.empty();
else if(window.getSelection)window.getSelection().removeAllRanges();
}
else if( objDiv ){
var divSt=event.clientY-MOUSTSTART_Y+objDivHeight;
var tbodySt = event.clientY-MOUSTSTART_Y+objTbodyHeight;
/* check for minimum height */
if(divSt >=70 ){
var tbody = objDiv.getElementsByTagName('TBODY')[0];
var table = objDiv.getElementsByTagName('TABLE')[0];
/* adjust the height for mozilla, this is not needed for IE */
if(tbodySt >= tbody.scrollHeight)tbodySt=tbody.scrollHeight;
tbody.style.height=tbodySt;
/* adjust the height for IE, this is not needed more Mozilla */
if(divSt >= table.scrollHeight)divSt=table.scrollHeight;
objDiv.style.height=divSt;
}
if(document.selection) document.selection.empty();
else if(window.getSelection)window.getSelection().removeAllRanges();
}
}
function MU(event) {
if(!event) event = window.event;
if(objTh){
if(document.selection) document.selection.empty();
else if(window.getSelection)window.getSelection().removeAllRanges();
objTh = null;
}
else if( objDiv ){
if(document.selection) document.selection.empty();
else if(window.getSelection)window.getSelection().removeAllRanges();
objDiv = null;
}
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
<SCRIPT type="text/javascript">
function createFindWindow(){
// FIXME: we need to do a mozilla implementation
//mozilla
if(window.find){
window.find();
}
// IE
else {
window.open( "find.html", "openload_find","status=yes,width=500,height=250" );
}
}
</script>
</HEAD>
<BODY>
<!--
YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
IT RETURNS .. ERROR..
-->
<H1>RESIZABLE TABLE COLUMN</H1>
<form>
<a href="javascript:createFindWindow()">Find</a>
<div class="scrollable" onmousemove="doTableResize(this,event)" onmouseover="doTableResize(this,event)" onmouseout="doneTableResizing()" >
<TABLE id="mytable" style="width:510px" class="sortable resizable tabular">
<THEAD>
<TR>
<TH onmousemove="doColumnResize(this,event)" onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:60px'>Index</TH>
<TH onmousemove="doColumnResize(this,event)" onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:170px'><span class="nowrap">Parameter Name</span></TH>
<TH onmousemove="doColumnResize(this,event)" onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:170px'><span class="nowrap">Parameter Value</span></TH>
<TH onmousemove="doColumnResize(this,event)" onmouseover="doColumnResize(this,event)" onmouseout='doneColumnResizing()' style='width:110px'><span class="nowrap">Page Name</span></TH>
<TH class="sorttable_nosort scrollbarCol"></TH>
</TR>
</THEAD>
<TBODY style="height:200px">
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>0</TD>
<TD>1_2</TD>
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
<TD>1_3</TD>
</TR>
<TR>
<TD>1</TD>
<TD><span class="nowrap">this is a very long paramter name</span></TD>
<TD>2_2</TD>
<TD>2_3</TD>
</TR>
<TR>
<TD>3_0</TD>
<TD>3_2</TD>
<TD><textarea>
this is a test of
this is a test of
</textarea></TD>
<TD>3_3</TD>
</TR>
<TR>
<TD>4_0</TD>
<TD>4_1</TD>
<TD>4_2</TD>
<TD>4_3</TD>
</TR>
</TBODY>
</table>
<!-- needed for mozilla to shrink the window -->
<script type="text/javascript">
if(window.navigator && window.navigator.userAgent.indexOf("ecko") != -1 ){
var tbody=document.getElementById('mytable').getElementsByTagName('tbody')[0];
if(tbody.scrollHeight<=parseInt(tbody.style.height)) tbody.style.height="auto";
}
</script>
</div>
</form>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Find/Replace</TITLE>
<script type="text/javascript">
<!--
var inputTags = null;
var found = false;
var currentInputIdx = 0;
var currentTextRange = null;
var currentSearchVal = null;
function initFind(){
inputTags = new Array();
var tags = opener.document.getElementsByTagName("input");
if(tags != null){
for(i = 0; i < tags.length;++i){
if(tags[i].type == "text"){
inputTags[inputTags.length] = tags[i];
}
}
}
tags = opener.document.getElementsByTagName("textarea");
if(tags != null){
for(i = 0; i < tags.length;++i){
inputTags[inputTags.length] = tags[i];
}
}
}
// returns a calculated value for matching case and
// matching whole words
function searchType(){
var retval = 0;
var matchcase = 0;
var matchword = 0;
if (document.forms[0]['blnMatchCase'].checked) matchcase = 4;
if (document.forms[0]['blnMatchWord'].checked) matchword = 2;
retval = matchcase + matchword;
return(retval);
}
function replaceText(){
// if no current tag then find one
if(currentTextRange == null) {
findText();
}
// if we have one then replace
else if(currentTextRange != null){
var beforeBookmark = currentTextRange.getBookmark();
var replaceStr = document.forms[0]['replaceStr'].value;
currentTextRange.text=replaceStr;
pushUndoNew(currentTextRange, beforeBookmark, currentSearchStr, replaceStr);
currentTextRange.collapse(false);
findText();
}
}
function replaceAllText(){
found = false;
if(currentTextRange == null) findText();
while(currentTextRange != null){
replaceText();
}
}
function findText(){
if(inputTags == null) initFind();
if (document.forms[0]['searchStr'].value.length < 1) {
alert("Please enter text in the \"Find what:\" field.");
return;
}
if(inputTags.length == 0){
alert("No input field(s) found on page");
return;
}
var searchVal = currentSearchStr = document.forms[0]['searchStr'].value;
var useRegex = document.forms[0]['blnRegex'].checked;
if( currentTextRange == null) {
currentTextRange = inputTags[currentInputIdx].createTextRange();
if(useRegex) currentText = currentTextRange.text;
}
else {
currentTextRange.collapse(false);
// get the remaining search range for regex
if(useRegex){
var rng = currentTextRange.duplicate();
rng.collapse(false);
rng.moveEnd("textedit");
currentText = rng.text;
}
}
var match = true;
if(useRegex){
try{
var matches = currentText.match(new RegExp(searchVal));
if(matches){
currentSearchStr = matches[0];
}
else {
match = false;
}
}
catch(e){
alert("Illegal Regex: '" + searchVal + "'");
return;
}
}
var type = searchType();
// found a match within the current text field
if( match && currentTextRange.findText(currentSearchStr, 10000, type)){
currentTextRange.select();
inputTags[currentInputIdx].scrollIntoView(false);
currentTextRange.scrollIntoView();
found = true;
}
// no match found and end of the document
else if( currentInputIdx >= inputTags.length-1 ){
currentTextRange = null;
currentInputIdx = 0;
if(found) alert("Done!");
else alert("Can not find '" +searchVal +"'");
found = false;
}
// no match found in the current text, look at the next text field
else{
currentTextRange = null;
++currentInputIdx;
findText();
}
}
// BEGIN UNDO BUFFER CODE
// buffer global variables
var undoStack = new Array();
// UndoState Object
function UndoState(textRange,searchStr,inputIdx,beforeBookmark, afterBookmark){
this.textRange = textRange;
this.searchStr = searchStr;
this.inputIdx = inputIdx;
/* two bookmarks are necessary to get back to the before and after state */
this.afterBookmark = afterBookmark;
this.beforeBookmark = beforeBookmark;
}
// store original search string and bookmarks of each replaced range
function pushUndoNew(rng, beforeBookmark,searchStr, replaceStr) {
currentTextRange.moveStart("character", -replaceStr.length);
undoStack[undoStack.length] = new UndoState( currentTextRange,searchStr,currentInputIdx,beforeBookmark,currentTextRange.getBookmark() );
}
// perform the undo
function undoReplace() {
if (undoStack.length) {
var newLength = undoStack.length-1;
currentTextRange = undoStack[newLength].textRange;
currentTextRange.moveToBookmark( undoStack[newLength].afterBookmark );
currentTextRange.text = undoStack[newLength].searchStr;
currentTextRange.moveToBookmark( undoStack[newLength].beforeBookmark );
// reselect the undo
currentTextRange.findText(undoStack[newLength].searchStr, 10000);
currentTextRange.select();
currentTextRange.scrollIntoView();
currentInputIdx = undoStack[newLength].inputIdx;
undoStack.length=newLength;
}
}
//-->
</script>
</HEAD>
<BODY bgcolor="#EAF4F3">
<FORM NAME="frmSearch" method="post" action="">
<table CELLSPACING="0" cellpadding="5" border="0">
<tr><td VALIGN="top" align="left" nowrap
style="font-family:Arial; font-size:11px;">
<label for="searchStr" accesskey="n"><u>F</u>ind what:</label><br>
<INPUT TYPE="TEXT" SIZE=40 NAME="searchStr"
id="searchStr" style="width:280px;"><br>
<label for="replaceStr" accesskey="n"><u>R</u>eplace with:</label><br>
<INPUT TYPE="TEXT" SIZE=40 NAME="replaceStr"
id="replaceStr" style="width:280px;"><br>
<INPUT TYPE="Checkbox" NAME="blnMatchCase" id="blnMatchCase">
<label for="blnMatchCase">Match case</label><br>
<INPUT TYPE="Checkbox" NAME="blnMatchWord" ID="blnMatchWord">
<label for="blnMatchWord">Match whole word only</label>
<INPUT TYPE="Checkbox" NAME="blnRegex" ID="blnRegex">
<label for="blnRegex">Use regular expression</label>
</td>
<td rowspan="2" valign="top">
<button name="btnFind" accesskey="f" onClick="findText();"
style="width:75px; height:22px; font-family:Tahoma;
font-size:11px; margin-top:15px"><u>F</u>ind Next</button><br>
<button name="btnReplace" accesskey="r" onClick="replaceText();"
style="width:75px; height:22px; font-family:Tahoma;
font-size:11px; margin-top:15px"><u>R</u>eplace</button>
<button name="btnReplaceAll" accesskey="a" onClick="replaceAllText();"
style="width:75px; height:22px; font-family:Tahoma;
font-size:11px; margin-top:15px">Replace <u>A</u>ll</button><br>
<button name="btnUndo" onClick="undoReplace();"
style="width:75px; height:22px; font-family:Tahoma;
font-size:11px; margin-top:15px">Undo</button><br>
<button name="btnCancel" onClick="window.close();"
style="width:75px; height:22px; font-family:Tahoma;
font-size:11px; margin-top:7px">Close</button><br>
</td></tr>
</table>
</FORM>
</BODY>
</HTML>
Comment