Fading?

Printable View

01-13-2007, 01:51 AM
Nirvanic

Fading?

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
01-13-2007, 02:08 AM
mburt

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) }
01-13-2007, 02:10 AM
Nirvanic

Woah, thanks!

Now.. where do I put it? o.o
01-13-2007, 02:12 AM
mburt

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>
01-13-2007, 02:15 AM
Nirvanic

Oh! :D

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.
01-13-2007, 02:18 AM
mburt

Apply that code to the page in the frame.
01-13-2007, 02:23 AM
Nirvanic

You rock. <3
01-13-2007, 02:23 AM
mburt

Thanks :)
01-13-2007, 02:55 PM
Twey

Urgh... browser detection :p

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>

Quote:

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().
01-13-2007, 03:32 PM
mburt

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 :p