PDA

Click to See Complete Forum and Search --> : I am looking for a somewhat basic script...fade out effect.

soulflycrx
04-07-2003, 10:53 PM
I have a web page. I want the entire page to fade to black when the user clicks a link to visit another part of the site. When then user enters the new page, I want the page to fade from black, to reveal what is on the new page.

I guess you can say it is like a "fade to black....fade from black" transition between two web pages.

I have searched the web, but I don't think I have found something that I can use. If possible, it should work across most browsers.

If anybody knows a link to a site that can explain this to me, I would love to check it out!

Thanks
Jona
04-07-2003, 11:58 PM
Try www.dynamicdrive.com they probably have what you're looking for.
Nedals
04-08-2003, 12:49 AM
I wrote this a couple of years back..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>Untitled</title>
<script type="text/javascript">
<!--
//Screen fade
function hex(i) {
/* decimal to hex conversion*/
var hexa=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
if (i<0) return "00";
else if (i>255) return "ff";
else return hexa[Math.floor(i/16)]+hexa[i%16];
}

function setcolor(r,g,b) { document.bgColor="#"+r+g+b; }

function fade(sr, sg, sb, er, eg, eb, ss) {
for(i=0; i<=ss; i++) {
rr=hex(Math.floor((sr*(ss-i) + er*i)/ss));
gg=hex(Math.floor((sg*(ss-i) + eg*i)/ss));
bb=hex(Math.floor((sb*(ss-i) + eb*i)/ss));
setcolor(rr,gg,bb);
setTimeout("setcolor(rr,gg,bb)",500);
}
}
//-->
</script>
</head>

<body>

<form name="form1">
<input type="button" value="Press to run fade" onClick="fade(0,0,0,255,255,255,200)">
</form>

</body>
</html>
Jona
04-08-2003, 12:50 AM
Originally posted by nedals
I wrote this a couple of years back..

:o *Jaws drop* You've known JavaScript for years? Wow! I just started learning like May of last year...
Nedals
04-08-2003, 01:05 AM
And still learning :)
Jona
04-08-2003, 01:07 AM
Like you could ever stop learning more Javascript... :D
soulflycrx
04-08-2003, 08:37 AM
Could that be applied, so it fades out whenever somebody leaves the page? Wether its through a linked text, or linked button, or whatever. So basically, anywhere there is a hyper link, the page will fade?

For example. I have an image that says "enter". When the user clicks on the image, it should fade to black and link to the next page. Then on the next page, fade from black. How could I modify the above script to be like that?

Sorry if I seem stupid, I am a beginner. But I am learning quickly.
Nedals
04-08-2003, 01:47 PM
Do you understand what this line is doing?

<input type="button" value="Press to run fade" onClick="fade(0,0,0,255,255,255,200)">

The first 3 values are the starting color (in decimal), 'black' and the second 3 are the finish color, 'white'.

Instead of the button, use
onLoad = "fade(0,0,0,255,255,255,200)">
and
onUnLoad = "fade(255,255,255,0,0,0,200)">

I'm not 100% sure if this will work but try it and see.

You may also want to move the javascript into an external file since this code will be required on each page and you can then link in the external file (less coding per page)
soulflycrx
04-08-2003, 10:20 PM
You may also want to move the javascript into an external file since this code will be required on each page and you can then link in the external file (less coding per page)

How do I do that? Please excuse my ignorance.
Nedals
04-09-2003, 12:53 AM
Copy everything enclosed within the <script...></script> tags (but not the <!-- or the //-->)
and paste into a new file. Call it fade.js (any name is ok but note the .js)

If you have no other javascript on your HTML page, delete <script...>....</script> and add this line where it used to be

<script type='text/javascript' src='fade.js'></script>

If you do have more javascript, add the line above or below (not within) your <script...></script> tags