C
Craig
We are using a product that has come with some pre-installed pages
that build tables dynamically with JS. Trouble is that it puts the
table into a horrible scroll bar type page.
I want to do away with this and just have a nicely formatted table.
Trouble is I don't know which bit of the code i need to delete and
which to keep etc.
All i want it to control the format of the %report% data that gets
pulled through.
Here is the web page code.
----------------------------
<!doctype html public "-//IETF//DTD HTML//EN">
<html>
<!-- TEMPLATE FILE: %HTX_FULLPATHNAME% -->
<link rel="stylesheet" type="text/css"
href="/HYPWEB/_themes/syn_01/syn-TEXT.css">
<head>
<meta NAME="GENERATOR" CONTENT="Internet Assistant for Word 1.0Z">
<meta NAME="AUTHOR" CONTENT="Hyperion Software">
</head>
<body bgcolor="#FFFFCD" onkeydown="HandleKeyPress()">
<SCRIPT FOR="window" EVENT="onload" LANGUAGE="JScript">
<!--
document.body.scroll = "no";
document.close();
window.setTimeout ("Init()", 500);
// -->
</SCRIPT>
<script FOR="window" EVENT="onresize" LANGUAGE="JScript">
SetSizeChanged()
</script>
<script LANGUAGE="JScript">
<!--
// You can change these values
// If CellSpacing > 0, you will get gaps between shaded and underlined
columns
// If CellSpacing = 0, shading and underlining will be continuous
var CellPadding = 1;
var CellSpacing = 3;
var strTableBorder = "";
// Cell object
function _C (strText, iStyle)
{
this.text = strText;
this.style = iStyle;
}
// RowFormat object
function _RF (iVAlign, iSpaceBefore, iSpaceAfter)
{
this.VAlign = iVAlign;
this.SpaceBefore = iSpaceBefore;
this.SpaceAfter = iSpaceAfter;
}
// The report data and formatting will be inserted here as JScript
arrays
%REPORT%
// -->
</script>
<script LANGUAGE="JScript" SRC="/images/lhrie.js">
</script>
<div ID="ReportHeader">
%HEADER%
</div>
<div ID="LeftMargin" STYLE="position: absolute; float: left; width:
0">
<!-- Put items here which should appear to the left of the report
Change the width property accordingly -->
</div>
<div ID="RightMargin" STYLE="position: absolute; float: right; width:
0">
<!-- Put items here which should appear to the right of the report
Change the width property accordingly -->
</div>
<div ID="BottomMargin" STYLE="position: absolute; height: 0">
<!-- Put items here which should appear below the report
Change the height property accordingly -->
</div>
<div ID="ReportData" style="position: absolute; top: 0; left: 0">
</div>
<div id="vscroll"
onmouseup="if (bDragVThumb) EndVDrag(); bDragVThumb = false;"
onmousemove="if (bDragVThumb) DragVThumb();"
style="display: none; position: absolute; top: 0; left: 0; width:
16px; z-index: 5; background-color: #FFFFFF;">
<image src="/images/bar.gif" onmousedown="VScrollPage()"
width="16px" height="100%"
style="position: absolute">
<image ID="VThumb" src="/images/thumb.gif"
ondragstart="event.returnValue = false;"
onmousedown="StartVDrag()"
style="position: absolute; top: 17px; left: 0">
<input type="image" ID="UpBtn" src="/images/up.gif" name="Up"
onmousedown="ScrollUpRow (true)"
style="position: absolute; top: 0; left: 0" WIDTH="15" HEIGHT="15">
<input type="image" ID="DownBtn" src="/images/down.gif"
onmousedown="ScrollDownRow (true)"
style="position: absolute; top: 0; left: 0" WIDTH="15" HEIGHT="15">
</div>
<div id="hscroll"
onmouseup="if (bDragHThumb) EndHDrag(); bDragHThumb = false; "
onmousemove="if (bDragHThumb) DragHThumb();"
style="display: none; position: absolute; top: 0; left: 0; height:
16px; z-index: 4; background-color: #FFFFFF;">
<image src="/images/bar.gif" onmousedown="HScrollPage()"
width="100%" height="16px"
style="position: absolute">
<image ID="HThumb" src="/images/thumb.gif"
ondragstart="event.returnValue = false;"
onmousedown="StartHDrag()"
style="position: absolute; top: 0; left: 17px">
<input type="image" ID="LeftBtn" src="/images/left.gif"
onmousedown="ScrollLeftCol (true)"
style="position: absolute; left: 0" WIDTH="15" HEIGHT="15">
<input type="image" ID="RightBtn" src="/images/right.gif"
onmousedown="ScrollRightCol (true)"
style="position: absolute; left: 0;" WIDTH="15" HEIGHT="15">
</div>
<DIV ID="Sizer"
style="visibility: hidden; position: absolute; top: 0; left: 0;
width: 1; height: 1; z-index: 250; background-color: #FFFF00">
</DIV>
</body>
</html>
--------------
Here is the javascript code is uses to build the table and the scroll
bars.
--------------------------------
// JavaScript code for locked row/column headers (Internet Explorer
4.0)
// Don't change these
var FirstVisRow = 1;
var FirstVisCol = 1;
var NumVisRows = 1; // not including headings
var NumVisCols = 1; // not including headings
var nCurVisRows = 0;
var nCurVisCols = 0;
var iDataTop = 0;
var iDataLeft = 0;
var iDataHeight = 0;
var iDataWidth = 0;
var iDataBottom = 0;
var iDataRight = 0;
var iVThumbHeight = 17;
var iHThumbWidth = 17;
var iScrollBtnHeight = 17;
var iScrollBtnWidth = 17;
var bDragVThumb = false;
var bDragHThumb = false;
var iLastVDragPos = 0;
var iLastHDragPos = 0;
var iTopVDragPos = 0;
var iBottomVDragPos = 0;
var iLeftHDragPos = 0;
var iRightHDragPos = 0;
var iPixPerRow = 0;
var iPixPerCol = 0;
var bCtrlOn = false;
var bSizeChanged = false;
var bSizing = false;
// Constants
var iNone = 0;
var iVAlignTop = 1;
var iVAlignBottom = 2;
var iVAlignCenter = 3;
var astrVAlign = new Array("",
" VALIGN=\"top\"",
" VALIGN=\"bottom\"",
" VALIGN=\"center\"");
var aiRowHeights = new Array(NumRows + 1);
var aiRowHeightsWithSpace = new Array(NumRows + 1);
var aiColWidths = new Array(NumCols + 1);
function BuildRowHeader (iRow)
{
var strRow = "";
var RowFormat = aRowFormat[iRow];
var TrueNumCols = NumCols + 1;
var i;
if (RowFormat.SpaceBefore > 0 && TrueNumCols > 0)
{
strRow = "<TR><TD COLSPAN=" + TrueNumCols + "> ";
for (i = 1; i < RowFormat.SpaceBefore; i++)
strRow += "<BR> ";
strRow += "</TD></TR>";
}
strRow += "<TR " + astrVAlign[RowFormat.VAlign] + ">";
return strRow;
}
function BuildRowFooter (iRow)
{
var RowFormat = aRowFormat[iRow];
var TrueNumCols = NumCols + 1;
var i;
var strRow = "</TR>";
if (RowFormat.SpaceAfter > 0 && TrueNumCols > 0)
{
strRow += "<TR ><TD COLSPAN=" + TrueNumCols + "> ";
for (i = 1; i < RowFormat.SpaceAfter; i++)
strRow += "<BR> ";
strRow += "</TD></TR>";
}
return strRow;
}
function AddCommonHeaderCell (strRow, iRow, iCol, bUseWidth, iColSpan)
{
var Cell = aRowData[iRow][iCol];
strRow += "<TD NOWRAP COLSPAN=" + iColSpan + " NOWRAP ID=ReportCell
STYLE=\"" + astrStyles[Cell.style];
// if (bUseWidth)
// strRow += "\" WIDTH=" + aiColWidths[iCol] + " HEIGHT=" +
aiRowHeights[iRow] + ">";
// else
strRow += "\">";
strRow += Cell.text;
strRow += "</TD>";
return strRow;
}
function AddCell (strRow, iRow, iCol, bUseWidth)
{
var Cell = aRowData[iRow][iCol];
strRow += "<TD NOWRAP ID=ReportCell STYLE=\"" +
astrStyles[Cell.style];
if (bUseWidth)
strRow += "\" WIDTH=" + aiColWidths[iCol] + " HEIGHT=" +
aiRowHeights[iRow] + ">";
else
strRow += "\">";
strRow += Cell.text;
strRow += "</TD>";
return strRow;
}
function BuildTable (Div, bUseWidth)
{
var iRow, iCol;
var RowData;
var strTable, strRow;
// Determine how many rows/columns we can actually display
nCurVisRows = 0;
var iHeight = aiRowHeightsWithSpace[0];
for (iRow = FirstVisRow; iRow <= NumRows; iRow++)
{
iHeight += aiRowHeightsWithSpace[iRow];
nCurVisRows++;
if (iHeight >= iDataHeight)
break;
}
nCurVisCols = 0;
var iWidth = aiColWidths[0];
for (iCol = FirstVisCol; iCol <= NumCols; iCol++)
{
iWidth += aiColWidths[iCol] + CellSpacing;
nCurVisCols++;
if (iWidth >= iDataWidth)
break;
}
strTable = "";
// Build column headers
strRow = "<TABLE ID=ReportTbl CELLPADDING=" + CellPadding +
" CELLSPACING=" + CellSpacing + " " + strTableBorder + " >";
if(NumCenteredHdrLines == 0)
{
strRow += BuildRowHeader (0);
}
else
{
var iColSpan = 1;
var addThisColumn = 0;
var skipRow = 0;
for(iRow = 0; iRow < NumCenteredHdrLines; iRow++)
{
iColSpan = 1;
strRow += BuildRowHeader (iRow);
strRow = AddCommonHeaderCell(strRow, iRow, 0, bUseWidth, 1)
for (iCol = FirstVisCol; iCol < nCurVisCols + FirstVisCol - 1;
iCol++)
{
if(aRowData[iRow][iCol].text != aRowData[iRow][iCol+1].text)
{
strRow = AddCommonHeaderCell(strRow, iRow, iCol, bUseWidth,
iColSpan)
iColSpan = 1;
}
else
{
iColSpan++;
}
}
strRow = AddCommonHeaderCell(strRow,iRow, iCol, bUseWidth,
iColSpan)
strRow += BuildRowFooter (iRow);
}
strTable += strRow;
}
if(NumCenteredHdrLines == 0)
{
strRow = AddCell (strRow, 0, 0, bUseWidth);
for (iCol = 0; iCol < nCurVisCols; iCol++)
strRow = AddCell(strRow, 0, iCol + FirstVisCol, bUseWidth);
strTable += strRow;
strTable += BuildRowFooter (0);
iRow = 0;
}
else
{
iRow = NumCenteredHdrLines - 1;
}
// Build rows
for (; iRow < nCurVisRows; iRow++)
{
strRow = BuildRowHeader (iRow + FirstVisRow);
// Build row header
strRow = AddCell (strRow, iRow + FirstVisRow, 0, bUseWidth);
for (iCol = 0; iCol < nCurVisCols; iCol++)
strRow = AddCell (strRow, iRow + FirstVisRow, iCol + FirstVisCol,
bUseWidth);
strTable += strRow;
strTable += BuildRowFooter (iRow + FirstVisRow);
}
strTable += "</TABLE>"
Div.innerHTML = strTable;
}
function ScrollUpRow (bUpdateThumb)
{
if (FirstVisRow == 1)
return;
FirstVisRow--;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollDownRow (bUpdateThumb)
{
if (FirstVisRow + NumVisRows > NumRows)
return;
FirstVisRow++;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollLeftCol (bUpdateThumb)
{
if (FirstVisCol == 1)
return;
FirstVisCol--;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function ScrollRightCol (bUpdateThumb)
{
if (FirstVisCol + NumVisCols > NumCols)
return;
FirstVisCol++;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function VScrollHome()
{
if (FirstVisRow == 1)
return;
FirstVisRow = 1;
BuildTable (ReportData, true);
UpdateVThumbPos();
}
function VScrollEnd()
{
if (FirstVisRow + NumVisRows > NumRows)
return;
FirstVisRow = NumRows - NumVisRows + 1;
BuildTable (ReportData, true);
UpdateVThumbPos();
}
function HScrollHome()
{
if (FirstVisCol == 1)
return;
FirstVisCol = 1;
BuildTable (ReportData, true);
UpdateHThumbPos();
}
function HScrollEnd()
{
if (FirstVisCol + NumVisCols > NumCols)
return;
FirstVisCol = NumCols - NumVisCols + 1;
BuildTable (ReportData, true);
UpdateHThumbPos();
}
function ScrollUpPage (bUpdateThumb)
{
if (FirstVisRow == 1)
return;
FirstVisRow -= nCurVisRows - 1;
if (FirstVisRow < 1)
FirstVisRow = 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollDownPage (bUpdateThumb)
{
if (FirstVisRow + NumVisRows > NumRows)
return;
FirstVisRow += nCurVisRows - 1;
if (FirstVisRow + NumVisRows > NumRows + 1)
FirstVisRow = NumRows - NumVisRows + 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollLeftPage (bUpdateThumb)
{
if (FirstVisCol == 1)
return;
FirstVisCol -= nCurVisCols - 1;
if (FirstVisCol < 1)
FirstVisCol = 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function ScrollRightPage (bUpdateThumb)
{
if (FirstVisCol + NumVisCols > NumCols)
return;
FirstVisCol += nCurVisCols - 1;
if (FirstVisCol + NumVisCols > NumCols + 1)
FirstVisCol = NumCols - NumVisCols + 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function VScrollPage()
{
if (event.offsetY < VThumb.style.pixelTop)
ScrollUpPage (true);
else
ScrollDownPage (true);
}
function StartVDrag()
{
bDragVThumb = true;
iLastVDragPos = event.screenY;
iPixPerRow = (iDataHeight - iScrollBtnHeight*2 - iVThumbHeight) /
(NumRows - NumVisRows);
iTopVDragPos = iScrollBtnHeight;
iBottomVDragPos = iDataHeight - iScrollBtnHeight - iVThumbHeight;
}
function DragVThumb()
{
if (!bDragVThumb)
return;
if (event.button == 0 || NumRows == NumVisRows)
{
bDragVThumb = false;
return;
}
var iDiff = event.screenY - iLastVDragPos;
var iNewTop = VThumb.style.pixelTop + iDiff;
if (iNewTop < iTopVDragPos)
iNewTop = iTopVDragPos;
else if (iNewTop > iBottomVDragPos)
iNewTop = iBottomVDragPos;
VThumb.style.pixelTop = iNewTop;
var iNewFirstRow = Math.floor ((iNewTop - iScrollBtnHeight) /
iPixPerRow + 1);
if (iNewFirstRow < FirstVisRow)
ScrollUpRow (false);
else if (iNewFirstRow > FirstVisRow)
ScrollDownRow (false);
iLastVDragPos = event.screenY;
vscroll.style.cursor = "default";
}
function HScrollPage()
{
if (event.offsetX < HThumb.style.pixelLeft)
ScrollLeftPage (true);
else
ScrollRightPage (true);
}
function StartHDrag()
{
bDragHThumb = true;
iLastHDragPos = event.screenX;
iPixPerCol = (iDataWidth - iScrollBtnWidth*2 - iHThumbWidth) /
(NumCols - NumVisCols);
iLeftHDragPos = iScrollBtnWidth;
iRightHDragPos = iDataWidth - iScrollBtnWidth - iHThumbWidth;
}
function DragHThumb()
{
if (!bDragHThumb)
return;
if (event.button == 0 || NumCols == NumVisCols)
{
bDragHThumb = false;
return;
}
var iDiff = event.screenX - iLastHDragPos;
var iNewLeft = HThumb.style.pixelLeft + iDiff;
if (iNewLeft < iLeftHDragPos)
iNewLeft = iLeftHDragPos;
else if (iNewLeft > iRightHDragPos)
iNewLeft = iRightHDragPos;
HThumb.style.pixelLeft = iNewLeft;
var iNewFirstCol = Math.floor ((iNewLeft - iScrollBtnWidth) /
iPixPerCol + 1);
if (iNewFirstCol < FirstVisCol)
ScrollLeftCol (false);
else if (iNewFirstCol > FirstVisCol)
ScrollRightCol (false);
iLastHDragPos = event.screenX;
hscroll.style.cursor = "default";
}
function HandleKeyPress()
{
var bHandled = true;
var iKey = window.event.keyCode;
var bCtrlOn = window.event.ctrlKey;
if (iKey == 37)
{
if (bCtrlOn)
HScrollHome();
else
ScrollLeftCol (true);
}
else if (iKey == 38)
{
if (bCtrlOn)
VScrollHome();
else
ScrollUpRow (true);
}
else if (iKey == 39)
{
if (bCtrlOn)
HScrollEnd();
else
ScrollRightCol (true);
}
else if (iKey == 40)
{
if (bCtrlOn)
VScrollEnd();
else
ScrollDownRow (true);
}
else if (iKey == 33)
{
if (bCtrlOn)
ScrollLeftPage (true);
else
ScrollUpPage (true);
}
else if (iKey == 34)
{
if (bCtrlOn)
ScrollRightPage (true);
else
ScrollDownPage (true);
}
else
bHandled = false;
if (bHandled)
{
iKey = 0;
event.returnValue=false;
}
return (iKey);
}
function SetSizeChanged()
{
bSizeChanged = true;
}
function CheckSizeChanged()
{
if (bSizeChanged && !bSizing)
{
bSizing = true;
bSizeChanged = false;
SetSize (ReportData);
BuildTable (ReportData, true);
bSizing = false;
}
}
function CalcRowHeights()
{
var iRow, iCol;
FirstVisRow = 1;
FirstVisCol = 1;
NumVisRows = NumRows;
NumVisCols = NumCols;
BuildTable (Sizer, false);
var iFullRow = -1;
var iTblRow = 0;
var TrueNumCols = NumCols + 1;
for (iRow = 0; iRow <= NumRows; iRow++)
{
var RowFormat = aRowFormat[iRow];
var nSubRows = 1;
var iRealRow = 0;
if (RowFormat.SpaceBefore > 0 && TrueNumCols > 0)
{
nSubRows++;
iRealRow++;
}
if (RowFormat.SpaceAfter > 0 && TrueNumCols > 0)
nSubRows++;
var iHeightWithSpace = 0;
var iSubRow;
for (iSubRow = 0; iSubRow < nSubRows; iSubRow++)
{
var Cells = Sizer.children(0).rows(iTblRow).cells;
if (iFullRow == -1 && Cells.length == NumCols + 1)
{
iFullRow = iTblRow;
}
var iCellHeight = Cells(0).offsetHeight;
iHeightWithSpace += iCellHeight + CellSpacing;
if (iSubRow == iRealRow)
aiRowHeights[iRow] = iCellHeight;
iTblRow++;
}
aiRowHeightsWithSpace[iRow] = iHeightWithSpace;
}
for (iCol = 0; iCol <= NumCols; iCol++)
{
var iWidth = Sizer.children(0).rows(iFullRow).cells(iCol).offsetWidth;
aiColWidths[iCol] = iWidth;
}
}
function SetSize (Div)
{
FirstVisRow = 1;
FirstVisCol = 1;
LeftMargin.style.pixelLeft = 0;
iDataRight = document.body.clientWidth -
RightMargin.style.pixelWidth;
RightMargin.style.pixelLeft = iDataRight;
iDataBottom = document.body.clientHeight -
BottomMargin.style.pixelHeight;
BottomMargin.style.pixelTop = iDataBottom;
iDataTop = ReportHeader.offsetHeight + ReportHeader.offsetTop;
iDataLeft = LeftMargin.offsetLeft + LeftMargin.offsetWidth;
var bMaxWidth = false;
var bMaxHeight = false;
NumVisRows = 1;
NumVisCols = 1;
var iMaxWidth = iDataRight - iDataLeft - iScrollBtnWidth;
var iMaxHeight = iDataBottom - iDataTop - iScrollBtnHeight;
var iMinWidth = aiColWidths[0] + aiColWidths[NumCols] +
CellSpacing*3;
var iMinHeight = aiRowHeightsWithSpace[0] +
aiRowHeightsWithSpace[NumRows] + CellSpacing;
var iWidth = iMinWidth;
var iHeight = iMinHeight;
// Just count rows/cols on the last page
while (!bMaxWidth || !bMaxHeight)
{
if (iWidth > iMaxWidth)
{
bMaxWidth = true;
iWidth = iMaxWidth;
NumVisCols--;
if (NumVisCols < 1)
{
NumVisCols = 1;
iWidth = iMinWidth;
}
}
else if (NumVisCols >= NumCols || iWidth == iMaxWidth)
bMaxWidth = true;
else if (!bMaxWidth && iWidth < iMaxWidth)
{
iWidth += aiColWidths[NumCols - NumVisCols] + CellSpacing;
NumVisCols++;
}
if (iHeight > iMaxHeight)
{
bMaxHeight = true;
iHeight = iMaxHeight;
NumVisRows--;
if (NumVisRows < 1)
{
NumVisRows = 1;
iHeight = iMinHeight;
}
}
else if (NumVisRows >= NumRows || iHeight == iMaxHeight)
bMaxHeight = true;
else if (!bMaxHeight && iHeight < iMaxHeight)
{
iHeight += aiRowHeightsWithSpace[NumRows - NumVisRows];
NumVisRows++;
}
}
iDataLeft += (iMaxWidth - iWidth) / 2;
iDataHeight = iHeight;
iDataWidth = iWidth;
ReportData.style.pixelTop = iDataTop;
ReportData.style.pixelLeft = iDataLeft;
ReportData.style.pixelHeight = iDataHeight;
ReportData.style.pixelWidth = iDataWidth;
ReportData.style.overflow = "hidden";
PositionScrollBars();
}
function PositionScrollBars()
{
if (NumRows == NumVisRows)
vscroll.style.display = "none";
else
{
vscroll.style.display = "block";
var iScrollLeft = iDataLeft + iDataWidth;
vscroll.style.pixelTop = iDataTop;
vscroll.style.pixelLeft = iScrollLeft;
vscroll.style.pixelHeight = iDataHeight;
vscroll.style.pixelWidth = iScrollBtnWidth;
UpBtn.style.pixelTop = 0;
UpBtn.style.pixelLeft = 0;
DownBtn.style.pixelTop = iDataHeight - iScrollBtnHeight;
DownBtn.style.pixelLeft = 0;
VThumb.style.pixelLeft = 0;
UpdateVThumbPos();
}
if (NumCols == NumVisCols)
hscroll.style.display = "none";
else
{
hscroll.style.display = "block";
var iScrollTop = iDataTop + iDataHeight;
hscroll.style.pixelTop = iScrollTop;
hscroll.style.pixelLeft = iDataLeft;
hscroll.style.pixelHeight = iScrollBtnHeight;
hscroll.style.pixelWidth = iDataWidth;
LeftBtn.style.pixelTop = 0;
LeftBtn.style.pixelLeft = 0;
RightBtn.style.pixelTop = 0;
RightBtn.style.pixelLeft = iDataWidth - iScrollBtnWidth;
HThumb.style.pixelTop = 0;
UpdateHThumbPos();
}
}
function UpdateVThumbPos()
{
if (NumRows == NumVisRows)
return;
VThumb.style.pixelTop = (FirstVisRow - 1) * (iDataHeight -
iScrollBtnHeight*2 - iVThumbHeight) / (NumRows - NumVisRows) +
iScrollBtnHeight;
}
function UpdateHThumbPos()
{
if (NumCols == NumVisCols)
return;
HThumb.style.pixelLeft = (FirstVisCol - 1) * (iDataWidth -
iScrollBtnWidth*2 - iHThumbWidth) / (NumCols - NumVisCols) +
iScrollBtnWidth;
}
function Init()
{
CalcRowHeights();
SetSize (ReportData)
BuildTable (ReportData, true);
window.setInterval ("CheckSizeChanged()", 1000);
}
// End script
that build tables dynamically with JS. Trouble is that it puts the
table into a horrible scroll bar type page.
I want to do away with this and just have a nicely formatted table.
Trouble is I don't know which bit of the code i need to delete and
which to keep etc.
All i want it to control the format of the %report% data that gets
pulled through.
Here is the web page code.
----------------------------
<!doctype html public "-//IETF//DTD HTML//EN">
<html>
<!-- TEMPLATE FILE: %HTX_FULLPATHNAME% -->
<link rel="stylesheet" type="text/css"
href="/HYPWEB/_themes/syn_01/syn-TEXT.css">
<head>
<meta NAME="GENERATOR" CONTENT="Internet Assistant for Word 1.0Z">
<meta NAME="AUTHOR" CONTENT="Hyperion Software">
</head>
<body bgcolor="#FFFFCD" onkeydown="HandleKeyPress()">
<SCRIPT FOR="window" EVENT="onload" LANGUAGE="JScript">
<!--
document.body.scroll = "no";
document.close();
window.setTimeout ("Init()", 500);
// -->
</SCRIPT>
<script FOR="window" EVENT="onresize" LANGUAGE="JScript">
SetSizeChanged()
</script>
<script LANGUAGE="JScript">
<!--
// You can change these values
// If CellSpacing > 0, you will get gaps between shaded and underlined
columns
// If CellSpacing = 0, shading and underlining will be continuous
var CellPadding = 1;
var CellSpacing = 3;
var strTableBorder = "";
// Cell object
function _C (strText, iStyle)
{
this.text = strText;
this.style = iStyle;
}
// RowFormat object
function _RF (iVAlign, iSpaceBefore, iSpaceAfter)
{
this.VAlign = iVAlign;
this.SpaceBefore = iSpaceBefore;
this.SpaceAfter = iSpaceAfter;
}
// The report data and formatting will be inserted here as JScript
arrays
%REPORT%
// -->
</script>
<script LANGUAGE="JScript" SRC="/images/lhrie.js">
</script>
<div ID="ReportHeader">
%HEADER%
</div>
<div ID="LeftMargin" STYLE="position: absolute; float: left; width:
0">
<!-- Put items here which should appear to the left of the report
Change the width property accordingly -->
</div>
<div ID="RightMargin" STYLE="position: absolute; float: right; width:
0">
<!-- Put items here which should appear to the right of the report
Change the width property accordingly -->
</div>
<div ID="BottomMargin" STYLE="position: absolute; height: 0">
<!-- Put items here which should appear below the report
Change the height property accordingly -->
</div>
<div ID="ReportData" style="position: absolute; top: 0; left: 0">
</div>
<div id="vscroll"
onmouseup="if (bDragVThumb) EndVDrag(); bDragVThumb = false;"
onmousemove="if (bDragVThumb) DragVThumb();"
style="display: none; position: absolute; top: 0; left: 0; width:
16px; z-index: 5; background-color: #FFFFFF;">
<image src="/images/bar.gif" onmousedown="VScrollPage()"
width="16px" height="100%"
style="position: absolute">
<image ID="VThumb" src="/images/thumb.gif"
ondragstart="event.returnValue = false;"
onmousedown="StartVDrag()"
style="position: absolute; top: 17px; left: 0">
<input type="image" ID="UpBtn" src="/images/up.gif" name="Up"
onmousedown="ScrollUpRow (true)"
style="position: absolute; top: 0; left: 0" WIDTH="15" HEIGHT="15">
<input type="image" ID="DownBtn" src="/images/down.gif"
onmousedown="ScrollDownRow (true)"
style="position: absolute; top: 0; left: 0" WIDTH="15" HEIGHT="15">
</div>
<div id="hscroll"
onmouseup="if (bDragHThumb) EndHDrag(); bDragHThumb = false; "
onmousemove="if (bDragHThumb) DragHThumb();"
style="display: none; position: absolute; top: 0; left: 0; height:
16px; z-index: 4; background-color: #FFFFFF;">
<image src="/images/bar.gif" onmousedown="HScrollPage()"
width="100%" height="16px"
style="position: absolute">
<image ID="HThumb" src="/images/thumb.gif"
ondragstart="event.returnValue = false;"
onmousedown="StartHDrag()"
style="position: absolute; top: 0; left: 17px">
<input type="image" ID="LeftBtn" src="/images/left.gif"
onmousedown="ScrollLeftCol (true)"
style="position: absolute; left: 0" WIDTH="15" HEIGHT="15">
<input type="image" ID="RightBtn" src="/images/right.gif"
onmousedown="ScrollRightCol (true)"
style="position: absolute; left: 0;" WIDTH="15" HEIGHT="15">
</div>
<DIV ID="Sizer"
style="visibility: hidden; position: absolute; top: 0; left: 0;
width: 1; height: 1; z-index: 250; background-color: #FFFF00">
</DIV>
</body>
</html>
--------------
Here is the javascript code is uses to build the table and the scroll
bars.
--------------------------------
// JavaScript code for locked row/column headers (Internet Explorer
4.0)
// Don't change these
var FirstVisRow = 1;
var FirstVisCol = 1;
var NumVisRows = 1; // not including headings
var NumVisCols = 1; // not including headings
var nCurVisRows = 0;
var nCurVisCols = 0;
var iDataTop = 0;
var iDataLeft = 0;
var iDataHeight = 0;
var iDataWidth = 0;
var iDataBottom = 0;
var iDataRight = 0;
var iVThumbHeight = 17;
var iHThumbWidth = 17;
var iScrollBtnHeight = 17;
var iScrollBtnWidth = 17;
var bDragVThumb = false;
var bDragHThumb = false;
var iLastVDragPos = 0;
var iLastHDragPos = 0;
var iTopVDragPos = 0;
var iBottomVDragPos = 0;
var iLeftHDragPos = 0;
var iRightHDragPos = 0;
var iPixPerRow = 0;
var iPixPerCol = 0;
var bCtrlOn = false;
var bSizeChanged = false;
var bSizing = false;
// Constants
var iNone = 0;
var iVAlignTop = 1;
var iVAlignBottom = 2;
var iVAlignCenter = 3;
var astrVAlign = new Array("",
" VALIGN=\"top\"",
" VALIGN=\"bottom\"",
" VALIGN=\"center\"");
var aiRowHeights = new Array(NumRows + 1);
var aiRowHeightsWithSpace = new Array(NumRows + 1);
var aiColWidths = new Array(NumCols + 1);
function BuildRowHeader (iRow)
{
var strRow = "";
var RowFormat = aRowFormat[iRow];
var TrueNumCols = NumCols + 1;
var i;
if (RowFormat.SpaceBefore > 0 && TrueNumCols > 0)
{
strRow = "<TR><TD COLSPAN=" + TrueNumCols + "> ";
for (i = 1; i < RowFormat.SpaceBefore; i++)
strRow += "<BR> ";
strRow += "</TD></TR>";
}
strRow += "<TR " + astrVAlign[RowFormat.VAlign] + ">";
return strRow;
}
function BuildRowFooter (iRow)
{
var RowFormat = aRowFormat[iRow];
var TrueNumCols = NumCols + 1;
var i;
var strRow = "</TR>";
if (RowFormat.SpaceAfter > 0 && TrueNumCols > 0)
{
strRow += "<TR ><TD COLSPAN=" + TrueNumCols + "> ";
for (i = 1; i < RowFormat.SpaceAfter; i++)
strRow += "<BR> ";
strRow += "</TD></TR>";
}
return strRow;
}
function AddCommonHeaderCell (strRow, iRow, iCol, bUseWidth, iColSpan)
{
var Cell = aRowData[iRow][iCol];
strRow += "<TD NOWRAP COLSPAN=" + iColSpan + " NOWRAP ID=ReportCell
STYLE=\"" + astrStyles[Cell.style];
// if (bUseWidth)
// strRow += "\" WIDTH=" + aiColWidths[iCol] + " HEIGHT=" +
aiRowHeights[iRow] + ">";
// else
strRow += "\">";
strRow += Cell.text;
strRow += "</TD>";
return strRow;
}
function AddCell (strRow, iRow, iCol, bUseWidth)
{
var Cell = aRowData[iRow][iCol];
strRow += "<TD NOWRAP ID=ReportCell STYLE=\"" +
astrStyles[Cell.style];
if (bUseWidth)
strRow += "\" WIDTH=" + aiColWidths[iCol] + " HEIGHT=" +
aiRowHeights[iRow] + ">";
else
strRow += "\">";
strRow += Cell.text;
strRow += "</TD>";
return strRow;
}
function BuildTable (Div, bUseWidth)
{
var iRow, iCol;
var RowData;
var strTable, strRow;
// Determine how many rows/columns we can actually display
nCurVisRows = 0;
var iHeight = aiRowHeightsWithSpace[0];
for (iRow = FirstVisRow; iRow <= NumRows; iRow++)
{
iHeight += aiRowHeightsWithSpace[iRow];
nCurVisRows++;
if (iHeight >= iDataHeight)
break;
}
nCurVisCols = 0;
var iWidth = aiColWidths[0];
for (iCol = FirstVisCol; iCol <= NumCols; iCol++)
{
iWidth += aiColWidths[iCol] + CellSpacing;
nCurVisCols++;
if (iWidth >= iDataWidth)
break;
}
strTable = "";
// Build column headers
strRow = "<TABLE ID=ReportTbl CELLPADDING=" + CellPadding +
" CELLSPACING=" + CellSpacing + " " + strTableBorder + " >";
if(NumCenteredHdrLines == 0)
{
strRow += BuildRowHeader (0);
}
else
{
var iColSpan = 1;
var addThisColumn = 0;
var skipRow = 0;
for(iRow = 0; iRow < NumCenteredHdrLines; iRow++)
{
iColSpan = 1;
strRow += BuildRowHeader (iRow);
strRow = AddCommonHeaderCell(strRow, iRow, 0, bUseWidth, 1)
for (iCol = FirstVisCol; iCol < nCurVisCols + FirstVisCol - 1;
iCol++)
{
if(aRowData[iRow][iCol].text != aRowData[iRow][iCol+1].text)
{
strRow = AddCommonHeaderCell(strRow, iRow, iCol, bUseWidth,
iColSpan)
iColSpan = 1;
}
else
{
iColSpan++;
}
}
strRow = AddCommonHeaderCell(strRow,iRow, iCol, bUseWidth,
iColSpan)
strRow += BuildRowFooter (iRow);
}
strTable += strRow;
}
if(NumCenteredHdrLines == 0)
{
strRow = AddCell (strRow, 0, 0, bUseWidth);
for (iCol = 0; iCol < nCurVisCols; iCol++)
strRow = AddCell(strRow, 0, iCol + FirstVisCol, bUseWidth);
strTable += strRow;
strTable += BuildRowFooter (0);
iRow = 0;
}
else
{
iRow = NumCenteredHdrLines - 1;
}
// Build rows
for (; iRow < nCurVisRows; iRow++)
{
strRow = BuildRowHeader (iRow + FirstVisRow);
// Build row header
strRow = AddCell (strRow, iRow + FirstVisRow, 0, bUseWidth);
for (iCol = 0; iCol < nCurVisCols; iCol++)
strRow = AddCell (strRow, iRow + FirstVisRow, iCol + FirstVisCol,
bUseWidth);
strTable += strRow;
strTable += BuildRowFooter (iRow + FirstVisRow);
}
strTable += "</TABLE>"
Div.innerHTML = strTable;
}
function ScrollUpRow (bUpdateThumb)
{
if (FirstVisRow == 1)
return;
FirstVisRow--;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollDownRow (bUpdateThumb)
{
if (FirstVisRow + NumVisRows > NumRows)
return;
FirstVisRow++;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollLeftCol (bUpdateThumb)
{
if (FirstVisCol == 1)
return;
FirstVisCol--;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function ScrollRightCol (bUpdateThumb)
{
if (FirstVisCol + NumVisCols > NumCols)
return;
FirstVisCol++;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function VScrollHome()
{
if (FirstVisRow == 1)
return;
FirstVisRow = 1;
BuildTable (ReportData, true);
UpdateVThumbPos();
}
function VScrollEnd()
{
if (FirstVisRow + NumVisRows > NumRows)
return;
FirstVisRow = NumRows - NumVisRows + 1;
BuildTable (ReportData, true);
UpdateVThumbPos();
}
function HScrollHome()
{
if (FirstVisCol == 1)
return;
FirstVisCol = 1;
BuildTable (ReportData, true);
UpdateHThumbPos();
}
function HScrollEnd()
{
if (FirstVisCol + NumVisCols > NumCols)
return;
FirstVisCol = NumCols - NumVisCols + 1;
BuildTable (ReportData, true);
UpdateHThumbPos();
}
function ScrollUpPage (bUpdateThumb)
{
if (FirstVisRow == 1)
return;
FirstVisRow -= nCurVisRows - 1;
if (FirstVisRow < 1)
FirstVisRow = 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollDownPage (bUpdateThumb)
{
if (FirstVisRow + NumVisRows > NumRows)
return;
FirstVisRow += nCurVisRows - 1;
if (FirstVisRow + NumVisRows > NumRows + 1)
FirstVisRow = NumRows - NumVisRows + 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateVThumbPos();
}
function ScrollLeftPage (bUpdateThumb)
{
if (FirstVisCol == 1)
return;
FirstVisCol -= nCurVisCols - 1;
if (FirstVisCol < 1)
FirstVisCol = 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function ScrollRightPage (bUpdateThumb)
{
if (FirstVisCol + NumVisCols > NumCols)
return;
FirstVisCol += nCurVisCols - 1;
if (FirstVisCol + NumVisCols > NumCols + 1)
FirstVisCol = NumCols - NumVisCols + 1;
BuildTable (ReportData, true);
if (bUpdateThumb)
UpdateHThumbPos();
}
function VScrollPage()
{
if (event.offsetY < VThumb.style.pixelTop)
ScrollUpPage (true);
else
ScrollDownPage (true);
}
function StartVDrag()
{
bDragVThumb = true;
iLastVDragPos = event.screenY;
iPixPerRow = (iDataHeight - iScrollBtnHeight*2 - iVThumbHeight) /
(NumRows - NumVisRows);
iTopVDragPos = iScrollBtnHeight;
iBottomVDragPos = iDataHeight - iScrollBtnHeight - iVThumbHeight;
}
function DragVThumb()
{
if (!bDragVThumb)
return;
if (event.button == 0 || NumRows == NumVisRows)
{
bDragVThumb = false;
return;
}
var iDiff = event.screenY - iLastVDragPos;
var iNewTop = VThumb.style.pixelTop + iDiff;
if (iNewTop < iTopVDragPos)
iNewTop = iTopVDragPos;
else if (iNewTop > iBottomVDragPos)
iNewTop = iBottomVDragPos;
VThumb.style.pixelTop = iNewTop;
var iNewFirstRow = Math.floor ((iNewTop - iScrollBtnHeight) /
iPixPerRow + 1);
if (iNewFirstRow < FirstVisRow)
ScrollUpRow (false);
else if (iNewFirstRow > FirstVisRow)
ScrollDownRow (false);
iLastVDragPos = event.screenY;
vscroll.style.cursor = "default";
}
function HScrollPage()
{
if (event.offsetX < HThumb.style.pixelLeft)
ScrollLeftPage (true);
else
ScrollRightPage (true);
}
function StartHDrag()
{
bDragHThumb = true;
iLastHDragPos = event.screenX;
iPixPerCol = (iDataWidth - iScrollBtnWidth*2 - iHThumbWidth) /
(NumCols - NumVisCols);
iLeftHDragPos = iScrollBtnWidth;
iRightHDragPos = iDataWidth - iScrollBtnWidth - iHThumbWidth;
}
function DragHThumb()
{
if (!bDragHThumb)
return;
if (event.button == 0 || NumCols == NumVisCols)
{
bDragHThumb = false;
return;
}
var iDiff = event.screenX - iLastHDragPos;
var iNewLeft = HThumb.style.pixelLeft + iDiff;
if (iNewLeft < iLeftHDragPos)
iNewLeft = iLeftHDragPos;
else if (iNewLeft > iRightHDragPos)
iNewLeft = iRightHDragPos;
HThumb.style.pixelLeft = iNewLeft;
var iNewFirstCol = Math.floor ((iNewLeft - iScrollBtnWidth) /
iPixPerCol + 1);
if (iNewFirstCol < FirstVisCol)
ScrollLeftCol (false);
else if (iNewFirstCol > FirstVisCol)
ScrollRightCol (false);
iLastHDragPos = event.screenX;
hscroll.style.cursor = "default";
}
function HandleKeyPress()
{
var bHandled = true;
var iKey = window.event.keyCode;
var bCtrlOn = window.event.ctrlKey;
if (iKey == 37)
{
if (bCtrlOn)
HScrollHome();
else
ScrollLeftCol (true);
}
else if (iKey == 38)
{
if (bCtrlOn)
VScrollHome();
else
ScrollUpRow (true);
}
else if (iKey == 39)
{
if (bCtrlOn)
HScrollEnd();
else
ScrollRightCol (true);
}
else if (iKey == 40)
{
if (bCtrlOn)
VScrollEnd();
else
ScrollDownRow (true);
}
else if (iKey == 33)
{
if (bCtrlOn)
ScrollLeftPage (true);
else
ScrollUpPage (true);
}
else if (iKey == 34)
{
if (bCtrlOn)
ScrollRightPage (true);
else
ScrollDownPage (true);
}
else
bHandled = false;
if (bHandled)
{
iKey = 0;
event.returnValue=false;
}
return (iKey);
}
function SetSizeChanged()
{
bSizeChanged = true;
}
function CheckSizeChanged()
{
if (bSizeChanged && !bSizing)
{
bSizing = true;
bSizeChanged = false;
SetSize (ReportData);
BuildTable (ReportData, true);
bSizing = false;
}
}
function CalcRowHeights()
{
var iRow, iCol;
FirstVisRow = 1;
FirstVisCol = 1;
NumVisRows = NumRows;
NumVisCols = NumCols;
BuildTable (Sizer, false);
var iFullRow = -1;
var iTblRow = 0;
var TrueNumCols = NumCols + 1;
for (iRow = 0; iRow <= NumRows; iRow++)
{
var RowFormat = aRowFormat[iRow];
var nSubRows = 1;
var iRealRow = 0;
if (RowFormat.SpaceBefore > 0 && TrueNumCols > 0)
{
nSubRows++;
iRealRow++;
}
if (RowFormat.SpaceAfter > 0 && TrueNumCols > 0)
nSubRows++;
var iHeightWithSpace = 0;
var iSubRow;
for (iSubRow = 0; iSubRow < nSubRows; iSubRow++)
{
var Cells = Sizer.children(0).rows(iTblRow).cells;
if (iFullRow == -1 && Cells.length == NumCols + 1)
{
iFullRow = iTblRow;
}
var iCellHeight = Cells(0).offsetHeight;
iHeightWithSpace += iCellHeight + CellSpacing;
if (iSubRow == iRealRow)
aiRowHeights[iRow] = iCellHeight;
iTblRow++;
}
aiRowHeightsWithSpace[iRow] = iHeightWithSpace;
}
for (iCol = 0; iCol <= NumCols; iCol++)
{
var iWidth = Sizer.children(0).rows(iFullRow).cells(iCol).offsetWidth;
aiColWidths[iCol] = iWidth;
}
}
function SetSize (Div)
{
FirstVisRow = 1;
FirstVisCol = 1;
LeftMargin.style.pixelLeft = 0;
iDataRight = document.body.clientWidth -
RightMargin.style.pixelWidth;
RightMargin.style.pixelLeft = iDataRight;
iDataBottom = document.body.clientHeight -
BottomMargin.style.pixelHeight;
BottomMargin.style.pixelTop = iDataBottom;
iDataTop = ReportHeader.offsetHeight + ReportHeader.offsetTop;
iDataLeft = LeftMargin.offsetLeft + LeftMargin.offsetWidth;
var bMaxWidth = false;
var bMaxHeight = false;
NumVisRows = 1;
NumVisCols = 1;
var iMaxWidth = iDataRight - iDataLeft - iScrollBtnWidth;
var iMaxHeight = iDataBottom - iDataTop - iScrollBtnHeight;
var iMinWidth = aiColWidths[0] + aiColWidths[NumCols] +
CellSpacing*3;
var iMinHeight = aiRowHeightsWithSpace[0] +
aiRowHeightsWithSpace[NumRows] + CellSpacing;
var iWidth = iMinWidth;
var iHeight = iMinHeight;
// Just count rows/cols on the last page
while (!bMaxWidth || !bMaxHeight)
{
if (iWidth > iMaxWidth)
{
bMaxWidth = true;
iWidth = iMaxWidth;
NumVisCols--;
if (NumVisCols < 1)
{
NumVisCols = 1;
iWidth = iMinWidth;
}
}
else if (NumVisCols >= NumCols || iWidth == iMaxWidth)
bMaxWidth = true;
else if (!bMaxWidth && iWidth < iMaxWidth)
{
iWidth += aiColWidths[NumCols - NumVisCols] + CellSpacing;
NumVisCols++;
}
if (iHeight > iMaxHeight)
{
bMaxHeight = true;
iHeight = iMaxHeight;
NumVisRows--;
if (NumVisRows < 1)
{
NumVisRows = 1;
iHeight = iMinHeight;
}
}
else if (NumVisRows >= NumRows || iHeight == iMaxHeight)
bMaxHeight = true;
else if (!bMaxHeight && iHeight < iMaxHeight)
{
iHeight += aiRowHeightsWithSpace[NumRows - NumVisRows];
NumVisRows++;
}
}
iDataLeft += (iMaxWidth - iWidth) / 2;
iDataHeight = iHeight;
iDataWidth = iWidth;
ReportData.style.pixelTop = iDataTop;
ReportData.style.pixelLeft = iDataLeft;
ReportData.style.pixelHeight = iDataHeight;
ReportData.style.pixelWidth = iDataWidth;
ReportData.style.overflow = "hidden";
PositionScrollBars();
}
function PositionScrollBars()
{
if (NumRows == NumVisRows)
vscroll.style.display = "none";
else
{
vscroll.style.display = "block";
var iScrollLeft = iDataLeft + iDataWidth;
vscroll.style.pixelTop = iDataTop;
vscroll.style.pixelLeft = iScrollLeft;
vscroll.style.pixelHeight = iDataHeight;
vscroll.style.pixelWidth = iScrollBtnWidth;
UpBtn.style.pixelTop = 0;
UpBtn.style.pixelLeft = 0;
DownBtn.style.pixelTop = iDataHeight - iScrollBtnHeight;
DownBtn.style.pixelLeft = 0;
VThumb.style.pixelLeft = 0;
UpdateVThumbPos();
}
if (NumCols == NumVisCols)
hscroll.style.display = "none";
else
{
hscroll.style.display = "block";
var iScrollTop = iDataTop + iDataHeight;
hscroll.style.pixelTop = iScrollTop;
hscroll.style.pixelLeft = iDataLeft;
hscroll.style.pixelHeight = iScrollBtnHeight;
hscroll.style.pixelWidth = iDataWidth;
LeftBtn.style.pixelTop = 0;
LeftBtn.style.pixelLeft = 0;
RightBtn.style.pixelTop = 0;
RightBtn.style.pixelLeft = iDataWidth - iScrollBtnWidth;
HThumb.style.pixelTop = 0;
UpdateHThumbPos();
}
}
function UpdateVThumbPos()
{
if (NumRows == NumVisRows)
return;
VThumb.style.pixelTop = (FirstVisRow - 1) * (iDataHeight -
iScrollBtnHeight*2 - iVThumbHeight) / (NumRows - NumVisRows) +
iScrollBtnHeight;
}
function UpdateHThumbPos()
{
if (NumCols == NumVisCols)
return;
HThumb.style.pixelLeft = (FirstVisCol - 1) * (iDataWidth -
iScrollBtnWidth*2 - iHThumbWidth) / (NumCols - NumVisCols) +
iScrollBtnWidth;
}
function Init()
{
CalcRowHeights();
SetSize (ReportData)
BuildTable (ReportData, true);
window.setInterval ("CheckSizeChanged()", 1000);
}
// End script