View Full Version : Fading Page on scrolling {CSS + HTML}

07-22-2008, 08:33 AM
1) CODE TITLE: Fading Page on scrolling

2) AUTHOR NAME: Faqir Muhammad Bilal

3) DESCRIPTION: See the URL below

4) URL TO CODE: http://tfos.webng.com/tfos.html link updated

Effect Now More Noticeable

07-22-2008, 12:59 PM
Nice! Did you make this?
It'd be nicer if it didn't require so many divs, like if you could use javascript to generate all the divs.
It also doesn't work in IE.

07-22-2008, 03:00 PM
I did made this.

It wouldn't work in IE6 and prior versions, because they don't support fixed positioning. But I have an Idea, that I have yet to try, that might make it work in IE6 as well.

Javascript could have been used to generate all those divs, but I like to see simple CSS do unusual stuff like that.

07-22-2008, 04:23 PM
Would be nicer with a PNG. It could be, say, 110, and all of the code would be reduced to one <div> and two style rules.

07-22-2008, 05:26 PM
Barely noticeable.

07-22-2008, 09:20 PM
Yes, Tweys idea was better.
If it doesn't work in IE 7, why are you putting the gross "filter: alpha(opacity=...)?"

07-22-2008, 11:37 PM
Yes, Tweys idea was better.
If it doesn't work in IE 7, why are you putting the gross "filter: alpha(opacity=...)?"

A good point.

But there is no reason why it couldn't work in IE 7. IE 7 handles fixed positioning properly, so there is probably some other error in the code as regards (probably the filter, but it could be just about anything) IE 7 that is stopping it from working in that browser.

07-23-2008, 03:54 AM
I don't have IE7. I didn't try this code, on it. I believed, it should work on it.
But I'll see it on the IE7, and revise the code as soon as I can .

07-23-2008, 10:09 AM
I've just updated the Code
It's now more noticeable. The fading bar is now three times it's previous height. Please see the demo link.

07-23-2008, 10:37 AM
That is a bit more noticable. I think I know why, or at least one reason why the effect isn't working in IE 7. This is how your source code looks to that browser:

<!-- Free Hosting WebNG.com -->
<script type="text/javascript" charset="utf-8">
var redvase_ad = { version: 1.5 };
redvase_ad.publisher = 'webng';
redvase_ad.kind = 'leaderboard';
redvase_ad.content = 'creative'
<script src="http://redvase.bravenet.com/javascripts/redvase.js" type="text/javascript" charset="utf-8"></script>
<!-- Free Hosting WebNG.com -->
"-//W3C//DTD HTML 4.01 Transitional//EN"


<style type="text/css">

body {
margin: 0px;
padding: 0px;
background: white;
. . .

Now I am assuming that the part before the DOCTYPE is placed there by the host and that there is nothing you can do about it. However, having anything before the DOCTYPE throws IE 7 into quirksmode, where it doesn't do fixed positioning.

07-23-2008, 11:20 AM
Thanks for pointing this out! Yeah, it's my web host that placed those lines of code.

Can you please try removing the the lines before the the DOCTYPE, and save it as an HTML document, and see if it works in IE7? I don't have IE7 available to me at the moment.

And Thanks once again for pointing this out.

07-23-2008, 02:42 PM
I didn't even think to do that, it was late when I noticed it. I just tried it, and it works fine in IE 7 once that bit of server added code is removed.

07-23-2008, 02:49 PM
Great! So it works in IE7.
Many Thanks jscheuer1, for trying it out!!