Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Opacity - Fading Up Text (Simple Script)

Status
Not open for further replies.
MLR777

MLR777

Technical User
Aug 28, 2008
5
0
0
CA
Hello: I'm trying to get text to fade up in opacity. Using a simple model script like this (below), I can get the text to fade down in opacity but not up. I would appreciate help. Thank-you. MLR
==============================================
<script type="text/javascript">
function onloadMLR()
{
setInterval("startFadeMLR()",5);
}
function startFadeMLR()
{
var currentOpacityMLR=document.getElementById("textMLR").style.opacity;
if (currentOpacityMLR<1)
{
document.getElementById("textMLR").style.opacity+=0.02;
}
}
</script>
</head>
<body onload="onloadMLR()">
<div style="opacity : 0.0;" id="textMLR">TEXT</div>
 
Sort by date Sort by votes
On the face of it, your code appears fine. As you say - it doesn't work.

The key problem is with this line:
Code: 
document.getElementById("textMLR").style.opacity+=0.02;
The left of the line (document.getElementById("textMLR").style.opacity) returns a string. The += will perform a string concatenation (because the first part is a string). The reason it would work with -= is that it will always try to convert the left to a number.

It's not so easy using a += operator, so I've changed it to re-use one of the variables already set:
Code: 
document.getElementById("textMLR").style.opacity = parseFloat(currentOpacityMLR) + 0.02;
That change alone will make your code work.

I reworked the code you posted to be a little more friendly to other scripts that may be on the page, and easily configured. Have a look at the code and ask about anything you don't understand.
Code: 
...
<script type="text/javascript">
var FADE_FRAME_RATE = 5; // milliseconds between frames
var FADE_FRAME_AMOUNT = 0.02; // the amount of opacity to increase each frame
var timerHandle;

function onloadMLR() {
	timerHandle = setInterval("startFadeMLR('textMLR')", FADE_FRAME_RATE);
};

function startFadeMLR(nodeId) {
	var nodeToFade = document.getElementById(nodeId);
	if (nodeToFade.style.opacity == '') { // if opacity is not set then stop everything
		nodeToFade.style.opacity = 1;
	}
	var currentOpacityMLR = parseFloat(nodeToFade.style.opacity);
	if (currentOpacityMLR < 1) {
		nodeToFade.style.opacity = currentOpacityMLR + FADE_FRAME_AMOUNT;
	} else {
		nodeToFade.style.opacity = 1;
		clearTimeout(timerHandle);
		timerHandle = null;
	}
};

window.onload = onloadMLR;
</script>
</head>

<body>
	<h1>Test Fade Up Opacity</h1>
	<p style="opacity:0.0;" id="textMLR">Lorem ipsum dolor sit amet.</p>
...
Hope that helps!

Cheers,
Jeff

[tt]Visit my blog [!]@[/!] Visit Code Couch [!]@[/!] [/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Hi Jeff: Thank-you very much for your extensive answer. Your script works excellent. I understand what you did and where I went wrong. I have a couple follow-up secondary questions ?
1) Why do you use clearTimeout(), where I would have expected clearInterval(), since setInterval() is used in this script.
2) is ... opacity:0.0; now the stand-a-lone (multi-platform browser) accepted standard ? or is it still safer to use ... filter : alpha(opacity=50); -moz-opacity : 0.50; opacity : 0.50;
Finally, just a note incase you're wondering ... as a beginner, I use the MLR in my variable names so I can easily distinguish my function and variable names from JavaScript native names (after a few weeks I may have forgotten how I built the script). Thank-you, MLR.
 
Upvote 0 Downvote
1) Because I forgot to change it back to using clearInterval() -- I was using setTimeout() to see if it would be any less CPU intensive for this task.

2) Use Opacity for all browsers except old ones (IE6, Fx1.5 for example). I wouldn't bother using the filter or -moz if you didn't need to support these legacy browsers.

Cheers!
Jeff

[tt]Visit my blog [!]@[/!] Visit Code Couch [!]@[/!] [/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Hi Jeff (BabyJeffy): Thanks again. MLR777
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
234
MDGarcia
MDGarcia
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
84
feherke
feherke
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
66
Samthyr
Samthyr
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
140
berkshirea
berkshirea
Krus1972
  • Locked
  • Question
Pop-up Blocker Detecter
Replies
1
Views
54
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top