Saturday, October 23, 2004

CSS expressions in IE (or, How to make a TBODY scroll)

CSS expressions in IE (or, How to make a TBODY scroll)


I've heard of CSS expressions before, and the msdn doco on it is pretty skimpy, so i never really knew what they were. They're not talked about that much, so i never found out.


But now i have. All i can say is that this is cool. Expressions in CSS are an IE 5+ only thing. This doesn't worry me, as our target platform that we target our applications at work already stipulates IE 5.5 or greater, and i prefer IE myself anyway. All you freaky firefox, mozilla, opera and safari wierdo scum just have to live without :P (don't flame me, i know you probably don't want it anyway - you've got tabs, what else is there to wish for in a browser? *grin*)


Anyway, we needed to make a TBODY scrollable at work. It's been done before, but normally involves two table tags. My partner-in-code found out about expressions however, and it amazed me at how much power you could have. (have i used that term before? I think it's a good way of referring to the guy i'm currently coding with at work :)


An example is probably best. I wanted this (roughly..this is a simple sample):





































































































Col 1Col 2Col 3Col 4Col 5
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345
12345

And to do it, all that you need is this:


<STYLE type="text/css" media="screen">
#container
{
border
: solid 1px black;
width
: 50%;
height
: 150px;
overflow
: auto;
}
.noScroll
{
position
:relative;
top
:expression(this.offsetParent.scrollTop);
background-color
:white;
font-family
: Arial, Helvetica, sans-serif;
}
TH
{
text-align
: left;
}
</STYLE>
<div id="container">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<thead>
<tr class="noScroll">
<TH>Col 1</TH><TH>Col 2</TH><TH>Col 3</TH><TH>Col 4</TH><TH>Col 5</TH>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</tbody>
</TABLE>
</div>

Pretty cool huh? End result: javascript in CSS. Even to the level of having the 'this' object available. Sweet.


A quick item of note: You really need to set the background color on the row you don't want to scroll - if you don't, it stays transparent, and you can see the scrolling text behind the thead. Whoops :)


Of course, now i'm worried about CSS based virus's. Perhaps *.css needs to be marked as an unsafe attachment in Outlook :)




This Blog Hosted On: http://www.DotNetJunkies.com/


Comments: Post a Comment

<< Home

This page is powered by Blogger. Isn't yours?