Log in

View Full Version : newbie question and help please


bm777
03-22-2010, 06:40 AM
HI All,

new to this, so please don't shoot me down in flames!! I need help in creating a script to "fade in" some text. All it has to do is to fade in say the word home and that's it, no looping, no repeating, etc. easy right?

I have searched but nothing even close..so any help would be greatly appreciated.

thanks in advance

gb
Schmoopy
03-22-2010, 07:38 AM
If you want to do this with little effort, then using jquery might be an option.

Download it from here: http://jquery.com/

Save it in the same folder as the HTML file you want to fade in the text with.

Then make a test HTML page, and put the following in it:



<html>
<head>
<title>Fade In Text</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#text').fadeIn(500);
});

</script>

<style type="text/css">
#text{
display:none;
}
</style>

</head>
<body>
<span id="text">Text you want to fade in</span>
</body>

</html>


Should do the trick. Not strictly valid HTML, but I know it works, should be able to go from there.

Good luck.
bm777
03-22-2010, 09:11 PM
Hi Schmoopy and thank you for your reply..may I be a pest and ask one other little question please? font size, color and background color, where do I insert those variables?

thanks again for your patience

gb
Schmoopy
03-22-2010, 09:56 PM
For those, you'll want to alter the CSS:



<html>
<head>
<title>Fade In Text</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#text').fadeIn(500);
});

</script>

<style type="text/css">
#text{
display:none;
color:#FF0000;
font-size:24px;
background-color:#000000;
}
</style>

</head>
<body>
<span id="text">Text you want to fade in</span>
</body>

</html>


The above will make the text red, the background of the text black and the text size to be 24 pixels. Try something like http://www.colorpicker.com to choose a colour and replace the #XXXXXX bit with whatever colour you like.
bm777
03-22-2010, 10:23 PM
HI Schmoopy, thanks again for the great help, and I have downloaded colorpicker. It looks like an indispensable tool to have and a great one too.

Thanks again for all the help and your patience

gb:)
bm777
03-23-2010, 10:24 PM
I have tried to insert this code in a test web page and tried to validate it, but it returns errors:
"The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed)."
BLiZZaRD
03-23-2010, 10:36 PM
Change:



<body>
<span id="text">Text you want to fade in</span>
</body>


to...



<body>
<div><span id="text">Text you want to fade in</span></div>
</body>
Schmoopy
03-23-2010, 10:55 PM
I did say it wasn't valid HTML :p
bm777
03-24-2010, 08:17 AM
Hahaha...marvellous, thanks guys, it works great...thank you for all your help and patience!!

gb:)