Top Expression CSS to JS
I have an example that uses top:expression(this.offset
I know that epxressions are bad in CSS and that they are not supported in IE8. I would like to move this to javasript.
Please do not suggest a restructure, I am using this layout for a reason (variable width, may or may not have a scrollbar, etc). I am strictly interested in moving the top expression from CSS to JS. Thanks in advance.
I know that epxressions are bad in CSS and that they are not supported in IE8. I would like to move this to javasript.
Please do not suggest a restructure, I am using this layout for a reason (variable width, may or may not have a scrollbar, etc). I am strictly interested in moving the top expression from CSS to JS. Thanks in advance.
<div id="parent" onScroll="scroll()">
<table>
<thead>
<tr id="header">
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>ASKER
I wasn't going to put up all the CSS and the JS function is what I need help with...the question is just about converting the CSS function I mentioned to JS
CSS has no functions. scroll() is already a javascript function and you are using an html event to call the javscript function called scroll. Somewhere, you have to have a javascript function called "scroll" to prevent the page from crashing.
What do you want the page to do??
What do you want the page to do??
can you also just give the url of your page if it is out on the web? Or, could you copy and paste all of your source code here?
@Bob: Yes IE had "css expressions" now no longer with out
Is this what you want?
http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/
Is this what you want?
http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/
ASKER
It's not on the web. See attached.
I am looking for help writing the scroll function to eliminate the CSS expression...
I am looking for help writing the scroll function to eliminate the CSS expression...
#NGPTicketsLoadingImage
{
text-align:center;
height:100px;
padding:50px 0 0 0;
}
.MyOpenTicketsError,
#NGPMyOpenTicketsNoTickets
{
padding:8px 8px 0 8px;
overflow:auto;
overflow-x:hidden;
margin:0 0 5px 0;
height:auto;
}
#NGPTicketsPanelUpdate
{
height:145px;
max-height:145px;
position:relative;
overflow:auto;
overflow-x:hidden;
min-width:182px;
margin:0 0 5px 0;
}
.NGPMyOpenTicketsTable
{
width:100%;
border-collapse:collapse;
margin-bottom:5px;
height:auto;
table-layout:fixed;
}
.NGPMyOpenTicketsTable a:hover
{
text-decoration:hover;
}
.NGPMyOpenTicketsTable>thead
{
background-color:#F2F2F2;
padding:0;
margin:0;
}
.NGPMyOpenTicketsTable .header
{
text-align:left;
height:16px;
position:absolute;
top:expression(this.offsetParent.scrollTop);
width: 100%;
float: left;
font-weight:bold;
z-index:2;
background-color:#F2F2F2;
}
.NGPMyOpenTicketsTable .header th
{
background-color:#F2F2F2 !important;
max-height:14px;
}
.MyOpenTicketsTable-ActionRequired,
.MyOpenTicketsTable-Title,
.MyOpenTicketsTable-Date
{
float:none;
}
#OpenTixImageHeader
{
float: left;
height: 100%;
min-width: 8px;
max-width:16px;
}
#OpenTixTitleHeader
{
float:left;
min-width:75px;
text-align:left;
width:auto;
}
#OpenTixDateHeader
{
min-width:65px;
width:65px;
max-width:65px;
*+min-width:85px;
*+width:85px;
*+max-width:85px;
position:relative;
float:right;
text-align:left;
}
.NGPMyOpenTicketsTable .body
{
height:auto;
padding:20px 0 0 0;
*+padding:36px 0 0 0;
overflow: auto;
float: left;
width: 100%;
overflow-x: hidden;
position: relative;
}
.NGPMyOpenTicketsTable .body>tr
{
position:relative;
top:16px;
z-index:1;
}
.NGPMyOpenTicketsRow
{
height:16px;
position:static;
padding:0;
width: 100%;
}
.MyOpenTicketsTable-ActionRequired
{
min-width:8px;
}
.MyOpenTicketsTable-ActionRequired img
{
padding:0 2px;
}
.MyOpenTicketsTable-Title
{
width:100%;
min-width:75px;
}
.MyOpenTicketsTable-Date
{
width:60px;
min-width:60px;
vertical-align:top;
text-align:left;
padding-right:8px;
}<div style="" id="NGPTicketsPanelUpdate"><table width="100%" cellspacing="0" cellpadding="0" class="NGPMyOpenTicketsTable" id="MyOpenTicketsTables"><thead><tr class="header"><th style="width: 8px;" id="OpenTixImageHeader"></th><th id="OpenTixTitleHeader">Title</th><th id="OpenTixDateHeader">Opened</th></tr></thead><tbody class="body"><tr class="NGPMyOpenTicketsRow"><td class="MyOpenTicketsTable-ActionRequired"></td><td class="MyOpenTicketsTable-Title"><a title="esupport: CIO Cases are not displaying.">esupport: CIO Cases are not displaying.</a></td><td class="MyOpenTicketsTable-Date">11-Oct-10</td></tr><tr class="NGPMyOpenTicketsRow"><td class="MyOpenTicketsTable-ActionRequired"></td><td class="MyOpenTicketsTable-Title"><a title="People pages site is not saving the picture that was uploaded">People pages site is not saving the picture that was uploaded</a></td><td class="MyOpenTicketsTable-Date">11-Oct-10</td></tr></tbody></table></div>ASKER
The scroll function would be in the div with ID NGPTicketsPanelUpdate
What exactly would you like NGPTTicketsPanelUpdate to do? What exact scroll behavior would you like??
ASKER
The top:expression(this.offset
If not javascript and you can handle a sroll bar at the bottom of your table body rather than the top then add a css spec for the tbody class of "body". Actually, change this <tbody class="body"> to <tbody class="body1"> as it doesn't seem like a good idea naming a class with the reserved word "body"
Then for your css
.body1
{
overflow:scroll;
}
Then for your css
.body1
{
overflow:scroll;
}
Nevermind, doesn't work in IE 9
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
How about this one.
http://pyramidions.com/
http://pyramidions.com/
Did you try conditional comments and position:fixed?