27th July, 2005

Image fades for overflow: auto

Here’s a no-brainer for getting a bit more out of overflows. I love overflow: auto trickery (whereby specifying the height of a div and applying overflow: auto creates a mock iframe without all the accessibility headaches of the latter), but it always bugged me that whatever is being scrolled inside the div gets cut off crudely at the div’s base.

How do you encourage the user to keep scrolling to read the rest? I liked the way Mr. Inman had added the delicate fade at the base of the More browser window, and thought this might work well in the overflow. Haven’t looked how he did it, but here’s my overflow example. Read on for the simple solution.

image

A little extra CSS and XHTML

Starting with the CSS. Create an overflow div as normal, but make sure you specify position: relative. Also, note the stream_fade class. Again, mark it position: relative.

.stream {
position: relative;
width: 220px;
height: 236px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 0 5px 5px 0;
line-height:130%;
background-color:#FFF;
overflow: auto;
}

.stream_fade {
position: relative;
height: 40px;
width:205px;
margin-top: -41px;
}

With stream_fade, you’re basically creating a div that is the exact size of the fade PNG that will create the affect, and pulling it up (with a negative margin) over the overflow window. My image will be 40px high, but I’m pulling it up 41px to push it above the bottom border of my overflow window.

Next, one straightforward addition to the usual overflow div markup.


<div class="stream">
<p>All the stuff you wanna scroll goes in here.</p>
</div>
<div class="stream_fade"><img src="scripts/fade.png" 
alt="" width="205" height="40" /></div>

The fade image

Grab a 205px width x 40px height fade PNG. It’ll be there, but it’s white, so reach around for it. Be sure that your fade image is exactly the right width. It needs to be the width of the scroll area, minus the width of the actual scrollbars. Oh, and I wanted to use a PNG so that it would work with any background colour. If you’re clever, try it with a transparent gif, in order to avoid the next problem.

IE hates PNG

PNGs don’t work on IE. Bah! Make sure to stick your stream_fade class in another stylesheet for IE users, and hide it with display:none. Otherwise, they’ll see a big nasty block where the fade should be. Here’s how I’m hiding it from IE6. Firstly, this in the head of your page:


<!--[if IE 6]>
Stick your IE6 stylesheet links in here
<![endif]-->

And then place this alternative class in the IE stylesheet:


.stream_fade {
display: none;
}

Not exactly brain surgery…

...but it works, and helps me come to terms with overflows. View the example.

UPDATE: Many thanks to Musher for letting me know about this Javascript technique to handle PNG transparency in Win IE 5.5 or higher.

Prev / Next

Tags

If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.