PDA

View Full Version : probelm with css element being affected by javascript

dmm1285
06-17-2001, 02:43 PM
I am attemting to make a fade animation of some text with javascript and using the csss elemtn opacity. This is what I have so far :

<html>
<head>
<script language="JavaScript">
function subtractOne() {
var cool = 'me';
document.write('<div id="teletext" style="position:absolute; top:500; filter:alpha(opacity=100);">'+cool+'</div>');
var newValue = (teletext.filters.alpha.opacity - 1);
teletext.filters.alpha.opacity = newValue;
if (newValue > 0) {
myTimer=setTimeout("subtractOne()",1000)
}else{
clearTimeout("myTimer")
}
}
function getStarted() {
myTimer=setTimeout("subtractOne()",0)
}

</script>
</head>
<body onLoad="getStarted()">

however, I am getting a strange error. Since I am new to javascript, I would apprercitate some help or an easier way to do this.
prodeveloping
06-17-2001, 04:50 PM
I am not getting an error. It just doesn't do anything.
dmm1285
06-17-2001, 05:09 PM
Ok this is what I want



<!-- THREE STEPS TO INSTALL TELETYPE SCROLLER:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<STYLE>
.telestyle {
position:absolute;
visibility:visible;
font-size:8pt;
font-family:Arial;
font-weight:normal;
color:#000066;
top:300px;
left: 60px;
height: 32px;
width: 500px;
filter:alpha(opacity=100);
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: John O'Brien (obrien@lis.net.au) -->
<!-- Web Site: http://www.lis.net.au/~obrien -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var message = "Try this script today!"
var character = 0;
var to_print = "";
var ypos = 300;
var next = 0 ;
var fade = 100 ;
var next_message = new Array() ;
next_message[0] = "The JavaScript Source"
next_message[1] = "Is your site slow...uninteresting...static? JavaScript™ can bring your pages to life!"
next_message[2] = "Add this script to your site!"
next_message[3] = "Do your pages take an age to load?"
next_message[4] = "Try this script today!"
function doText(text) {
if (document.all) {
if (character <= text.length - 1) {
to_print += text.charAt(character);
teletext.innerHTML = to_print;
character++;
}
else
scrollIt();
}
setTimeout("doText(message)", 100);
}
function scrollIt() {
if (ypos >= 260) {
ypos -= 1;
fade -= 4;
if (ypos < 265) {
teletext.innerHTML = "" ;
}
}
else {
ypos = 300;
character = 0;
to_print = "";
nextMessage();
fade = 100;
}
teletext.style.top = ypos;
teletext.filters.alpha.opacity = fade;
}
function nextMessage() {
message = next_message[next]
if (next == 4) {
next = 0;
}
else
next++;
}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad="doText(message)">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<DIV ID=teletext CLASS="telestyle">
</DIV>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 2.27 KB -->


This script types out the messages in the array, then scolls them up and fades them away. What I want is it to just fade the words away. Whenever I try editing it, the script ends up not doing anything. Could anyone help?