Fading Text

F

Freightliner

Hi,

this script here displays a fading text message.
I would like to display 3 different messages, let's say "Fading text
1", "Fading text 2", "Fading text 3".

Also, is there a way to make it work under FireFox too?

Thank you very much for help




<SCRIPT LANGUAGE="JavaScript1.2">

ie4 = ((navigator.appVersion.indexOf("MSIE")>0) &&
(parseInt(navigator.appVersion) >= 4));
var cnt = 0, cnt2 = 0, add1 = 3, add2 = 10, timerID;

function show() {
if (ie4) {
cnt += add1;
cnt2 += add2;
delay = 30;
if(cnt2 > 100) cnt2 = 100;
if(cnt > 100) {
cnt = 100;
add1 = -10;
add2 = -3;
delay = 350;
}
if(cnt < 0) cnt = 0;
if(cnt2 < 0) {
cnt2 = 0;
add1 = 3;
add2 = 10;
delay = 200;
}
fader.style.filter = "Alpha(Opacity="+cnt2+",FinishOpacity="+cnt
+",style=2)";
timerID = setTimeout("show()", delay);
}
}
window.onload = show;
</script>

</head>

<body bgcolor="#9B3600">

<center> <div id="fader" style="width:480;
Filter:Alpha(Opacity=0,FinishOpacity=0,style=2)">
<h4> <font family="Arial, Helvetica" color="#FFFFCC">
FADING TEXT 1
<br><br></font></h4> </div> </center>


</body>
</html>
 
J

Jeremy J Starcher

Hi,

this script here displays a fading text message. I would like to display
3 different messages, let's say "Fading text 1", "Fading text 2",
"Fading text 3".

Also, is there a way to make it work under FireFox too?
Click to expand...

Best option: Scrap this code. Really.

This code is *ancient* dating back to the early days of Javascript (as
can be seen by the LANGUAGE="JavaScript1.2" and the use of a variable
called "ie4" as well as use of appVersion.

Cross-platform transparency is possible, though requires feature
detection as well as a graceful fall back. Personally, I try to avoid
visual effects for their own sake, so I don't have an example to toss at
you.

I'm assuming you snagged this from one of the many useless code samples
on the net. Can't blame you, thats how I learned and than had to unlearn.

Take a peek at this:
<URL: http://www.mopedepot.com/jjs/HowToRecognizeBadJavascriptCode.html >

Might help you in picking out better examples to learn from.

(Ack: I didn't upload the final copy of that? Oops. Oh well, that copy
is up-to-date enough to be useful.)
 
F

Freightliner

I'm assuming you snagged this from one of the many useless code samples
on the net.  
Click to expand...

Or this one, even better (I just'd like to have the 3 writings to fade
on each other, in the same position)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Fade In Text</title>
<style type="text/css">
body, table, div{color:#333;font:bold 11px Verdana, Arial, sans-
serif;}
.title{background:#F2F2F2;border:1px #CCC solid;padding:5px;text-
align:center;}
.tblFade{border:1px #333 solid;width:150px;margin:175px;}
.fadeElem{height:20px;display:block;position:relative;border:1px #CCC
solid;padding:3px 10px;}
</style>
<script type="text/javascript">
<!--

var fadeSteps = 20;
var fadeDelay = 20;
var nextSetDelay = 1000;
var loopPrepend = true;
var totMsg = 3
var arMessage = new Array("Fade-In Message 1", "Fade-In Message 2",
"Fade-In Message 3");
var elIdx = 0, msgIdx = 0, fadeStep = 0;
var fadeElem;
var msgLen = arMessage.length;
function fadeMsg(){
if(elIdx == totMsg || (!loopPrepend && (msgIdx == msgLen))){
if(elIdx != totMsg)msgIdx = 0;
elIdx = 0;
setTimeout('fadeMsg()', nextSetDelay);
}else{
if(msgIdx == msgLen)msgIdx = 0;
if(elIdx == 0){
for(var i=0;i<totMsg;i++)
{setOpacity(document.getElementById('fadeElem'+i), 0);}
}
fadeStep = 20;
fadeElem = document.getElementById('fadeElem' + elIdx);
fadeElem.innerHTML = arMessage[msgIdx];
fadeStep = 0;
elIdx++;
msgIdx++;
fadeIn();
}
}
function fadeIn() {
if(fadeStep > fadeSteps){
fadeMsg();
return;
}
setOpacity(fadeElem, (fadeStep/fadeSteps));
fadeStep++;
window.setTimeout("fadeIn()", fadeDelay);
}
function setOpacity( el, opacity){
if(el.style.opacity != undefined){
el.style.opacity = opacity;
}else if( el.style.MozOpacity != undefined){
el.style.MozOpacity = opacity;
}else if ( el.style.filter != undefined){
el.style.filter="alpha(opacity=" + Math.round(opacity * 100) +
")";
}
}
//-->
</script>
</head>

<body onload="fadeMsg()">
<center><table class="tblFade" cellspacing="0" cellpadding="0">
<tr><td class="title">Title</td></tr>
<tr><td>
<div class="fadeElem" id='fadeElem0'></div>
<div class="fadeElem" id='fadeElem1'></div>
<div class="fadeElem" id='fadeElem2'></div>
<!-- div class="fadeElem" id='fadeElem3'></div>
<div class="fadeElem" id='fadeElem4'></div-->
</td></tr>
</table></center>
</body>
</html>
 
J

Jeremy J Starcher

Or this one, even better (I just'd like to have the 3 writings to fade
on each other, in the same position)
Click to expand...

This code looks "better" but needs some help yet.

Worst problem: This code does not 'fail gracefully' or downgrade if
Javascript is NOT available. Any information that is shown here will not
be available to blind users, or most people on cell phones, or anyone who
turns of JS for security reasons. (A number of larger corps filter
javascript at the firewall.)


I will address the script as I found it, then put more comments at the
end on how to improve it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Click to expand...

Switch to an HTML 4.01 strict doctype. XHTML has many well discussed
issues.

Change the said:
<!--
Click to expand...
Lose these. Not a show stopper not been required in almost a decade.
If XHTML actually *worked* this would have commented out the whole script
and broken things.

var arMessage = new Array("Fade-In Message 1", "Fade-In Message 2",
"Fade-In Message 3");
Click to expand...

That isn't "bad" way to code an array, but there is a nicer way to write
it. However, none of this stuff should be here.

var arMessage = {
"Fade-In Message 1",
"Fade-In Message 2",
"Fade-In Message 3"
};



This is the section I'd look at hardest. Opacity support varies from
browser to browser and I'd want to double-check what this code runs on.
At least it does feature teasing rather than browser sniffing. Alas, I'm
not qualified to say how 'good' it is, and I'm not interested enough to
research it.
function setOpacity( el, opacity){
if(el.style.opacity != undefined){
el.style.opacity = opacity;
}else if( el.style.MozOpacity != undefined){
el.style.MozOpacity = opacity;
}else if ( el.style.filter != undefined){
el.style.filter="alpha(opacity=" + Math.round(opacity * 100) +
")";
}
}


//-->
Click to expand...
This chunk needs to be lost as well.

</script>
</head>

<body onload="fadeMsg()">
Click to expand...


The layout needs a lot of help. center tags and tables for layout.
Don't copy this.


Some folks would advise checking that getElementById is fully supported
to avoid possible errors in primitive devices like cell phones and the
like. In addition, you should ensure that any important information is
available should Javascript NOT be available.

* * *
How to improve the script and make it fail gracefully:

My first idea would be quick and dirty. Put all of the text into the
DIVs or the SPANs so it is available, then use Javascript to 'extract
them' and fade them back in. Perhaps conditionally inline a style sheet
to set the DIV's to "hidden" when JS is available.

Change the array to a list of divs to extract the strings from and re-
fade in.
 
J

Jeremy J Starcher

* * *
How to improve the script and make it fail gracefully:

My first idea would be quick and dirty. Put all of the text into the
DIVs or the SPANs so it is available, then use Javascript to 'extract
them' and fade them back in. Perhaps conditionally inline a style sheet
to set the DIV's to "hidden" when JS is available.

Change the array to a list of divs to extract the strings from and re-
fade in.
Click to expand...

Figures I would remember something important after I posted.

In addition, pre-check the fade methods. If the message can't be faded
back in, don't get rid of it in the first place. That will handle
browsers that either don't support opacity or are not handled by your
code. (IIRC, Konqueror has its own way of setting opacity, but I don't
have that here at the moment.)
 
T

Thomas 'PointedEars' Lahn

Jeremy said:
Lose these. Not a show stopper not been required in almost a decade.
If XHTML actually *worked* this would have commented out the whole script
and broken things.
Click to expand...

XHTML *works*, and if this was served properly as application/xhtml+xml to a
capable UA (such as a Mozilla/5.0 based one), it would happen what you
describe. The problem is not the language, but the UA vendors and Web
developers that were/are not able to keep up. Unfortunately, the former is
the main cause for the latter. Why use and learn about something that is
not really supported?
That isn't "bad" way to code an array, but there is a nicer way to write
it. However, none of this stuff should be here.

var arMessage = {
"Fade-In Message 1",
"Fade-In Message 2",
"Fade-In Message 3"
};
Click to expand...

Confused Java and JavaScript? The above constitutes a syntax error:
ECMAScript Array literals are delimited by `[' and `]'. `{' and `}'
delimit Object literals (and execution blocks).
This is the section I'd look at hardest. Opacity support varies from
browser to browser and I'd want to double-check what this code runs on.
At least it does feature teasing rather than browser sniffing. Alas, I'm
not qualified to say how 'good' it is, and I'm not interested enough to
research it.
Click to expand...

Never compare against `undefined' this way. Besides being inefficient
(`!...' would have sufficed), the `undefined' literal it is not even defined
in some implementations, and untested read access of unknown properties is
generally error-prone.

if (typeof el.style.opacity != "undefined")
{

I think this branch is obsolete since quite a while:

https://bugzilla.mozilla.org/show_bug.cgi?id=281907

Firefox 1.5.x already supported the `opacity' property,
and it's life cycle ended on 2007-05-30.

}
else if (typeof el.style.filter != "undefined")
{
This chunk needs to be lost as well.
Click to expand...

As it is is nothing more than a single-line comment, it does _not_
*need* to be removed. However, removing it would be a good idea
as it serves no useful purpose.


PointedEars
 
J

Jeremy J Starcher

Confused Java and JavaScript? The above constitutes a syntax error:
ECMAScript Array literals are delimited by `[' and `]'. `{' and `}'
delimit Object literals (and execution blocks).
Click to expand...

Uh.. yea. Thinking in the wrong language again.


Never compare against `undefined' this way. Besides being inefficient
(`!...' would have sufficed), the `undefined' literal it is not even
defined in some implementations, and untested read access of unknown
properties is generally error-prone.
Click to expand...

I was under the impression that 'undefined' has been defined in most EMCA
implementations since recent history. Looks like I'll go check your
matrix again and refresh myself.

if (typeof el.style.opacity != "undefined") {


I think this branch is obsolete since quite a while:

https://bugzilla.mozilla.org/show_bug.cgi?id=281907

Firefox 1.5.x already supported the `opacity' property, and it's life
cycle ended on 2007-05-30.
Click to expand...

I had hoped someone who knew would chime up on that.

As it is is nothing more than a single-line comment, it does _not_
*need* to be removed. However, removing it would be a good idea as it
serves no useful purpose.
Click to expand...

*nods* Ill-chosen phrase there.
 
F

Freightliner

Change the array to a list of divs to extract the strings from and re-
fade in.
Click to expand...

Thank you for all your advices.
The page, at the moment, is
http://www.roberto089.com/index_TEST.html

I passed it thru the W3C validator.
With that Doctype declaration, I get 43 errors.
Most of them dont really make sense to me, such as

Line 6, Column 52: end tag for "meta" omitted, but OMITTAG NO was
specified.
<meta http-equiv="Content-Language" content="en-us">

Actually this tag is well closed. At least, this is what it seems to
me.

If I change the Doctype line to:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
and get rid of all what is in html tag, but <html>, the errors go down
to 3.

I'd really like to know what was wrong in the <meta> tag, before
asking you if using a loose doctype is a serious mistake or not. Since
you tell me I should use "strict", I believe it is.

Still, I have 3 validation errors on attribute height and bordercolor
(I use MS FP) plus that Style declaration not allowed.


Worst problem: This code does not 'fail gracefully' or downgrade if
Javascript is NOT available.
Click to expand...

This is what worries me the most.
How should I correct the page in order to be decent even if JS does
not work?
My first idea would be quick and dirty. Put all of thetextinto the
DIVs or the SPANs so it is available, then use Javascript to 'extract
them' and fade them back in. Perhaps conditionally inline a style sheet
to set the DIV's to "hidden" when JS is available.
Click to expand...

I really dont know how I could do this.
What I wish is, if JS is not available, the user to be able to see and
click the 2 big pictures, and all the 3 fading text lines to appear
static (and still readable).

thanks again for help
 
T

Thomas 'PointedEars' Lahn

Freightliner said:
I passed it thru the W3C validator.
With that Doctype declaration, I get 43 errors.
Most of them dont really make sense to me, such as

Line 6, Column 52: end tag for "meta" omitted, but OMITTAG NO was
specified.
<meta http-equiv="Content-Language" content="en-us">

Actually this tag is well closed. At least, this is what it seems to
me.
Click to expand...

Sorry, that's because you just don't know what you are doing:
If I change the Doctype line to:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
and get rid of all what is in html tag, but <html>, the errors go down
to 3.

I'd really like to know what was wrong in the <meta> tag,
Click to expand...

In XHTML, as the content model of the `meta' element is (and so its content
has to be) empty, it has to be

<meta http-equiv="Content-Language" content="en-us"/>

or

<meta http-equiv="Content-Language" content="en-us" />

or

<meta http-equiv="Content-Language" content="en-us"></meta>

The second form is said to be HTML-compatible by an informative Appendix of
the XHTML 1.0 Specification, but if HTML was truly an application of SGML
that form was not compatible to it, and instead would be the equivalent of

<meta http-equiv="Content-Language" content="en-us" /&gt;

in HTML, which is clearly invalid. Unfortunately the Specification's
authors have made the mistake to recommend relying on tag-soup parsing
here. Don't jump over their cliff.

Although it may seem so, the third form is Valid XHTML but it is not
HTML-compatible either. Unfortunately, declaring a close tag of an
element with an empty content model as optional, actually forbids it.
before asking you if using a loose doctype is a serious mistake or not.
Click to expand...

I would not consider it a serious mistake, at least HTML 4.01 Transitional
has the advantage of not being Web-incompatible XHTML anymore. However, you
should not use the Transitional variant when there is no need to, be it HTML
4.01 Transitional or XHTML 1.0 Transitional.
Since you tell me I should use "strict", I believe it is.
Click to expand...

Using the Strict variant certainly helps to separate markup and presentation
as deprecated presentational elements and attributes are considered not
Valid then. However, it has the distinct drawback that you cannot use the
`target' attribute anymore; for some reason, which is entirely beyond me,
the Specification's authors and the W3C membership have decided to deprecate
that attribute and wish it to be replaced by client-side scripting instead
that does not degrade gracefully.
Still, I have 3 validation errors on attribute height and bordercolor
(I use MS FP) plus that Style declaration not allowed.
Click to expand...
^^^^^^^^^^^^^
Do you see the problem?
This is what worries me the most.
How should I correct the page in order to be decent even if JS does
not work?
Click to expand...

Disable JS support. If it is still accessible after Ctrl+F5, you did it right.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
Freightliner said:
I'd really like to know what was wrong in the <meta> tag,
Click to expand...

In XHTML, as the content model of the `meta' element is (and so its content
has to be) empty, it has to be

<meta http-equiv="Content-Language" content="en-us"/>

or

<meta http-equiv="Content-Language" content="en-us" />

or

<meta http-equiv="Content-Language" content="en-us"></meta>

[...]
Although it may seem so, the third form is Valid XHTML but it is not
HTML-compatible either. Unfortunately, declaring a close tag of an
Click to expand...
^^^^^^^^^^^
an _end_ tag
element with an empty content model as optional, actually forbids it.
Click to expand...


PointedEars
 
S

SAM

Freightliner a écrit :
Thank you for all your advices.
The page, at the moment, is
http://www.roberto089.com/index_TEST.html

I passed it thru the W3C validator.
With that Doctype declaration, I get 43 errors.
Click to expand...


In XHTML :
- Tags that have not closing tag
such as META HR BR INPUT ...
must to be in auto-closing tag : <br /> <hr />
<meta http-equiv="Content-Language" content="en-us" />
- scripts are not allowed in the body
(you even have scripts bettwen tags TR and a TD)

You have somewhere 2 links with the 2nd without noting to click and
without closing tag :
<a class="opacityit" href="index.html">
<img border="0" src="images/awning_324x342.jpg" width="324"
Most of them dont really make sense to me,
Click to expand...

Perhaps "normal" HTML could have sens for you ?
(before to want to code in XHML)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Fading effect between play and play-over and pause and pause-over 0
Slideshow not working properly 2
Text does not display correctly to glow 2
How to position the *tooltip* comment on these buttons? 9
I Need Help with making a function that draws in a canvas using location data. 1
Show text on-click with transition 2
Help with my responsive home page 2
Index.php with bootstrap implementation and extern sites inclusion 0

Members online

No members online now.
Total: 70 (members: 1, guests: 69)
Robots: 49

Forum statistics

Threads
473,999
Messages
2,570,246
Members
46,841
Latest member
WilmerBelg

Latest Threads

Top