PDA

View Full Version : Fade-in Text Issues



mourenia
11-29-2005, 09:20 PM
I am new. I am learning. I would appreciate patience. Okay, so what I what to do is simply fade-in four lines of text at different locations on a page. This is what I have written. Not working. Suggestions? I've run out of ideas. I am creating web pages through adobe golive6, writing the source code myself, and previewing them with IE6.



<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>WCP Home Page</title>

<script language="javascript" type="text/javascript">

var rate = "250"; // change speed

var tnum = "1";
var t = new Array();
t[1] = "ABOUT US";
t[2] = "SERVICES";
t[3] = "EXPERIENCE";
t[4] = "CONTACT US";

var cnum = "1";
var c = new Array();
c[1] = "Black";
c[2] = "Gray";
c[3] = "Gainsboro";
c[4] = "WhiteSmoke";
c[5] = "White";


function fadein()
{
if(tnum < t.length)//if not all the text has been displayed, do the next statement
{
if(cnum < c.length-1)//if the text has not faded in completely, do the next statements
{
if (document.getElementByID("text"+tnum) != null)
{
text_fade=document.getElementById("text"+tnum);
text_fade.style.color=c[cnum]; //write the text with the associated color to the layer
text_fade.innerHTML=t[tnum];
cnum++;
}

}
else//if the text is faded in completely, do the next statements
{
cnum = 1;//reset color counter, prep for next text
tnum++;//increase text counter (go to next text)
}
setTimeout("fadein()",rate);//speed at which the color of text changes
}

}



</script>
</head>

<body bgcolor="black">

<div align="center">
<img src="Index%20Files/blank25.gif" alt="" height="158" width="25" border="0" ><br>
<img src="Index%20Files/samoa3.gif" alt="" height="211" width="772" border="0"></div>

<style type="text/css">
<div id="text1" style="absolute:position; left:460px; top:440px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text2" style="absolute:position; left:510px; top:500px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text3" style="absolute:position; left:560px; top:560px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text4" style="absolute:position; left:610px; top:620px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
</style>

fadein();

</body>

</html>


Thanks!

jscheuer1
11-30-2005, 03:08 AM
Your code is actually pretty good! There were a few novice type errors and two coding no no's that, although they don't stop the script from working, use more resources than needed.

Novice errors:

1 ) Anything inside this:


<style type="text/css">

</style>

Will be treated as pure style, valid or not, and therefore not displayed.

2 ) A free standing script call like your:


fadein();

hanging out all by itself in the body of the page without <script> </script> tags around it is meaningless. Here it is treated as text but, invisible because foreground default and set background are identical, see next.

3 ) When specifying a background color always specify a foreground color:


<body bgcolor="black">

The two javascript no no's:

1 ) The way you wrote the script, it will keep repeating (if it ever got started) even after it is finished its task. That is because at the end of each run, a time out is set to run it again. It is only when it gets back to the top that (if it is finished its work) it sees that there is nothing to do and yet, it will still set another time out, running on and on doing nothing.

2 ) Since 'text_fade' is a variable, it should be declared as such, otherwise its scope will be global (best case) or it may get confused by the script parser as an object, in which case nothing will happen.

There are other ways to tighten up this code and its markup but, with these changes, it runs well in IE, FF and Opera (image sources changed just because I don't like to look at x's when I am debugging code):


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>WCP Home Page</title>

<script type="text/javascript">

var rate = "250"; // change speed

var tnum = "1";
var t = new Array();
t[1] = "ABOUT US";
t[2] = "SERVICES";
t[3] = "EXPERIENCE";
t[4] = "CONTACT US";

var cnum = "1";
var c = new Array();
c[1] = "Black";
c[2] = "Gray";
c[3] = "Gainsboro";
c[4] = "WhiteSmoke";
c[5] = "White";


function fadein()
{


if(cnum < c.length-1)//if the text has not faded in completely, do the next statements
{
if (document.getElementById("text"+tnum) != null)
{
var text_fade=document.getElementById("text"+tnum);
text_fade.style.color=c[cnum]; //write the text with the associated color to the layer
text_fade.innerHTML=t[tnum];
cnum++;
}

}
else//if the text is faded in completely, do the next statements
{
cnum = 1;//reset color counter, prep for next text
tnum++;//increase text counter (go to next text)
}
if(tnum < t.length)//if not all the text has been displayed, do the next run through
setTimeout("fadein()",rate);//speed at which the color of text changes


}

onload=fadein;


</script>
</head>

<body bgcolor="black" text="white">

<div align="center">
<img src="spacer.gif" alt="" height="158" width="25" border="0" ><br>
<img src="spacer.gif" alt="" height="211" width="772" border="0"></div>


<div id="text1" style="absolute:position; left:460px; top:440px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text2" style="absolute:position; left:510px; top:500px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text3" style="absolute:position; left:560px; top:560px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text4" style="absolute:position; left:610px; top:620px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>



</body>

</html>

mourenia
11-30-2005, 10:50 PM
Thanks for all your help. It's working perfectly. Your tips were helpful as well. Working now on a smoother transition. It's a little choppy using only a few colors for the fade in. Looking into using an rgb loop. A bit confusing. Suggestions?

Thanks!
Wren

jscheuer1
11-30-2005, 11:19 PM
I actually worked on this a bit, it seemed interesting. I'm still not 100% satisfied with it (I'd like to make it a little more efficient and deal with the optional 'continuous effect' code differently) but, I used a hex color values in the existing loop:


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>WCP Home Page</title>
<style type="text/css">

#text1, #text2, #text3, #text4 {
position: absolute;
left: 360px;
top: 340px;
width: 250px;
height: 50px;
font-family: arial, sans-serif;
font-size: 18pt;
font-weight: bold;
}

#text2 {
left: 410px;
top: 400px;
}

#text3 {
left: 460px;
top: 460px;
}

#text4 {
left: 510px;
top: 520px;
}
</style>


<script type="text/javascript">

var rate = 65; // change speed
var repeat = 0; // set to 1 for continuous, 0 for once only
var t = 4; //set t to number of texts

///////////////////Stop Editing////////////////

var tnum = 1, cnum = 0;

if(document.getElementById){
var i=t
document.write('<style type="text/css">')
while (i>1){
document.write('#text'+i+',')
i--
}
document.write('#text1 { color: black; }<\/style>')
onload=fadein;
}

function fadein() {
if (!document.getElementById("text"+tnum))
return;
if(cnum < 16) { //if the text has not faded in completely, do the next statements
document.getElementById("text"+tnum).style.color='#'+cnum.toString(16)+'0'+cnum.toString(16)+'0'+cnum.toString(16)+'0' //display the text with the associated color
cnum++;
}
else { //if the text is faded in completely, do the next statements
cnum = 0; //reset color counter, prep for next text
tnum++; //increase text counter (go to next text)
}
if(tnum <= t)//if not all the text has been displayed, do the next run through
setTimeout("fadein()",rate);//speed at which the color of text changes
else if(repeat){
tnum=1
var i=t
while (i){
document.getElementById('text'+i).style.color='black'
i--
}
fadein();
}
}


</script>
</head>

<body bgcolor="black" text="white">
<div align="center">
<img src="spacer.gif" alt="" height="158" width="25" border="0" ><br>
<img src="spacer.gif" alt="" height="211" width="772" border="0"></div>

<div id="text1">ABOUT US</div>
<div id="text2">SERVICES</div>
<div id="text3">EXPERIENCE</div>
<div id="text4">CONTACT US</div>

</body>
</html>

mourenia
12-01-2005, 06:30 PM
Thanks! Your code may solve the problems I'm having with my own attempt. I found a dynamicdrive code for fading in text using rgb colors and tweaged it....BUT the first text comes out great, beautiful, the second is real stuttered and the third comes out fast and only part of the time. Take a look. By the way, if I alter someone else's code do I still need to credit the code to them even though I've made a bunch of changes? When does that switch of ownership take place?




<html>
<head>

<script language="javascript" type="text/javascript">

/***********************************************
* Derived from Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


var tnum = "1";
var t = new Array();
t[1] = "ABOUT US";
t[2] = "SERVICES";
t[3] = "EXPERIENCE";
t[4] = "CONTACT US";
var delay=2000; //delay before next message displays
var totalsteps=30;
var stepdelay=40; //time of single step
var s_color=new Array(0,0,0);
var e_color=new Array(255,255,255);

function fadein()
{
if (document.getElementById("text"+tnum) != null)
{
var text_fade=document.getElementById("text"+tnum);
text_fade.style.color="rgb("+s_color[0]+","+s_color[1]+","+s_color[2]+")" //set start color of text
text_fade.innerHTML=t[tnum];
setcolor(1,15); //call function setcolor with steps input
}
}


function setcolor(step)
{
if(step<=totalsteps)
{
document.getElementById("text"+tnum).style.color=getcolor(step);
step++;
var fadecounter=setTimeout("setcolor("+step+")",stepdelay); //set rate for each step
}
else //if colors have reached total steps, clear out previous loop and set to end color
{
clearTimeout(fadecounter);
document.getElementById("text"+tnum).style.color="rgb("+e_color[0]+","+e_color[1]+","+e_color[2]+")";
tnum++
}
if(tnum<t.length)
{
setTimeout("fadein()", delay); //go through fadein again (next text) at the given rate
}
}


function getcolor(step)
{
var n_color=new Array(3);
var diff=(s_color[0]-e_color[0]);
n_color[0]=s_color[0]+(Math.round((Math.abs(diff)/totalsteps))*step);
return ("rgb("+n_color[0]+", "+n_color[0]+", "+n_color[0]+")");
}


onload=fadein;


</script>
</head>

<body bgcolor="black" text="white">

<div id="text1" style="position:absolute; left:460px; top:440px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text2" style="position:absolute; left:460px; top:500px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text3" style="position:absolute; left:460px; top:560px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>
<div id="text4" style="position:absolute; left:460px; top:620px; width:250px; height: 50px; font-family: Arial; font-size: 18pt; font-weight: bold"></div>


</body>

</html>

jscheuer1
12-01-2005, 10:08 PM
Your code is looping too much. Change the function setcolor() to:


function setcolor(step)
{
if(step<=totalsteps)
{
document.getElementById("text"+tnum).style.color=getcolor(step);
step++;
setTimeout("setcolor("+step+")",stepdelay); //set rate for each step
return;
}
else //if colors have reached total steps, clear out previous loop and set to end color
{
document.getElementById("text"+tnum).style.color="rgb("+e_color[0]+","+e_color[1]+","+e_color[2]+")";
tnum++
}
if(tnum<t.length)
{
setTimeout("fadein()", delay); //go through fadein again (next text) at the given rate
}
}

The var 'fadecounter' and its clearTimeout call weren't doing anything, so I got rid of them.

mourenia
12-02-2005, 02:21 AM
Works great now. Thanks for all your help!
-Wren

gribouille
12-06-2005, 02:43 PM
Hi,

I'm very interested in this code. :D
I'm a french newbie, and I need a similar code with a customizable delay between the displayed texts.
In other words I want the delay to be shorter during the display, and the text to become smaller....

Does anyone know how to do ?
Thanks

mourenia
12-06-2005, 05:52 PM
The variable "delay" is the time between each text. Just decrease to make the next text appear faster. If you want the actually fade in to happen faster then you can change the variable "stepdelay" which is the length of a single step (or color) . As for making the text smaller....you mean you want the text that fades in to be a different font size? Or do you want the text to get smaller as it fades in.....etc. If you just want to change the size, it's here:

<div id="text1" style="position:absolute; left:460px; top:440px; width:250px; height: 50px; font-family: Arial;font-size: 18pt; font-weight: bold"></div>

-Wren

jscheuer1
12-06-2005, 08:00 PM
If you just want to change the size, it's here:

<div id="text1" style="position:absolute; left:460px; top:440px; width:250px; height: 50px; font-family: Arial;font-size: 18pt; font-weight: bold"></div>

This is not an ideal situation. The style should be in a style sheet and the actual text should be here in the markup, rather than in the configuration for the script. That way, in the case of style, it is more easily edited for all the divisions of this type and in the case of the text, it is still visible to non-javascript enabled browsers. On a minor note the font-family should be lower case and have a default for greater compatibility:

font-family: arial, sans-serif;

gribouille
12-07-2005, 10:20 AM
I think I wasn't very clear.... sorry.
The thing I need is to modify the time lenght between each <div> display.
For example :
Text1 appears
wait 3 seconds
Text2 appears
wait 2 seconds
Text3 appears
wait 1 second
etc...

If you have an idea......Thanks :)

jscheuer1
12-07-2005, 11:42 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Text Fade In - Demo (variable rate between items of text)</title>
<style type="text/css">

#text1, #text2, #text3, #text4 {
width: 250px;
height: 50px;
font-family: arial, sans-serif;
font-size: 18pt;
font-weight: bold;
}

</style>


<script type="text/javascript">
//set fade-in rate of individual texts
var rate = 65;
//set t to number of texts
var t = 4;
//set to milliseconds delay after first text finishes for next text to begin
var variablerate = 3000;
//set to milliseconds of decrease in variablerate for each successive delay between texts
var variation = 1000;

///////////////////Stop Editing////////////////

var tnum = 1, cnum = 0;

if(document.getElementById){
var i=t
document.write('<style type="text/css">')
while (i>1){
document.write('#text'+i+',')
i--
}
document.write('#text1 { color: black; }<\/style>')
onload=fadein;
}

function fadein() {
if (!document.getElementById("text"+tnum))
return;
if(cnum < 16) { //if the text has not faded in completely, do the next statements
//below sets the hex value for text color, may be edited to produce different colors
document.getElementById("text"+tnum).style.color='#'+cnum.toString(16)+'0'+cnum.toString(16)+'0'+cnum.toString(16)+'0' //display the text with the associated color
cnum++;
}
else { //if the text is faded in completely, do the next statements
cnum = 0; //reset color counter, prep for next text
tnum++; //increase text counter (go to next text)
if(tnum <= t) //if not all the text has been displayed, do the next run through
setTimeout("fadein()", variablerate);
variablerate-=variation;
return;
}
setTimeout("fadein()",rate);//speed at which the color of text changes
}


</script>
</head>

<body bgcolor="black" text="white">


<div id="text1">ABOUT US</div>
<div id="text2">SERVICES</div>
<div id="text3">EXPERIENCE</div>
<div id="text4">CONTACT US</div>

</body>
</html>

gribouille
12-07-2005, 10:13 PM
Wow !!
Thank you jscheuer1 !! Fantastic and fast ! I really appreciate ! :) :)
Bye

imensing
02-11-2007, 06:00 PM
I am placing this code in a table (2 cells). My problem is when page is resized, these layers will float over and outside cell (table ) bounderies. I can I make the text within these layers resize with the table.

Thanks

jscheuer1
02-11-2007, 09:39 PM
Which version are you using? Try the one without absolute positioning (the latest) or use the one you have but remove 'position:absolute;' wherever it appears in the style and/or markup.

imensing
02-11-2007, 11:33 PM
I have removed the absolute position whereever it showed up, but I still get the layers moving outside the table bounderies when page is resized. Basically I want this to stay within the cell properites, hence, wrap, rather then staying constant.

Thanks so much

jscheuer1
02-12-2007, 04:10 AM
Well, then next try removing width and height for the text divisions. This is really just a matter of style. If this latest suggestion doesn't get it for you, I can continue making suggestions. But, without seeing exactly what you do have, there is no way to be sure if my suggestions will produce the desired result.

If you need more help, please supply a link to your problem page.

imensing
02-12-2007, 01:24 PM
I am attaching the link to the page. As you can see, when you resize the page, the layered textboxes stay absolut, and do not move within the cell. Thanks for all the help

http://www.la-production.com/karmalized/index1.htm

jscheuer1
02-12-2007, 04:06 PM
That page still has the text divisions using absolute positioning. Check your script code, stylesheet and markup for this as it looks to be included in one or more places for them. I am uncertain how you want the page to look however as, at various resolutions, the text divisions are visually not entirely within any element. Once you do remove absolute positioning completely from their styles, you will need to place them within the element that you wish them to appear in. If you still want some bleed over (which looked good at 1440x900), you can apply margin or relative positioning to them. Their z-index style property may also need to be set.

jscheuer1
02-12-2007, 04:35 PM
This looked pretty good here:


<html>
<head>
<title>Get karmalized</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">

<style type="text/css">

#text1, #text2, #text3, #text4{
width: 350px;
height: 50px;
font-family: arial, sans-serif;
font-size: 18pt;
font-weight: bold;
margin-left:-25px;
position:relative;
z-index:1;
}
#text2, #text3, #text4{
float:right;
margin-right:10px;
}
</style>

<script type="text/javascript" src="http://www.la-production.com/swfobject.js"></script>
<script type="text/javascript">

var rate = 120; // change speed
var repeat = 0; // set to 1 for continuous, 0 for once only
var t = 4; //set t to number of texts

///////////////////Stop Editing////////////////

var tnum = 1, cnum = 0;

if(document.getElementById){
var i=t
document.write('<style type="text/css">')
while (i>1){
document.write('#text'+i+',')
i--
}
document.write('#text1 { color: black; }<\/style>')
onload=fadein;
}

function fadein() {
if (!document.getElementById("text"+tnum))
return;
if(cnum < 16) { //if the text has not faded in completely, do the next statements
document.getElementById("text"+tnum).style.color='#'+cnum.toString(16)+'0'+cnum.toString(16)+'0'+cnum.toString(16)+'0' //display the text with the associated color
cnum++;
}
else { //if the text is faded in completely, do the next statements
cnum = 0; //reset color counter, prep for next text
tnum++; //increase text counter (go to next text)
}
if(tnum <= t)//if not all the text has been displayed, do the next run through
setTimeout("fadein()",rate);//speed at which the color of text changes
else if(repeat){
tnum=1
var i=t
while (i){
document.getElementById('text'+i).style.color='gold'
i--
}
fadein();
}
}


</script>
</head>

<body bgcolor="black" text="#gold" background="http://www.la-production.com/sunburst.jpg">
<div align="center">
<div align="center">
<table border="0" width="870" style="border-collapse: collapse">
<tr>
<td bgcolor="#000000" width="399">
<div id="text5" style="position: absolute; left: 480px; top: 421px; width: 58px; height:25px">
<p align="center"><font face="Papyrus" color="#FFCC45">Enter</font></div>
<map name="FPMap0">
<area href="http://www.getkarmalized.com" shape="rect" coords="0, 0, 444, 445">
<area href="http://www.getkarmalized.com/boutique.htm" shape="rect" coords="5, 1, 418, 442">
</map>

<img src="http://www.la-production.com/Image13.jpg" alt="" height="441" width="440" border="0" usemap="#FPMap0" ></td>
<td bgcolor="#000000" width="379" valign="top">
<div id="text1">
<p style="margin-top: 0; margin-bottom: 0"><font face="Papyrus" size="7">
<span class="me"><span style="font-weight: 400"><fontcolor="ffcc45"></fontcolor="ffcc45">
getkarmalized.com</span></span></font></div>

<div id="text2">
<p align="center"><font face="Papyrus" size="4"><span class="me">
<span style="font-weight: 400">kar·mal·ize</span></span><span style="font-weight: 400">&nbsp;</span><span class="pronset"><span style="font-weight: 400"><img class="luna-Img" alt="" src="http://cache.lexico.com/dictionary/graphics/luna/thinsp.png" border="0">&nbsp;</span>&nbsp;<span class="show_ipapr" style="display: none"><span class="prondelim">/</span></span><span class="show_spellpr" style="display: inline"><span class="prondelim">[</span><span class="pron"><span style="font-weight: 400"><b>kar</b>-muh-lahyz</span>,
<b>kah<span style="font-weight: 400">r</span></b><span style="font-weight: 400">-muh</span>}</span></span></span></font></div>
<div id="text3">
<p align="right"><font size="4" face="Papyrus">the act of &quot;sweetening&quot; one's
life,</font></div>

<div id="text4">
<p align="right"><b><font size="4" face="Papyrus">and other's lives, <br>
through acts of generosity, kindness, and love</font></b></div>

</td>
<td width="46" valign="top" bgcolor="#000000" background="http://www.la-production.com/Image4.jpg">
.<p>&nbsp;</td>
</tr>
<tr>
<td height="21" colspan="2">
&nbsp;</td>

<td width="46" height="21">&nbsp;</td>
</tr>
</table>
</div>
</div>
<div align="center">
<br>
&nbsp;<div id="flashPlayer">
This text will be replaced by the flash music player.
</div>

<script type="text/javascript">
var so = new SWFObject("http://www.la-production.com//playerMini.swf", "mymovie", "75", "30", "7", "#FFFFFF");
so.addVariable("autoPlay", "yes");
so.addVariable("soundPath", "http://www.la-production.com/Flying_eagle-Wildflower.mp3");
so.write("flashPlayer");
</script>






</div>


</body>
</html>

By the way, in cooking, when something gets caramelized, it also hardens, dies if it was still alive, and becomes sticky. Nice culinary effect but, perhaps not the exact metaphor that you are going for here.

imensing
02-12-2007, 04:37 PM
Thanks John, unfortunately I am not a coder, and have tried several things. removing the absolute has not helped me. Basically what I want is for the text boxes (fading text) to stay within the black cell, and not bleed over when page is resized. Anyway you can help me with the proper code?
Thanks so much

imensing
02-12-2007, 04:40 PM
yes thanks, it is not my choice of a title but rather a clients who already had an existing page which needed improvement. Thanks for posting the code, please ignore my other reply. You are great

jscheuer1
02-12-2007, 05:54 PM
I liked this version even better:


<html>
<head>
<title>Get karmalized</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">

<style type="text/css">

#text1, #text2, #text3, #text4{
width: 350px;
height: 50px;
font-family: arial, sans-serif;
font-size: 18pt;
font-weight: bold;
margin-left:-25px;
position:relative;
z-index:1;
}
#text2, #text3, #text4{
float:right;
margin-right:10px;
}
</style>

<script type="text/javascript" src="http://www.la-production.com/swfobject.js"></script>
<script type="text/javascript">

var rate = 30; // change speed
var repeat = 0; // set to 1 for continuous, 0 for once only
var t = 4; //set t to number of texts

///////////////////Stop Editing////////////////

var tnum = 1, cnum = 0;

if(document.getElementById){
var i=t
document.write('<style type="text/css">')
while (i>1){
document.write('#text'+i+',')
i--
}
document.write('#text1 { color: black; }<\/style>')
onload=fadein;
}
//rgb(255, 204, 69)
function fadein() {
if (!document.getElementById("text"+tnum))
return;
if(cnum < 255) { //if the text has not faded in completely, do the next statements
//document.getElementById("text"+tnum).style.color='#'+cnum.toString(16)+'0'+cnum.toString(16)+'0'+cnum.toString(16)+'0' //display the text with the associated color
document.getElementById("text"+tnum).style.color='rgb('+cnum+', '+[cnum>51?cnum-51:parseInt(cnum/3)]+', '+[cnum>186?cnum-186:parseInt(cnum/4)]+')'//'#'+cnum.toString(16)+'0'+cnum.toString(16)+'0'+cnum.toString(16)+'0' //display the text with the associated color
cnum+=4;
}
else { //if the text is faded in completely, do the next statements
//document.getElementById('text'+tnum).style.color='gold'
cnum = 0; //reset color counter, prep for next text
tnum++; //increase text counter (go to next text)
}
if(tnum <= t)//if not all the text has been displayed, do the next run through
setTimeout("fadein()",rate);//speed at which the color of text changes
else if(repeat){
tnum=1
var i=t
while (i){
i--
}
fadein();
}
}


</script>
</head>

<body bgcolor="black" text="#gold" background="http://www.la-production.com/sunburst.jpg">
<div align="center">
<div align="center">
<table border="0" width="870" style="border-collapse: collapse">
<tr>
<td bgcolor="#000000" width="399">
<div style="height:441px;width:440px;background-color:transparent;overflow:hidden;"><map name="FPMap0">
<area href="http://www.getkarmalized.com" shape="rect" coords="0, 0, 444, 445">
<area href="http://www.getkarmalized.com/boutique.htm" shape="rect" coords="5, 1, 418, 442">
</map>

<img src="http://www.la-production.com/Image13.jpg" alt="" height="441" width="440" border="0" usemap="#FPMap0" >
<div id="text5" style="position: relative; left: 223px; bottom: 40px; width: 0px; height:0px;overflow:visible;font-family:papyrus;"><a style="text-decoration:none;color:#ffcc45;" href="http://www.getkarmalized.com">Enter</a></div>
</div></td>
<td bgcolor="#000000" width="379" valign="top">
<div id="text1">
<p style="margin-top: 0; margin-bottom: 0"><font face="Papyrus" size="7">
<span class="me"><span style="font-weight: 400"><fontcolor="ffcc45"></fontcolor="ffcc45">
getkarmalized.com</span></span></font></div>

<div id="text2">
<p align="center"><font face="Papyrus" size="4"><span class="me">
<span style="font-weight: 400">kar·mal·ize</span></span><span style="font-weight: 400">&nbsp;</span><span class="pronset"><span style="font-weight: 400"><img class="luna-Img" alt="" src="http://cache.lexico.com/dictionary/graphics/luna/thinsp.png" border="0">&nbsp;</span>&nbsp;<span class="show_ipapr" style="display: none"><span class="prondelim">/</span></span><span class="show_spellpr" style="display: inline"><span class="prondelim">[</span><span class="pron"><span style="font-weight: 400"><b>kar</b>-muh-lahyz</span>,
<b>kah<span style="font-weight: 400">r</span></b><span style="font-weight: 400">-muh</span>}</span></span></span></font></div>
<div id="text3">
<p align="right"><font size="4" face="Papyrus">the act of &quot;sweetening&quot; one's
life,</font></div>

<div id="text4">
<p align="right"><b><font size="4" face="Papyrus">and other's lives, <br>
through acts of generosity, kindness, and love</font></b></div>

</td>
<td width="46" valign="top" bgcolor="#000000" background="http://www.la-production.com/Image4.jpg">
.<p>&nbsp;</td>
</tr>
<tr>
<td height="21" colspan="2">
&nbsp;</td>

<td width="46" height="21">&nbsp;</td>
</tr>
</table>
</div>
</div>
<div align="center">
<br>
&nbsp;<div id="flashPlayer">
This text will be replaced by the flash music player.
</div>

<script type="text/javascript">
var so = new SWFObject("http://www.la-production.com//playerMini.swf", "mymovie", "75", "30", "7", "#FFFFFF");
so.addVariable("autoPlay", "yes");
so.addVariable("soundPath", "http://www.la-production.com/Flying_eagle-Wildflower.mp3");
so.write("flashPlayer");
</script>






</div>


</body>
</html>

imensing
02-12-2007, 06:22 PM
one more thing, how can I change the textcolor when faded it, to the gold as in background?

imensing
02-12-2007, 06:23 PM
Gosh, you are a step ahead of me. I just LOVE this!!!

jscheuer1
02-12-2007, 06:46 PM
Instead of what you did here:


<div id="text3" style="width: 350px; height: 150px">

and here:


<div id="text4" style="width: 350px; height: 158px">

and anything else you may have done to produce the vertical gap. Just add some top margins in the styleheet:


#text1, #text2, #text3, #text4{
width: 350px;
height: 50px;
font-family: arial, sans-serif;
font-size: 18pt;
font-weight: bold;
margin-left:-25px;
position:relative;
z-index:1;
}
#text2, #text3, #text4{
float:right;
margin-right:10px;
}
#text1 {
margin-top:10px;
}
#text3 {
margin-top:100px;
}

As, what you did is producing a black line on the left below everything in some browsers.

imensing
02-12-2007, 07:06 PM
John I have one more question. Can the last two lines, which are now one fadein, be separated into two separate fadeins, meaning there will be 5 instead of 4. I am playing with it, but missing something

jscheuer1
02-12-2007, 07:53 PM
Sure but, you can only have one division on the page with an id of text5:


<html>
<head>
<title>Get karmalized</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">

<style type="text/css">

#text1, #text2, #text3, #text4, #text5{
width: 350px;
height: 50px;
font-family: arial, sans-serif;
font-size: 18pt;
font-weight: bold;
margin-left:-25px;
position:relative;
z-index:1;
}
#text2, #text3, #text4, #text5{
float:right;
margin-right:10px;
}
#text1 {
margin-top:10px;
}
#text3 {
margin-top:100px;
}
</style>

<script type="text/javascript" src="http://www.la-production.com/swfobject.js"></script>
<script type="text/javascript">

var rate = 30; // change speed
var repeat = 0; // set to 1 for continuous, 0 for once only
var t = 5; //set t to number of texts

///////////////////Stop Editing////////////////

var tnum = 1, cnum = 0;

if(document.getElementById){
var i=t
document.write('<style type="text/css">')
while (i>1){
document.write('#text'+i+',')
i--
}
document.write('#text1 { color: black; }<\/style>')
onload=fadein;
}
//rgb(255, 204, 69)
function fadein() {
if (!document.getElementById("text"+tnum))
return;
if(cnum < 255) { //if the text has not faded in completely, do the next statements
document.getElementById("text"+tnum).style.color='rgb('+cnum+', '+[cnum>51?cnum-51:parseInt(cnum/3)]+', '+[cnum>186?cnum-186:parseInt(cnum/4)]+')'//display the text with the associated color
cnum+=4;
}
else { //if the text is faded in completely, do the next statements
cnum = 0; //reset color counter, prep for next text
tnum++; //increase text counter (go to next text)
}
if(tnum <= t)//if not all the text has been displayed, do the next run through
setTimeout("fadein()",rate);//speed at which the color of text changes
else if(repeat){
tnum=1
var i=t
while (i){
i--
}
fadein();
}
}


</script>
</head>

<body bgcolor="black" text="#gold" background="http://www.la-production.com/sunburst.jpg">
<div align="center">
<div align="center">
<table border="0" width="870" style="border-collapse: collapse">
<tr>
<td bgcolor="#000000" width="399">
<div style="height:441px;width:440px;background-color:transparent;overflow:hidden;"><map name="FPMap0">
<area href="http://www.getkarmalized.com" shape="rect" coords="0, 0, 444, 445">
<area href="http://www.getkarmalized.com/boutique.htm" shape="rect" coords="5, 1, 418, 442">
</map>

<img src="http://www.la-production.com/Image13.jpg" alt="" height="441" width="440" border="0" usemap="#FPMap0" >
<div style="position: relative; left: 223px; bottom: 40px; width: 0px; height:0px;overflow:visible;font-family:papyrus;"><a style="text-decoration:none;color:#ffcc45;" href="http://www.getkarmalized.com">Enter</a></div>
</div></td>
<td bgcolor="#000000" width="379" valign="top">
<div id="text1">
<p style="margin-top: 0; margin-bottom: 0"><font face="Papyrus" size="7">
<span class="me"><span style="font-weight: 400"><fontcolor="ffcc45"></fontcolor="ffcc45">
getkarmalized.com</span></span></font></div>

<div id="text2">
<p align="center"><font face="Papyrus" size="4"><span class="me">
<span style="font-weight: 400">kar·mal·ize</span></span><span style="font-weight: 400">&nbsp;</span><span class="pronset"><span style="font-weight: 400"><img class="luna-Img" alt="" src="http://cache.lexico.com/dictionary/graphics/luna/thinsp.png" border="0">&nbsp;</span>&nbsp;<span class="show_ipapr" style="display: none"><span class="prondelim">/</span></span><span class="show_spellpr" style="display: inline"><span class="prondelim">[</span><span class="pron"><span style="font-weight: 400"><b>kar</b>-muh-lahyz</span>,
<b>kah<span style="font-weight: 400">r</span></b><span style="font-weight: 400">-muh</span>}</span></span></span></font></div>
<div id="text3">
<p align="right"><font size="4" face="Papyrus">the act of &quot;sweetening&quot; one's
life,</font></div>

<div id="text4">
<p align="right"><b><font size="4" face="Papyrus">and other's lives,</font></b></div>
<div id="text5">
<p align="right"><b><font size="4" face="Papyrus">through acts of generosity, kindness, and love</font></b></div>

</td>
<td width="46" valign="top" bgcolor="#000000" background="http://www.la-production.com/Image4.jpg">
.<p>&nbsp;</td>
</tr>
<tr>
<td height="21" colspan="2">
&nbsp;</td>

<td width="46" height="21">&nbsp;</td>
</tr>
</table>
</div>
</div>
<div align="center">
<br>
&nbsp;<div id="flashPlayer">
This text will be replaced by the flash music player.
</div>

<script type="text/javascript">
var so = new SWFObject("http://www.la-production.com//playerMini.swf", "mymovie", "75", "30", "7", "#FFFFFF");
so.addVariable("autoPlay", "yes");
so.addVariable("soundPath", "http://www.la-production.com/Flying_eagle-Wildflower.mp3");
so.write("flashPlayer");
</script>






</div>


</body>
</html>

imensing
02-12-2007, 08:16 PM
Very cool, now I am wondering what exactly did you change, and why only one div with an id of text 5

jscheuer1
02-12-2007, 09:58 PM
Well I added the #text5 selector to the style section, increased the var t to 5 and created the extra division in the markup. However, I also removed the id="text5" from here:


<div id="text5" style="position: relative; left: 223px; bottom: 40px; width: 0px; height:0px;overflow:visible;font-family:papyrus;"><a style="text-decoration:none;color:#ffcc45;" href="http://www.getkarmalized.com">Enter</a></div>


I'm not sure how it got there in the first place but, in scripting when you are accessing an element by its id, there can only be one such element on the page. Otherwise, the script parser won't know which one you mean. Incidentally, although most browsers will ignore the error when there is no script involved - say it is just being used for css styling, technically it is invalid to have more than one element on a page with the same id.

mburt
02-12-2007, 10:16 PM
You should use classes... it would make it more effecient. Then just specify left and top for each individial div. As for the number, you could use element.getElementsByTagName("DIV") which returns an array. You could use the length+1 to set the max number of divs. Just some suggestions.