bptacek
asked on
Layer Sticky
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 ]
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 ]
ASKER
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
http://www.geocrawler.com/archives/3/123/2002/1/50/7620362/
Ben
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.
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.
ASKER
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("b odysection ");
var oEl2 = document.getElementById("l efth");
var oEl3 = document.getElementById("t oph");
oEl2.scrollTop = oEl.scrollTop;
oEl3.scrollLeft = oEl.scrollLeft;
}
if(document.all != null){
var W=document.body.offsetWidt h-330;
var WT=W-17;
var str='<style type="text/css">';
str+='#toph {background-color:transpar ent; top:0px; left:0px; position:relative; width:'+WT+'px; visibility:visible; overflow:hidden;}';
str+='#bodysection {background-color:transpar ent; 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-3 30;
var WT=W-17;
var str='<style type="text/css">';
str+='#toph {background-color:transpar ent; top:0px; left:0px; position:relative; width:'+WT+'px; visibility:visible; overflow:hidden;}';
str+='#bodysection {background-color:transpar ent; 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:transpar ent; top:0px; left:0px; position:relative; width:960px; visibility:visible; overflow:hidden;}';
str+='#bodysection {background-color:transpar ent; 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_wid th#</cfout put>" border="0" cellspacing="0" cellpadding="0">
<cfoutput>
<tr>
<td width="#lcell_width1#" class="order-main-text">&n bsp;</td>
<td width="#lcell_width2#" class="order-main-text">&n bsp;</td>
<td width="#lcell_width3#" class="order-main-text">&n bsp; <strong>Sh ipper##</s trong></td >
</tr>
</cfoutput>
<tr>
<td colspan="13" class="bord-solid-bottom"> <img src="../../../../themes/de fault/imag es/pixel.g if" width="1" height="1"></td>
</tr>
</table>
</td>
<td width="85%" valign="top">
<div id="toph">
<table width="<cfoutput>#tbl_widt h#</cfoutp ut>" border="0" cellspacing="0" cellpadding="0">
<cfoutput>
<tr>
<td width="#cell_width1#" class="order-main-text">&n bsp;<stron g>Carrier< /strong></ td>
<td width="#cell_width2#" class="order-main-text">&n bsp;<stron g>Pro ##</strong></td>
<td width="#cell_width3#" class="order-main-text">&n bsp;<stron g>ShipDate </strong>< /td>
<td width="#cell_width4#" class="order-main-text">&n bsp;<stron g>PO ##</strong></td>
<td width="#cell_width5#" class="order-main-text">&n bsp;<stron g>BenchAmt </strong>< /td>
<td width="#cell_width6#" class="order-main-text">&n bsp;<stron g>BilledAm t</strong> </td>
<td width="#cell_width7#" class="order-main-text">&n bsp;<stron g>CorrectA mt</strong ></td>
<td width="#cell_width8#" class="order-main-text">&n bsp;<stron g>NetPay</ strong></t d>
<td width="#cell_width9#" class="order-main-text">&n bsp;<stron g>Shipper ##</strong></td>
<td width="#cell_width10#" class="order-main-text">&n bsp;</td>
</tr>
</cfoutput>
<tr>
<td colspan="13" class="bord-solid-bottom"> <img src="../../../../themes/de fault/imag es/pixel.g if" width="1" height="1"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div id="lefth">
<table width="<cfoutput>#ltbl_wid th#</cfout put>" 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"><d iv align="center"><strong>#cu rrentrow#< /strong></ div></td>
<td width="#lcell_width2#" class="order-main-text"><i nput type="checkbox" name="receiptids" value="#receiptID#" checked></td>
<td width="#lcell_width3#" class="order-main-text">&n bsp;#order ID#</td>
</tr>
</cfoutput>
</table>
</div>
</td>
<td valign="top">
<div id="bodysection" onScroll="onScroll();">
<table width="<cfoutput>#tbl_widt h#</cfoutp ut>" 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">&n bsp;#carri er_name#</ td>
<td width="#cell_width2#" class="order-main-text">&n bsp;#clien t_pronum#< /td>
<td width="#cell_width3#" class="order-main-text">&n bsp;#DateF ormat(date _pudate,'y yyy-mm-dd' )#</td>
<td width="#cell_width4#" class="order-main-text">&n bsp;#clien t_refnum#< /td>
<td width="#cell_width5#" class="order-main-text">&n bsp;#Dolla rFormat(cl ient_amtbi ll)#</td>
<td width="#cell_width6#" class="order-main-text">&n bsp;#Dolla rFormat(cl ient_corpa y)#</td>
<td width="#cell_width7#" class="order-main-text">&n bsp;#Dolla rFormat(cl ient_netpa y)#</td>
<td width="#cell_width8#" class="order-main-text">&n bsp;</td>
<td width="#cell_width9#" class="order-main-text"><i nput type="checkbox" name="receiptids" value="#receiptID#" checked></td>
<td width="#cell_width10#" class="order-main-text"><d iv align="center"><strong>#cu rrentrow#< /strong></ div></td>
</tr>
</cfoutput>
</table>
</div>
</td>
</tr>
</table>
-------------------------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- -------
Ben
--------------------------
<script language="javascript">
function onScroll()
{
var oEl = document.getElementById("b
var oEl2 = document.getElementById("l
var oEl3 = document.getElementById("t
oEl2.scrollTop = oEl.scrollTop;
oEl3.scrollLeft = oEl.scrollLeft;
}
if(document.all != null){
var W=document.body.offsetWidt
var WT=W-17;
var str='<style type="text/css">';
str+='#toph {background-color:transpar
str+='#bodysection {background-color:transpar
str+='</style>';
document.write(str);
}else if((navigator.appName == 'Netscape' || navigator.appName == 'Mozilla')){
var W=self.window.innerWidth-3
var WT=W-17;
var str='<style type="text/css">';
str+='#toph {background-color:transpar
str+='#bodysection {background-color:transpar
str+='</style>';
document.write(str);
}else{
var str='<style type="text/css">';
str+='#toph {background-color:transpar
str+='#bodysection {background-color:transpar
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_wid
<cfoutput>
<tr>
<td width="#lcell_width1#" class="order-main-text">&n
<td width="#lcell_width2#" class="order-main-text">&n
<td width="#lcell_width3#" class="order-main-text">&n
</tr>
</cfoutput>
<tr>
<td colspan="13" class="bord-solid-bottom">
</tr>
</table>
</td>
<td width="85%" valign="top">
<div id="toph">
<table width="<cfoutput>#tbl_widt
<cfoutput>
<tr>
<td width="#cell_width1#" class="order-main-text">&n
<td width="#cell_width2#" class="order-main-text">&n
<td width="#cell_width3#" class="order-main-text">&n
<td width="#cell_width4#" class="order-main-text">&n
<td width="#cell_width5#" class="order-main-text">&n
<td width="#cell_width6#" class="order-main-text">&n
<td width="#cell_width7#" class="order-main-text">&n
<td width="#cell_width8#" class="order-main-text">&n
<td width="#cell_width9#" class="order-main-text">&n
<td width="#cell_width10#" class="order-main-text">&n
</tr>
</cfoutput>
<tr>
<td colspan="13" class="bord-solid-bottom">
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div id="lefth">
<table width="<cfoutput>#ltbl_wid
<cfoutput query="reportresults">
<tr bgcolor="###iif(currentrow
<td width="#lcell_width1#" class="order-main-text"><d
<td width="#lcell_width2#" class="order-main-text"><i
<td width="#lcell_width3#" class="order-main-text">&n
</tr>
</cfoutput>
</table>
</div>
</td>
<td valign="top">
<div id="bodysection" onScroll="onScroll();">
<table width="<cfoutput>#tbl_widt
<cfoutput query="reportresults">
<tr bgcolor="###iif(currentrow
<td width="#cell_width1#" class="order-main-text">&n
<td width="#cell_width2#" class="order-main-text">&n
<td width="#cell_width3#" class="order-main-text">&n
<td width="#cell_width4#" class="order-main-text">&n
<td width="#cell_width5#" class="order-main-text">&n
<td width="#cell_width6#" class="order-main-text">&n
<td width="#cell_width7#" class="order-main-text">&n
<td width="#cell_width8#" class="order-main-text">&n
<td width="#cell_width9#" class="order-main-text"><i
<td width="#cell_width10#" class="order-main-text"><d
</tr>
</cfoutput>
</table>
</div>
</td>
</tr>
</table>
--------------------------
Ben
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.pdgmedia.com/ee/scrolling.html
Thanks,
Sean