Mobile Friendly Website


Doing it with style

fade scroll COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

I posted this message on the wrong page, so here it is on the correct page:

Stu, when did overflow:auto; or scroll for that matter start to function with the middle wheel? I always remembered the scroll bar only working with the cursor in IE, no middle wheel. I don't recall your layouts with div scroll bars being middle wheelable. This is great, do tell more. Thanks

(17.12.2005, 21:39)

Tim, as far as I know the mousewheel has worked for some time in IE (certainly with IE6). There was a problem with FF, but that has been sorted with v1.5
(17.12.2005, 22:50)

very impressive for the idea and result, great!
(18.12.2005, 06:08)

Stu you can use a IE conditonal comment and server alternate styles for IE5.0 and IE5.5 and IE6.0 (WIN)
html .fade_bottom {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/menu/graphics/fade_bottom.png');
background-image: none;
background-repeat: repeat;
html .fade_top {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/menu/graphics/fade_top.png');
background-image: none;
background-repeat: repeat;
for IE5.0 (use the same image as you would for png, that is same dimensions but make it a non-transparent.gif)
html body .fade_bottom {
filter:alpha(Opacity=40); /* adjust at will */
background-image: url(/menu/graphics/fade_bottom.gif);
html body .fade_top {
background-image: url(/menu/graphics/fade_top.gif);
To seperate the styles for IE5.0 I use:

html body for IE5.0
html for IE5.5 and IE6

and an import hack for IE5.0 inside comments

@media tty {
i{content:"\";/*" "*/}}; @import 'ie50.css'; {;}/*";}
}/* */

Not sure about html div.fade_top or html .fade_top ?
(19.12.2005, 14:31)

Jo-an, I could, but this site is CSS only, no javascript and no proprietory styling. I have dropped any further Opacity demos for this reason until the main browsers take up w3c opacity recommendations.
(19.12.2005, 14:35)

Hey Stu, back in 2001 I designed a site that I never actually put out onto the web until now. It did a fading-scroll, like you've done with CSS.
You can see it here:
While I did not stick strictly to CSS, I think the effect is pretty cool. I scoured the web trying to find other examples of this, and I couldn't find any back then. This might have been the first.
You also might find my nav menu interesting. One menu item expands to a submenu.
There is also a link at the bottom of the navigation frame. It resizes the frame. Again, I scoured the web prior to writing the script, but was unable to find anyone who had done this.
There is a link to a pseudo-dropdown menu I designed so that I could totally customize the way a dropdown menu looks, but I never did add it to the page.
The Javascript file is well commented.
* NOTE: I didn't try to cross-browser the site. It was designed for IE 5.5 or 6 (I'm not sure which it was). If any of these codes are cross-browser, I'd love to know.
To contact me, there is an email form at my blog:
(03.01.2006, 22:40)

Dave, looks interesting but only works in IE.
(03.01.2006, 23:10)

It may have been since your DEC 18th opera tweak, but the fade effect no longer works in Firefox. I have seen it working, wether it was before december 18th I can only guess. I am using Firefox 1.0.7 I know this isn't the most recent, but I was wondering how come you managed to get it to work in 1.0.7 before, but not now?
(31.01.2006, 14:49)

Upgraded to 1.5, works fine. Did they tweak for Opera compromise support for The last Firefox browser. I suppose its not that serious. I mean, an assumption that can be made of Firefox users rather then IE users is that they are likely to update frequently and whenever there is a new version. (myself discluded, but I don't count, im lazy).
(31.01.2006, 15:08)

the fade out scolling doesn't seem to work anymore...(other than IE/gifs). what changed?
(03.02.2006, 15:22)

..oh yeah...whoops
(03.02.2006, 15:35)

Doen't work under Safari 2.0.3 (OSX 10.4.5)
I think there are no gifs nor pngs here =) But Safari shows png correctly.
(10.03.2006, 09:44)

I am trying to add this feature to your Photo Gallery Mk II so that the horizontal thumbnails fade in and out as your scroll. I am not a CSS pro but can you give me some guidance on what needs to be modified?
(14.03.2006, 03:35)

Peter, you will need to restyle the fade_top and fade_bottom. Also required will be two png/gif files for left and right fadeout instead to top and bottom fadeout.
(14.03.2006, 11:47)

Stu, I wrote earlier about adding the fade to the photo gallery mk II.

Am I having trouble because instead of trying to fade out text I am fading out another backgroud image? The fade_left and fade_right png's load above the thumbnails thus creating a vertical scroll bar in the scrollbox. Why am I unable to place the fade pngs over the thumbnails?
(19.03.2006, 03:07)

Scrolling Demo question:I placed Name attributes in the scrolling demos (Table/ Fade Scrolling), they work with hyperlinks in browsers fine but don't validate as they can't be placed in an id. Wonder if there is a way to link to bookmarks within scolling divs?
(02.05.2006, 05:45)

hello this very good
(16.07.2006, 19:35)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page