Fading?

**Nirvanic** · 01-13-2007, 01:51 AM

Okay. So, I'm an amateur website creator. I like to throw stuff together in my spare time and think that they're wonderful! Well, I'm currently making a website for a friend. I kind of owe this person.. so I promised to do anything they wanted me to, within my limit. And therein is my diliemma! See, my friend wants this special feature thing, where the pages in a frame "fade in" instead of just "blinking" up. I'm not sure how else to describe it... I refuse to post the site, due to some laughter I might receive, but if anyone could possibly explain to me if this can be done or not, I'd appreciate it! Ohhh, and if it could be done, point me in the right direction of where I can find the code? xD

**mburt** · 01-13-2007, 02:08 AM

Meh. Simple fix:

Code:

window.onload = fade
var i = 0
function fade() {
if (i < 100) {
	i=i+10
	}
var d = document.body.style
d.filter = "alpha(Opacity="+i+")"
d.opacity = i/100
var num = document.all ? 10 : 100
setTimeout("fade()",num)
}

**Nirvanic** · 01-13-2007, 02:10 AM

Woah, thanks!

Now.. where do I put it? o.o

**mburt** · 01-13-2007, 02:12 AM

You know how your html layout is done?

Code:

<html>
<head>
</head>
<body>
</body>
</html>

It goes in the <head> of your document (highlighted in red).

Oh, you also have to surround the code I gave you with this tag:

Code:

<script type="text/javascript">...</script>

Resulting:

Code:

<html>
<head>
<script type="text/javascript">
window.onload = fade
var i = 0
function fade() {
if (i < 100) {
	i=i+10
	}
var d = document.body.style
d.filter = "alpha(Opacity="+i+")"
d.opacity = i/100
var num = document.all ? 10 : 100
setTimeout("fade()",num)
}
<script>
</head>
<body>
</body>
</html>

**Nirvanic** · 01-13-2007, 02:15 AM

Oh!

So this will work with the pages displayed in the frame?
I only ask because it seems so simple.. and I was expecting something with the "iframe" or whatever tag in it.

**mburt** · 01-13-2007, 02:18 AM

Apply that code to the page in the frame.

**Nirvanic** · 01-13-2007, 02:23 AM

You rock. <3

**mburt** · 01-13-2007, 02:23 AM

Thanks

**Twey** · 01-13-2007, 02:55 PM

Urgh... browser detection

You could use my FadableObject script:

Code:

<script type="text/javascript" src="http://www.twey.co.uk/includes/FadableObject.js"></script>
<script type="text/javascript">
  window.onload = function() {
    (new FadableObject(document.body, 1, 10, 0, 100, true, true)).fadeIn();
  };
</script>

setTimeout("fade()",num)
}
<script>

That should be </script>. Also, setTimeout(fade, num) would be preferable: using strings with setTimeout() is usually unnecessary, and tends to require global variables, making it worse than eval().

**mburt** · 01-13-2007, 03:32 PM

It's always about YOU isn't it, Twey. Just joking lol.. you are more right, I just thought of that script when this was posted, I didn't even test it

Thread: Fading?

Thread Tools

Search Thread

Fading?

Bookmarks

Bookmarks

Posting Permissions