xsl-list
[Top] [All Lists]

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

2005-05-28 11:15:38
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>

                                       
                                                                      

--~------------------------------------------------------------------
XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list
To unsubscribe, go to: http://lists.mulberrytech.com/xsl-list/
or e-mail: <mailto:xsl-list-unsubscribe(_at_)lists(_dot_)mulberrytech(_dot_)com>
--~--



<Prev in Thread] Current Thread [Next in Thread>
  • FYI:RFC>>> Scroll Table Body Separate From Table Headers ( it works ) Try it Out, Bovy, Stephen J <=