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, 1×10, 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

Originally Posted by Nile

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:

Code:

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

Thread: Fading Page on scrolling {CSS + HTML}

Thread Tools

Search Thread

Fading Page on scrolling {CSS + HTML}

Bookmarks

Bookmarks

Posting Permissions