[XSL-LIST Mailing List Archive Home] [By Thread] [By Date]

[xsl] FYI:RFC>>> Scroll Table Body Separate From Table Headers ( it works ) Try it Out


Subject: [xsl] FYI:RFC>>> Scroll Table Body Separate From Table Headers ( it works ) Try it Out
From: "Bovy, Stephen J" <STEPHEN.Bovy@xxxxxx>
Date: Sat, 28 May 2005 14:15:38 -0400

It took me about 2.5 weeks to develop this.
I have only tested it with IE-6.x although I have tried to make it
platform neutral

If anyone cares to test or comment , I would appreciate any additional
insight !!!

<?xml version="1.0" ?>

<?xml-stylesheet type="text/xsl"
  href="test.xsl" ?>

<DETACCT-XML-DOCUMENT>

<XML-TABLE-ROW>
  <ACCTCODE>BO</ACCTCODE>
  <ACCOUNT>8006547</ACCOUNT>
  <NAME>TORRES,ERNESTO</NAME>
  <ADD1>23444 PARK LANE</ADD1>
  <ADD2>LOS ANGELES CA</ADD2>
  <ARFILE.BALANCE> 44.99</ARFILE.BALANCE>
</XML-TABLE-ROW>

</DETACCT-XML-DOCUMENT>


<?xml version="1.0" ?>
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 <xsl:template match="/">
 <html>
   <head>
     <title>
       <xsl:value-of select="local-name(/*)"/>
     </title>
     <xsl:apply-templates/>
   </head>
   <frameset rows="40,60,*" border="0" id="xfrm" name="xfrm">
     <frame name="xhead" id="xhead" src="javascript:parent.head();"
        marginheight="2" marginwidth="2" scrolling="no"
        noresize="noresize" />
     <frame name="xhead1" id="xhead1" src="javascript:parent.head1();"
        marginheight="2" marginwidth="2" scrolling="no"
        noresize="noresize" />
     <frame name="xbody" id="xbody" src="javascript:parent.body();"
        marginheight="2" marginwidth="2" />
   </frameset>
 </html>
 </xsl:template>

<xsl:template match="/*">

<script language="JavaScript" type="text/javascript">

var rtxt = ""; // frame 1 report header text
var htxt = ""; // frame 2 table header text
var btxt = ""; // frame 3 table body text

var i;
var ncols = <xsl:value-of select="count(/*/* 1 /*)"/>;
var nrows = <xsl:value-of select="count(/*/*)"/>;

<! CDATA

// write html beg tag
function bTag ( tg, opt ) {
  var out = "<";
  out += tg;
  if ( opt == 1 )
     out += ">";
  out += " ";
  return out;
} // end of write html beg tag

// write html end tag
function eTag ( tg ) {
  var out = "<";
  out += "/";
  out += tg;
  out += "> ";
  return out;
} // end of write html end tag

// convert text to title (insert spaces and caps)
function cTitle ( txt ) {

  var ind;
  var targ;
  var prev = "";
  var tmp;

  for ( ind = 0; ind < txt.length; ind ++ ) {

    targ = txt.charAt(ind);

    if ( ind == 0 ) {
      tmp = targ.toUpperCase();
      continue;
    }

    if ( targ == "." ) {
      tmp += " ";
       prev = targ;
       continue;
     }

     if ( targ == "-" ) {
       tmp += " ";
       prev = targ;
       continue;
     }

     if ( targ == "_" ) {
       tmp += " ";
       prev = targ;
       continue;
     }

     if ( prev != "" ) {
       tmp += targ.toUpperCase();
       prev = "";
       continue;
     } else {
       tmp += targ.toLowerCase();
     }

   } // end of loop

   return tmp;

 } // end of create Title

 // get frame document object
 function getfdobj ( fo, id, nFlag ) {

   var myobj;

   if ( nFlag ) {
     myobj = fo.contentDocument.getElementById(id);
   } else {
     myobj=fo.contentWindow.document.getElementById(id);
   }

   return myobj;

 } // get frame document object

 // calculate frame height
 function calcFH ( ff, id, nFlag ) {

   var fm1h;
   var myframe;
   var myobj;

   myframe = document.getElementById(ff);
   fm1h = myframe.marginHeight * 2;


   if ( nFlag ) {
     myobj = myframe.contentDocument.getElementById(id);
     fm1h += myobj.offsetHeight;
   } else {
     myobj=myframe.contentWindow.document.getElementById(id);
     fm1h += myobj.scrollHeight;
   }

   return fm1h;

 } // calculate frame height

 // time delayed on-load event function
 function myload ( ) {

   // make sure frame sizes are adjusted correctly

   var nFlag = document.frames "xhead" .contentDocument;

   var frm2 = document.getElementById("xhead1");
   var frm3 = document.getElementById("xbody");

   var obj1;
   var obj2;
   var tbid;
   var fm1h = 40;
   var fm2h = 60;

   fm1h = calcFH ( "xhead", "f1h1", nFlag );
   fm2h = calcFH ( "xhead1", "f2t1", nFlag );

   // obj1 = getfdobj ( frm2, "tb1end", nFlag );
   // fm2h = fm2h - (obj1.offsetHeight);

   var myrows = fm1h + ", " + fm2h + ", *"

   document.getElementById("xfrm").rows = myrows;

   // set width in table 1 row 2 to width from longest row
   // in table 2 this will expand cell widths in table 1 to match
   // cell widths in table 2

   var tb1w;
   var tb2w;

   for ( ind = 0; ind < ncols; ind++ ) {

     tbid = "tb1r" + ind;
     obj1 = getfdobj ( frm2, tbid, nFlag );
     tb1w = obj1.offsetWidth;


     tbid = "tb2r0" + ind;
     obj2 = getfdobj ( frm3, tbid, nFlag );
     tb2w = obj2.offsetWidth;

     if ( tb1w < tb2w )
       obj1.width = tb2w;
     else if ( tb2w < tb1w )
       obj2.width = tb1w;

   } // end add hidden cell loop

 } // end onload function

 //  >

 // text concatenation functions

 function rt ( tg ) { rtxt += tg; }
 function ht ( tg ) { htxt += tg; }
 function bt ( tg ) { btxt += tg; }

 // write static report head frame 1
 function head ( ) {
   rtxt = "";
   rt('<html> ');
   rt(bTag("head",1));
   rt('<style type="text/css"> ');
   rt('body {color:black; background:aqua} ');
   rt('</style> ');
   rt(eTag("head"));
   rt('<body> ');
   rt('<div id="f1h1"> ');
   rt('<h1 align="center"> ');
   rt(cTitle('<xsl:value-of select="local-name(/*)"/>'));
   rt('</h1> ');
   rt('</div> ');
   rt('</body> ');
   rt('</html> ');
   return rtxt;
 } // end of write head frame 1

 // write table head frame 2 (scrollable programatically)
 function head1 ( ) {
   htxt = "";
   ht('<html> ');
   ht(bTag("head",1));
   ht('<style type="text/css"> ');
   ht('</style> ');
   ht(eTag("head"));
   ht('<body> ');
   ht('<div id="f2t1"> ');
   ht('<table id="tb1" border="2" width="100%" cellpadding="5" > ');
   ht('<tbody> ');

   ht('<tr bordercolor="yellow" bgcolor="#00CCFF"> ');
      <xsl:apply-templates select="/*/* 1 /*" mode="header"/>
   ht('</tr> ');

   ht(bTag("tr",0));
   ht(' bordercolor="yellow" bgcolor="#00CCFF" id="tb1end" ');
   ht(' style="visibility:hidden" &gt; ');
       <xsl:apply-templates select="/*/* 1 /*" mode="headerend"/>
   ht(eTag("tr"));

   ht('</tbody> ');
   ht('</table> ');
   ht('</div> ');
   ht('</body> ');
   ht('</html> ');
   return htxt;
 } // end of write head table frame 2

 // write table body frame 3 ( user scrollable )
 function body ( ) {
   bt('<html> ');
   bt(bTag("head",1));
   bt('<style type="text/css"> ');
   bt('</style> ');
   bt('&lt;script language="JavaScript" type="text/javascript"&gt; ');

   bt('var _run; ');


   bt('if(navigator.userAgent.indexOf("Firebird")!=-1|| ');
   bt('navigator.userAgent.indexOf("Firefox")!=-1|| ');
   bt('navigator.appName=="Microsoft Internet Explorer") ');
   bt('{ _run=false; } else { _run= true; } ');

   bt('function scrollR() { ');
   bt('var left = document.body.scrollLeft; ');
   bt('parent.frames "xhead1" .scrollTo(left,0); } ');

   bt('function searchScroll() { ');
   bt('var left = document.body.scrollLeft; ');
   bt('parent.frames "xhead1" .scrollTo(left,0); ');
   bt('window.setTimeout("searchScroll();",1); } ');

   bt('if(_run == false) { ');
   bt('window.onscroll=scrollR; ');
   bt('} else { ');
   bt('window.onload=searchScroll; } ');

   bt(eTag("script"));
   bt(eTag("head"));

   bt('<body> ');
   bt('<table id="tb2" border="2" width="100%" cellpadding="5" > ');
   bt('<tbody> ');
     <xsl:apply-templates />
   bt('</tbody> ');
   bt('</table> ');
   bt('</body> ');

   bt('</html>');
   return btxt;
 } // end of table body frame 3

 // give browser chance to render before myload
 window.onload=function() {setTimeout(myload,1)};

 </script>

 </xsl:template>

 <xsl:template match="/*/*/*" mode="header">
   ht('<th > ');
   ht(cTitle('<xsl:value-of select="local-name()"/>'));
   ht('</th> ');
 </xsl:template>

 <xsl:template match="/*/*/*" mode="headerend" >
   ht('<td id="tb1r{position()-1}" nowrap="nowrap">');
   // ht('<xsl:value-of select="."/> ');
   ht('</td> ');
 </xsl:template>

 <xsl:template match="/*/*" >
   bt('<tr bordercolor="yellow" bgcolor="silver"> ');
     <xsl:apply-templates >
       <xsl:with-param name="rcnt" select="position()-1"/>
     </xsl:apply-templates >
   bt('</tr> ');
 </xsl:template>

 <xsl:template match="/*/*/*" >
   <xsl:param name="rcnt" />
   <xsl:variable name="col" select="position()-1" />
   bt('<td align="center" id="tb2r{$rcnt}{$col}" nowrap="nowrap"> ');
   bt('<xsl:value-of select="."/> ');
   bt('</td> ');
 </xsl:template>

</xsl:stylesheet>


Current Thread