By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,704 Members | 1,214 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,704 IT Pros & Developers. It's quick & easy.

Fade In Text

P: 8
I am having a memory block today and for the life of me cant seem to get it right.

Can someone help me with code to fade text in 8 seconds after the page has loaded.

This is what i have but i dont want it to appear straight away. How do i add an 8 second delay to the text fading in.??

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. col=255;
  5. function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 50); }
  6.  
  7. </script>
  8. </head>
  9.  
  10. <body onLoad="fade()">
  11.  
  12. <p>
  13. <span id="fade">This text needs to fade in with an 8 second delay.</span> 
  14. </p>
  15.  
  16. </body></html>
Feb 23 '07 #1
Share this Question
Share on Google+
18 Replies

acoder
Expert Mod 15k+
P: 16,027
Just use [HTML]<body onload="setTimeOut('fade()',8000)">[/HTML] Also set your text to be white initially.
Feb 23 '07 #2

P: 8
Why does this not work??

Am I missing something very obvious!!

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. col=255;
  5. function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 50); }
  6.  
  7. </script>
  8. </head>
  9.  
  10. <body onLoad="setTimeout'fade()',8000">
  11.  
  12. <p>
  13. <span id="fade">This text needs to fade in 8 seconds after page load!</span> 
  14. </p>
  15.  
  16. </body></html>
Feb 26 '07 #3

wgale025
P: 23
<body onLoad="setTimeout('fade()',8000)">
Feb 26 '07 #4

P: 8
Thanks

Silly me!! that works... but how do i get it to fade in from white to black - do i have to change the col numbers? Basically what i want is 8 seconds after page load i want the text to fade in.

im getting very confused! I have not tried to do fading before!!
Feb 26 '07 #5

P: 8
Thing is how do i cange the initial color to white so that after page load there is a delay of 5 seconds before text fades in from white to black?

This is my first attempt with fading and with some help with people from here i have come up with the following.



Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. col=255;
  5. function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 50); }
  6.  
  7. </script>
  8. </head>
  9.  
  10. <body onLoad="setTimeout('fade()',5000)">
  11.  
  12. <p>
  13. <span id="fade">This text needs to fade in 5 seconds after page load!</span> 
  14. </p>
  15.  
  16. </body></html>
  17.  
Feb 26 '07 #6

dorinbogdan
Expert 100+
P: 839
Update the span like:
[HTML]<span id="fade" style="color:white">This text needs ...[/HTML]
Feb 26 '07 #7

P: 8
Its the simple things that trip us up!!! Thanks
Feb 26 '07 #8

dorinbogdan
Expert 100+
P: 839
Glad to be of help.
Be blessed.
Feb 26 '07 #9

iam_clint
Expert 100+
P: 1,208
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="javascript">
  4. var r = 255;
  5. var g = 255;
  6. var b = 255;
  7. function fade(id) { 
  8. document.getElementById(id).style.visibility = "visible";
  9. document.getElementById(id).style.color="rgb(" + r + "," + g + "," + b + ")";
  10. r -= 5
  11. g -= 5
  12. b -= 5
  13. if(r>0) 
  14. setTimeout("fade('"+id+"')", 50); 
  15. }
  16. function startfade(id) {
  17. window.setTimeout("fade('fade');", 8000);
  18. }
  19. </script>
  20. </head>
  21. <body onLoad="startfade('fade');">
  22. <p>
  23. <span id="fade" style="visibility: hidden;">This text needs to fade in 8 seconds after page load!</span> 
  24. </p>
  25. </body></html>
  26.  
theres a fixed up example now you can change r g b individually.
Feb 26 '07 #10

acoder
Expert Mod 15k+
P: 16,027
Threads merged.
Feb 27 '07 #11

P: 4
Clint:

Thank you so much. I tested your code you gave above on one of my web pages (fading text from black to white on a black background) and it works great, giving the page more life. Is it possible to add an array of colors to it; for instance to make some additional text on the same page fade into red?

Thanks again
Nov 17 '09 #12

acoder
Expert Mod 15k+
P: 16,027
What you can do is pass the colour to the function (as RGB triple) which you can use to determine when to stop.
Nov 18 '09 #13

P: 4
Thank you for your reply acoder. Unfortunately with my extremely limited coding knowledge I wouldn't be able to implement your suggestion. Actually, after hours of playing with it I've not even been able to make the code work on more than one section of text. When I attempt to fade a second section, the other one stops working...let alone adding a second color to it.
If you get the opportunity I would greatly appreciate if you would please show me how to do it.

Thank you

The test page on my website shows the white text fading in properly. Now I'd like to fade in the red heading above it in the same way, "Latest News," and similar headings on the other pages.
http://www.billyjoeconor.com/home_test.html
Nov 18 '09 #14

acoder
Expert Mod 15k+
P: 16,027
Rather than make r,g,b global, you can have them as parameters, e.g.
Expand|Select|Wrap|Line Numbers
  1. function fade(id, r, g, b) { 
and pass them when you call the function:
Expand|Select|Wrap|Line Numbers
  1. fade('fade',0,0,0)
You may also want to specify the end color, e.g.
Expand|Select|Wrap|Line Numbers
  1. function fade(id, r, g, b, end) { 
  2. ...
  3. if (r < end) { ...
To use the function more than once, give the heading an ID and call the function with that ID and correct parameters.
Nov 20 '09 #15

P: 4
Thank you very much. I'll give it a try.
Nov 20 '09 #16

P: 4
After spending hours on it I'm still not getting anywhere.

When you get a chance, would you please give me more to start with?

Thanks
Nov 22 '09 #17

acoder
Expert Mod 15k+
P: 16,027
OK, you have two problems:
1. Set your own colours.
2. Use multiple times on the same page.

Let's deal with the first one first. What have you got here (or the closest you got to something working)?
Nov 30 '09 #18

P: 1
@footloose
I tried but it's showing me that line 9 and 10 are having invalid arguments
Apr 10 '14 #19

Post your reply

Sign in to post your reply or Sign up for a free account.