PDA

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



bilal
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

CODE UPDATED
Effect Now More Noticeable

Nile
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.

bilal
07-22-2008, 03:00 PM
:)Thanks.
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.

Twey
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.

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

Nile
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=...)?"

jscheuer1
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.

bilal
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 .

bilal
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.

jscheuer1
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 -->
<center>
<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>
<script src="http://redvase.bravenet.com/javascripts/redvase.js" type="text/javascript" charset="utf-8"></script>
</center>
<!-- Free Hosting WebNG.com -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<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.

bilal
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.

jscheuer1
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.

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