0

I tried looking for this answer and saw questions close to it but unable to get a resolution to my problem @ HTML table headers always visible at top of window when viewing a large table.

Basically we have inherited a XSL page which has 2 HTML tables and when you hover over an row on the main table that has a value "yes" it shows a hidden 2nd table relating to that row on the right while if "no" it doesnt show anything. However if you have a lot of results being shown through the XSL, when you scroll down you will be unable to see the table.

I am just wondering if there is a way to force the 1 right hidden table to stay at the top of the screen everytime you hover over value yes even if it means to have the XSL result set to have a scroll bar instead?

Hope i have made myself clear, please see an extract of my code that im having trouble with.

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

<script>
function showme(show)
{
  <xsl:for-each select="root/Action">document.getElementById('<xsl:value-of select="@Type"/>').style.display='none';
  </xsl:for-each>
  document.getElementById('summary').style.display='none';
  document.getElementById(show).style.display='inline';
}
</script>

<xsl:for-each select="root/Action">
<span style="display:none">
 <xsl:attribute name="id"><xsl:value-of select="@Type"/></xsl:attribute>
 <table class="lgreenback"><tr class="small"><td class="green">Details for: <b><xsl:value-of select="@Type"/> Actions:</b> &#160; <a onmouseover="style.cursor='hand'" onclick="showme('summary')">&lt;&lt; Back</a></td></tr></table><br/>
 <table cellspacing="0" cellpadding="2" class="bdrnw">
 <tr class="small">
   <td class="lgheadercell">Date:</td>
   <td class="lgheadercell">&#160;</td>
   <td class="lgheadercell">Time:</td>
   <td class="lgheadercell">&#160;</td>
   <td class="lgheadercell">Done By:</td>
   <td class="lgheadercell">&#160;</td>
   <td class="lgheadercell">B&amp;S Ref:</td>
   <td class="lgheadercell">&#160;</td>
    <td class="lgheadercell">Assocs:</td>
 </tr>
 <xsl:for-each select="Case">
   <tr class="smallerstill">

   <xsl:choose>
   <xsl:when test="count(Linked) > 0">
     <xsl:attribute name="onmouseover">style.background='#f6f6f6', style.cursor='hand', document.getElementById('<xsl:value-of select="@id"/>').style.display='inline'</xsl:attribute>
     <xsl:attribute name="onmouseout">style.background='#ffffff', document.getElementById('<xsl:value-of select="@id"/>').style.display='none'</xsl:attribute>
   </xsl:when>
   <xsl:otherwise>
     <xsl:attribute name="onmouseover">style.background='#f6f6f6', style.cursor='hand'</xsl:attribute>
     <xsl:attribute name="onmouseout">style.background='#ffffff'</xsl:attribute>
   </xsl:otherwise>
   </xsl:choose>

     <td><xsl:value-of select="Date"/></td>
     <td></td>
     <td><xsl:value-of select="Time"/></td>
     <td></td>
     <td><xsl:value-of select="Realname"/></td>
     <td></td>
     <td><xsl:value-of select="substring(Client,1,3)" />-<xsl:value-of select="substring(Client,4,1)" />&#160;<xsl:value-of select="Ref"/></td>
     <td></td>
     <td align="center">
       <xsl:choose>
     <xsl:when test="count(Linked) > 0">Yes</xsl:when>
     <xsl:otherwise>No</xsl:otherwise>
   </xsl:choose>
 </td>
   </tr>
 </xsl:for-each>
</table>
</span>
</xsl:for-each>


</td><td valign="top" align="left">

<img src="../images/spacer.gif" height="41" width="120"/>
<xsl:for-each select="/root/Action/Case[count(Linked) > 0]">
  <span style="display:none">
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
<table cellspacing="0" cellpadding="2" class="bdrnw">
<tr class="small"><td class="lgheadercell">Assocs:</td></tr>
  <xsl:for-each select="Linked">
  <tr class="smallerstill"><td><xsl:value-of select="substring(@cl,1,3)" />-<xsl:value-of select="substring(@cl,4,1)" />&#160;<xsl:value-of select="@nm"/></td></tr>
  </xsl:for-each>
</table>
</span>

</xsl:for-each>

</td></tr></table>

</html>
</xsl:template>
</xsl:stylesheet>

Let me know if you need anything else.

Thanks, Kevin

Community
  • 1
  • 1
Naxos
  • 45
  • 2
  • 9
  • Can you please show an example of the generated HTML? – Sean B. Durkin Aug 14 '12 at 03:23
  • Would uploading a few screenshots be satisfactory? The page is on a secured server with data that we cant divulge. If you do need the page still i guess i could try finding somewhere to host externally a dummy page and data. Let me know. – Naxos Aug 14 '12 at 11:29
  • How about you reframe the question in a less specific form. Think about what is the essential nub of the problem, as opposed to what is situational fluff. Is your problem about how to achieve something in HTML (therefore the XSLT side of it is just fluff)? Or is your problem a transformational one? More comment following... – Sean B. Durkin Aug 14 '12 at 12:07
  • If the problem is really about HTML, then make up a very simplified HTML page which contains the abstracted problem. In this case, don't worry about XSLT - that will come later. – Sean B. Durkin Aug 14 '12 at 12:10
  • If the problem is a transformational one, then again abstract the problem. Supply a simplified sample input XML document, expected HTML output, the rules of transformation, including if necessary, edge cases, and whether or not it is client-side XSLT or server-side. If server-side, then specify XSLT version and engine. – Sean B. Durkin Aug 14 '12 at 12:12
  • Okay thanks, i try to re-word what i require. I have a page that has 2 tables next to each other. The table on the right is hidden and only shows when you hover over records with "Yes". I basically want this hidden table to always show at the top of the window if you have scrolled down the page and hover over a "Yes" record. Whats the best way of achieving this? Hope this is clear now. Thanks – Naxos Aug 14 '12 at 12:58

1 Answers1

1

Use the CSS position:fixed property on the right-hand table, or a <div> around it.

CSS Example

#some-element {
  position: fixed;
  right: 0;
  top: 0%;
}

References

  1. http://www.w3.org/Style/Examples/007/menus.en.html (Perfect example for you!)
  2. http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
  3. http://davidwalsh.name/css-fixed-position
  4. http://caniuse.com/css-fixed
Sean B. Durkin
  • 12,659
  • 1
  • 36
  • 65