PDA

View Full Version : 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:

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?

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

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

Resulting:

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

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

You could use my FadableObject (http://www.twey.co.uk/?q=fading) script:
<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 :p