Solved

Layer Sticky

Posted on 2004-04-20
5
370 Views
Last Modified: 2010-04-06
Hi,

  I am wondering if there is anyway to create a div layer "sticky".  It is kind of like how Excel and OpenOffice have the ability to "freeze panes".  To put it in perspective, I want to have column headings that not only stay there when you scroll down on the content layer, but if you scroll horizontally, then the column titles scroll to match the content columns.

  Anyone know how to do this?

Thanks
Ben

[Question PAQ'd - points refunded (500) ]
[Sean Powell ]
0
Comment
Question by:bptacek
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 10870941
I have this example set up that scrolls table elements within div's - is this what you're looking for?

http://www.pdgmedia.com/ee/scrolling.html

Thanks,
Sean
0
 

Author Comment

by:bptacek
ID: 10870963
Yes, but your's only works in IE.  I actually have a solution in progress.  I found it from here:

http://www.geocrawler.com/archives/3/123/2002/1/50/7620362/

Ben
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10871430
No problem Ben - I just wanted to find out if we were talking about the same thing.
If you have a solution, do you want me to delete the question?

If yes, just post back and I'll do it immediately for you.
0
 

Author Comment

by:bptacek
ID: 10872208
Actually I did just get it working... thanks for the post seanpowell.  Here were my results if anyone was interested(its in coldfusion, but one should be to translate):
-------------------------------------------------------------------------------------------------------
<script language="javascript">
function onScroll()
{
      var oEl = document.getElementById("bodysection");
      var oEl2 = document.getElementById("lefth");
      var oEl3 = document.getElementById("toph");
      oEl2.scrollTop = oEl.scrollTop;
      oEl3.scrollLeft = oEl.scrollLeft;
}
      
if(document.all != null){
var W=document.body.offsetWidth-330;
var WT=W-17;
var str='<style type="text/css">';
str+='#toph {background-color:transparent; top:0px; left:0px; position:relative; width:'+WT+'px; visibility:visible; overflow:hidden;}';
str+='#bodysection {background-color:transparent; top:0px; left:0px; position:relative; width:'+W+'px; height:307px; visibility:visible; clip:rect(auto auto 307px auto); overflow:auto;}';
str+='</style>';
document.write(str);
}else if((navigator.appName == 'Netscape' || navigator.appName == 'Mozilla')){
var W=self.window.innerWidth-330;
var WT=W-17;
var str='<style type="text/css">';
str+='#toph {background-color:transparent; top:0px; left:0px; position:relative; width:'+WT+'px; visibility:visible; overflow:hidden;}';
str+='#bodysection {background-color:transparent; top:0px; left:0px; position:relative; width::'+W+'px; height:307px; visibility:visible; clip:rect(auto auto 307px auto); overflow:auto;}';
str+='</style>';
document.write(str);
}else{
var str='<style type="text/css">';
str+='#toph {background-color:transparent; top:0px; left:0px; position:relative; width:960px; visibility:visible; overflow:hidden;}';
str+='#bodysection {background-color:transparent; top:0px; left:0px; position:relative; width:977px; height:307px; visibility:visible; clip:rect(auto auto 307px auto); overflow:auto;}';
str+='</style>';
document.write(str);
}
</script>
<!--- set the left table width --->
<cfset ltbl_width = "120">
<!--- set the cell widths --->
<cfset lcell_width1 = "10">
<cfset lcell_width2 = "25">
<cfset lcell_width3 = "85">

<!--- set the main table width --->
<cfset tbl_width = "2000">
<!--- set the cells width of the main table --->
<cfset cell_width1 = "300">
<cfset cell_width2 = "200">
<cfset cell_width3 = "200">
<cfset cell_width4 = "200">
<cfset cell_width5 = "200">
<cfset cell_width6 = "175">
<cfset cell_width7 = "175">
<cfset cell_width8 = "175">
<cfset cell_width9 = "175">
<cfset cell_width10 = "200">
<style>
#lefth, #lefth2 {
      background-color: transparent;
      top: 0px;
      left: 0px;
      position: relative;
      width: 100%;
      height: 290px;
      visibility: visible;
      z-index : 2;
      clip: rect(auto,auto,290px,auto);
      overflow : hidden;
}
/*
#toph {
      background-color: transparent;
      top: 0px;
      left: 0px;
      position: relative;
      width: 983px;
      visibility: visible;
      overflow : hidden;
}
#bodysection {
      background-color: transparent;
      top: 0px;
      left: 0px;
      position: relative;
      width: 977px;
      height: 307px;
      visibility: visible;
      clip: rect(auto auto 307px auto);
      overflow : auto;
}*/
</style>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="15%" valign="top">
                  <table width="<cfoutput>#ltbl_width#</cfoutput>"  border="0" cellspacing="0" cellpadding="0">
                  <cfoutput>
                  <tr>
                    <td width="#lcell_width1#" class="order-main-text">&nbsp;</td>
                    <td width="#lcell_width2#" class="order-main-text">&nbsp;</td>
                    <td width="#lcell_width3#" class="order-main-text">&nbsp;&nbsp;<strong>Shipper##</strong></td>
                  </tr>
                  </cfoutput>
                  <tr>
                    <td colspan="13" class="bord-solid-bottom"><img src="../../../../themes/default/images/pixel.gif" width="1" height="1"></td>
                    </tr>
                  </table>
      </td>
    <td width="85%" valign="top">
            <div id="toph">
                  <table width="<cfoutput>#tbl_width#</cfoutput>"  border="0" cellspacing="0" cellpadding="0">
                  <cfoutput>
                  <tr>
                    <td width="#cell_width1#" class="order-main-text">&nbsp;<strong>Carrier</strong></td>
                    <td width="#cell_width2#" class="order-main-text">&nbsp;<strong>Pro ##</strong></td>
                    <td width="#cell_width3#" class="order-main-text">&nbsp;<strong>ShipDate</strong></td>
                    <td width="#cell_width4#" class="order-main-text">&nbsp;<strong>PO ##</strong></td>
                    <td width="#cell_width5#" class="order-main-text">&nbsp;<strong>BenchAmt</strong></td>
                    <td width="#cell_width6#" class="order-main-text">&nbsp;<strong>BilledAmt</strong></td>
                    <td width="#cell_width7#" class="order-main-text">&nbsp;<strong>CorrectAmt</strong></td>
                    <td width="#cell_width8#" class="order-main-text">&nbsp;<strong>NetPay</strong></td>
                    <td width="#cell_width9#" class="order-main-text">&nbsp;<strong>Shipper ##</strong></td>
                    <td width="#cell_width10#" class="order-main-text">&nbsp;</td>
                  </tr>
                  </cfoutput>
                  <tr>
                    <td colspan="13" class="bord-solid-bottom"><img src="../../../../themes/default/images/pixel.gif" width="1" height="1"></td>
                    </tr>
                  </table>
            </div>
      </td>
  </tr>
<tr>
    <td valign="top">
            <div id="lefth">
            <table width="<cfoutput>#ltbl_width#</cfoutput>"  border="0" cellspacing="0" cellpadding="0">
                  <cfoutput query="reportresults">
                        <tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
                          <td width="#lcell_width1#" class="order-main-text"><div align="center"><strong>#currentrow#</strong></div></td>
                          <td width="#lcell_width2#" class="order-main-text"><input type="checkbox" name="receiptids" value="#receiptID#" checked></td>
                          <td width="#lcell_width3#" class="order-main-text">&nbsp;#orderID#</td>
                        </tr>
                  </cfoutput>
                  </table>
            </div>
      </td>
    <td valign="top">
            <div id="bodysection" onScroll="onScroll();">
            <table width="<cfoutput>#tbl_width#</cfoutput>"  border="0" cellspacing="0" cellpadding="0">
                  <cfoutput query="reportresults">
                        <tr bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
                          <td width="#cell_width1#" class="order-main-text">&nbsp;#carrier_name#</td>
                          <td width="#cell_width2#" class="order-main-text">&nbsp;#client_pronum#</td>
                          <td width="#cell_width3#" class="order-main-text">&nbsp;#DateFormat(date_pudate,'yyyy-mm-dd')#</td>
                          <td width="#cell_width4#" class="order-main-text">&nbsp;#client_refnum#</td>
                          <td width="#cell_width5#" class="order-main-text">&nbsp;#DollarFormat(client_amtbill)#</td>
                          <td width="#cell_width6#" class="order-main-text">&nbsp;#DollarFormat(client_corpay)#</td>
                          <td width="#cell_width7#" class="order-main-text">&nbsp;#DollarFormat(client_netpay)#</td>
                          <td width="#cell_width8#" class="order-main-text">&nbsp;</td>
                          <td width="#cell_width9#" class="order-main-text"><input type="checkbox" name="receiptids" value="#receiptID#" checked></td>
                          <td width="#cell_width10#" class="order-main-text"><div align="center"><strong>#currentrow#</strong></div></td>
                        </tr>
                  </cfoutput>
                  </table>
            </div>
      </td>
  </tr>
</table>
-------------------------------------------------------------------------------------------------------

Ben
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 0 total points
ID: 10872688
Okay, I'll PAQ the question and refund your points to you :-)

Thanks,
Sean Powell
Web Languages Page Editor
0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question