By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,110 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

dhtml text fader prob, please help!

P: n/a
Hi, im looking for help on how to add a text fader to my website,
usually i'm working with css but in this case i need to add java script
to make it work, that wasn't the problem but somehow it seems like they
are not compatible with each other so when i add the text fader code in
the <body> tag,the rest of my site is gone :S if someone please can
have a look at my code and tell what am i doing wrong.
thx allot for whom of you who can =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">

var loop = true; // toggle on/off
var xpos = "120"; // left distance
var ypos = "30"; // top distance
var wide = "565"; // layer width
var rate = "250"; // change speed

var tnum = "1";
var t = new Array();
t[1] = ".....100% Natural 100% Natural 100% Natural 100% Natural 100%
Natural.....";
t[2] = "...Shop Online...";
t[3] = ".... Grow Your Own !";

var cnum = "1";
var c = new Array();
c[1] = "lightgreen";
c[2] = "gray";
c[3] = "silver";
c[4] = "whitesmoke";
c[5] = "white";
c[6] = "white";
c[7] = "white";
c[8] = "whitesmoke";
c[9] = "silver";
c[10] = "gray";
c[11] = "green";
c[12] = "lightgreen";

if(document.layers)document.write("<layer name='hi' left='"+xpos+"'
top='"+ypos+"' width='"+wide+"'></layer>");
if(document.all)document.write("<div id='hi'
style='position:absolute;left:"+xpos+";top:"+ypos+ ";width:"+wide+"'>");

function glow()
{
if(document.layers)
{
if(tnum < t.length)
{
if(cnum < c.length-1)
{
document.layers["hi"].document.write("<font size=5
color='"+c[cnum]+"'>"+t[tnum]+"</font>");
document.layers["hi"].document.close();
cnum++;
}

else
{
cnum = 1;
tnum++;
if(loop)
{
if(tnum == t.length) tnum = 1;
}
}

setTimeout("glow()",rate);
}

else
{
document.layers["hi"].document.write("");
document.layers["hi"].document.close();

}
}

if(document.all)
{
if(tnum < t.length)
{
if(cnum < c.length-1)
{
document.all("hi").innerHTML = "<font size=3 font face=Arial,
Helvetica, sans-serif color='"+c[cnum]+"'>"+t[tnum]+" </font>";
cnum ++;
}

else
{
cnum = 1;
tnum ++;
if(loop)
{
if(tnum == t.length) tnum = 1;
}
}

setTimeout("glow()",rate);
}

else document.all("hi").innerHTML = "";

}
}

</SCRIPT>

<style type="text/css">
body{background-color:#000000}
#headline{position:absolute; left:-2px; top: 13px; margin: 10px 200px
500px 10px}

#navbar
{
position:absolute;
left:76px;
top: 112px;
list-style: none;
padding: 2px;
padding-left : 1.5em;
padding-right : 1.5em;
margin: 1px 1px 1px 1px;
white-space: nowrap;
background: #000;
text-align: right;
line-height: 1.2em;

}

#navbar a.xxx {
padding-left : 1em;
padding-right : 1em;
color: #25BC5F;
background-color: #000;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
text-decoration: none;}

#navbar a:hover.xxx {
color: #25BC5F;
background-color: #333;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;}

p{font-color:#F0F0F0;
font-size:10px;
font-face:Arial, Helvetica, sans-serif;}

#intro{position:absolute;
left:911px;
top:119px;
width:8%;
letter-spacing:0.03cm;}

#natural{position:absolute;left:444px;top:707px}

..container{
position:absolute;
margin: auto;
width: 600px;
height:600px;
padding-left:20px;
padding-right:20px;
border-left:1px solid #333;
border-right:1px solid #333;
left: 284px;
top: 114px;

}

#content{position:absolute;
left:168px;
top:34px;
width:53%;
letter-spacing:0.03cm;
border-style:solid;
border-color:#333333;
border-width:1px;
padding:3%;}
#content img
{
float:left;
margin:6px 10px 90px 10px;
left:200px;
top:270px;}

#content1{position:absolute;
left:168px;
top:194px;
width:53%;
letter-spacing:0.03cm;
border-style:solid;
border-color:#333333;
border-width:1px;
padding:3%;}

#content1 img
{
float:left;
margin:6px 10px 90px 10px;
left:200px;
top:350px;}

</style>

</head>

<BODY onLoad='glow()'>

<div id="headline">
<img src="images/mnbanner1.jpg"/></div>

<div id="navbar"><font face="Terminator Two" size="2">

<a href="index1.htm" class="xxx">Home</a><br><br>
<a href="index2.htm" class="xxx">Flowers</a><br><br>
<a href="index3.htm" class="xxx">Herbs</a><br><br>
<a href="index4.htm" class="xxx">Order Info</a><br><br>
<a href="index5.htm" class="xxx">Order Form</a><br><br>
<a href="index6.htm" class="xxx">Contact</a><br><br>

</font></div>

<div id="intro">
<p><font color="F0F0F0" size="2" face="Terminator Two">Mushrooms</font>
<font color="#F0F0F0" size="1" face="Arial, Helvetica, sans-serif"><br>
Grow your own , it's fast and easy, you'll be surprised to have results
with no time.</font>
</p></div>

<div class="container">

<div id="content">
<img src="images/waterlily.jpg" width="80" height="100" />
<p><font color="#F0F0F0" size="1" face="Arial, Helvetica,
sans-serif">This strain is known as the most predominant, it produces
small fruits but considered
one of the strongest producers.
This species grows very fast, translucent when young, then turning
gray to white.
Growing instructions included.<br>
Please add it to my <a href="ordertest2.php"
target="_blank">order</a></font>
</p></div>

<div id="content1">
<p>
<img src="images/tulip.jpg"
width="80" height="100" />
<font color="#F0F0F0" size="1" face="Arial, Helvetica, sans-serif">The
This strain is the most famous in the world from primitive ages till
today.
Strong thin and tall potent producer.
Growing instructions included.<br>
Please add it to my <a href="ordertest2.php"
target="_blank">order</a></font>
</p>

</div>
</div>

<div id="natural">
<img src="images/100natural.jpg"/></div>

</body>
</html>

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
this is pretty cool, works in my ie6, netscape7.2, firefox1.0.1

http://www.bosiljak.hr/fadermaker/
Jul 23 '05 #2

P: n/a
mscir wrote:
this is pretty cool, works in my ie6, netscape7.2, firefox1.0.1

http://www.bosiljak.hr/fadermaker/


Too bad your etiquette of quoting what you are replying doesn't work.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #3

P: n/a
Randy Webb wrote:
mscir wrote:
this is pretty cool, works in my ie6, netscape7.2, firefox1.0.1
http://www.bosiljak.hr/fadermaker/


Too bad your etiquette of quoting what you are replying doesn't work.


Apologies to all concerned.

Mike
Jul 23 '05 #4

P: n/a
an******@hotmail.com wrote:
Hi, im looking for help on how to add a text fader to my website,
usually i'm working with css but in this case i need to add java script
to make it work, that wasn't the problem but somehow it seems like they
are not compatible with each other so when i add the text fader code in
the <body> tag,the rest of my site is gone :S if someone please can
have a look at my code and tell what am i doing wrong.
thx allot for whom of you who can =)


This version of your code works in my IE 6, Netscape 7.2, Firefox 1.0.1.
I just placed a div id='hi' at the top of the page, used CSS to position
and size it, and modified your code to rewrite the innerHTML in the glow
function. (I didn't check to see if it's valid, just tried to get the
code working).

Mike

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT TYPE="text/javascript">
var loop = true; // toggle on/off
var rate = "250"; // change speed
var tnum = "1";
var t = new Array();
t[1] = ".....100% Natural 100% Natural 100% Natural 100% Natural 100%
Natural.....";
t[2] = "...Shop Online...";
t[3] = ".... Grow Your Own !";
var cnum = "1";
var c = new Array();
c[1] = "lightgreen";
c[2] = "gray";
c[3] = "silver";
c[4] = "whitesmoke";
c[5] = "white";
c[6] = "white";
c[7] = "white";
c[8] = "whitesmoke";
c[9] = "silver";
c[10] = "gray";
c[11] = "green";
c[12] = "lightgreen";
function start(){
hidiv=document.getElementById('hi');
glow()
}
function glow(){
if(tnum < t.length){
if(cnum < c.length-1){
hidiv.innerHTML = "<font color='"+c[cnum]+"'>"+t[tnum]+" </font>";
//document.getElementById('hi').innerHTML ="test";// "<font
color='"+c[cnum]+"'>"+t[tnum]+" </font>";
cnum++;
}else{
cnum = 1;
tnum++;
if(loop){
if(tnum == t.length) tnum = 1;
}
}
setTimeout("glow()",rate);
}
}
</SCRIPT>

<style type="text/css">
body{background-color:#000000}
#hi{
left: 120px;
top: 30px;
width: 565px;
font-size: 90%;
position: absolute;
}
#headline{position:absolute; left:-2px; top: 13px; margin: 10px 200px
500px 10px}

#navbar{
position:absolute;
left:76px;
top: 112px;
list-style: none;
padding: 2px;
padding-left : 1.5em;
padding-right : 1.5em;
margin: 1px 1px 1px 1px;
white-space: nowrap;
background: #000;
text-align: right;
line-height: 1.2em;
}

#navbar a.xxx {
padding-left : 1em;
padding-right : 1em;
color: #25BC5F;
background-color: #000;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
text-decoration: none;}

#navbar a:hover.xxx {
color: #25BC5F;
background-color: #333;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;}

p{font-color:#F0F0F0;
font-size:10px;
font-face:Arial, Helvetica, sans-serif;}

#intro{position:absolute;
left:911px;
top:119px;
width:8%;
letter-spacing:0.03cm;}

#natural{position:absolute;left:444px;top:707px}

..container{
position:absolute;
margin: auto;
width: 600px;
height:600px;
padding-left:20px;
padding-right:20px;
border-left:1px solid #333;
border-right:1px solid #333;
left: 284px;
top: 114px;

}

#content{position:absolute;
left:168px;
top:34px;
width:53%;
letter-spacing:0.03cm;
border-style:solid;
border-color:#333333;
border-width:1px;
padding:3%;}
#content img
{
float:left;
margin:6px 10px 90px 10px;
left:200px;
top:270px;}

#content1{position:absolute;
left:168px;
top:194px;
width:53%;
letter-spacing:0.03cm;
border-style:solid;
border-color:#333333;
border-width:1px;
padding:3%;}

#content1 img
{
float:left;
margin:6px 10px 90px 10px;
left:200px;
top:350px;}

</style>

</head>

<BODY onLoad='start()'>
<div id='hi'></div>

<div id="headline">
<img src="images/mnbanner1.jpg"/></div>

<div id="navbar"><font face="Terminator Two" size="2">

<a href="index1.htm" class="xxx">Home</a><br><br>
<a href="index2.htm" class="xxx">Flowers</a><br><br>
<a href="index3.htm" class="xxx">Herbs</a><br><br>
<a href="index4.htm" class="xxx">Order Info</a><br><br>
<a href="index5.htm" class="xxx">Order Form</a><br><br>
<a href="index6.htm" class="xxx">Contact</a><br><br>

</font></div>

<div id="intro">
<p><font color="F0F0F0" size="2" face="Terminator Two">Mushrooms</font>
<font color="#F0F0F0" size="1" face="Arial, Helvetica, sans-serif"><br>
Grow your own , it's fast and easy, you'll be surprised to have results
with no time.</font>
</p></div>

<div class="container">

<div id="content">
<img src="images/waterlily.jpg" width="80" height="100" />
<p><font color="#F0F0F0" size="1" face="Arial, Helvetica,
sans-serif">This strain is known as the most predominant, it produces
small fruits but considered
one of the strongest producers.
This species grows very fast, translucent when young, then turning
gray to white.
Growing instructions included.<br>
Please add it to my <a href="ordertest2.php"
target="_blank">order</a></font>
</p></div>

<div id="content1">
<p>
<img src="images/tulip.jpg"
width="80" height="100" />
<font color="#F0F0F0" size="1" face="Arial, Helvetica, sans-serif">The
This strain is the most famous in the world from primitive ages till
today.
Strong thin and tall potent producer.
Growing instructions included.<br>
Please add it to my <a href="ordertest2.php"
target="_blank">order</a></font>
</p>

</div>
</div>

<div id="natural">
<img src="images/100natural.jpg"/></div>

</body>
</html>
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.