I want my text to slowly change color, but i am not doing something right.
code:
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.special {color: #000000}
-->
</style>
<script language="javascript">
<!--
var color = #000000;
var max = #FFFFFF;
var change = #111111;
function colorChange(){
color += change;
if(color > max)
color = #000000;
this.style.special.color = color;
sleep(2);
}
-->
</script>
</head>
<body onLoad="colorChange()">
<span class="special">text to change</span>
</body>
</html>
thanks for any help.This is for the background, but can be changed for text color: <!-- m --><a class="postlink" href="http://www.dynamicdrive.com/dynamicindex2/fadescroll.htmHere's">http://www.dynamicdrive.com/dynamicinde ... .htmHere's</a><!-- m --> a simple one
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--
//w ww.huntingground.freeserve.co.uk
startCol="FF0000"
endCol="0000FF"
function init(){
Sred=parseInt(startCol.substring(0,2),16)
Sgreen=parseInt(startCol.substring(2,4),16)
Sblue=parseInt(startCol.substring(4,6),16)
Ered=parseInt(endCol.substring(0,2),16)
Egreen=parseInt(endCol.substring(2,4),16)
Eblue=parseInt(endCol.substring(4,6),16)
scrollCol()
}
function scrollCol(){
if(Sred!=Ered){
if(Sred>Ered){Sred--}
else{Sred++}
}
if(Sgreen!=Egreen){
if(Sgreen>Egreen){Sgreen--}
else{Sgreen++}
}
if(Sblue!=Eblue){
if(Sblue>Eblue){Sblue--}
else{Sblue++}
}
Display()
timer=setTimeout("scrollCol()", 50)
if(Sred==Ered&&Sgreen==Egreen&&Sblue==Eblue){
clearTimeout(timer)
}
}
function Hex_it(dec){
num=dec
num = num.toString(16)
if (dec<16){
num = ("0" + num)
}
return num
}
function Display(){
hexR = Hex_it(Sred)
hexG = Hex_it(Sgreen)
hexB = Hex_it(Sblue)
colour = (hexR+hexG+hexB)
document.getElementById("effect").style.color ="#"+colour
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="init()">
<div id="effect" style="font-size:40px">Coloured Text</div>
</BODY>
</HTML>thank you for the help, I wanted something slow and less grating than a 'blink'. The least complicated answer was:
<script language="javascript">
var c = ['#000000','#111111','#222222','#333333','#444444','#555555','#666666','#777777','#888888','#999999', '#aaaaaa','#bbbbbb','#cccccc','#dddddd','#eeeeee','#ffffff',];
var color = 0;
var change = 1;
var max = c.length-1;
function colorChange(){
color += change;
if(color == max || color == 0)
change *= -1;
sp.color = c[color];
}
setInterval('colorChange()',400);
</script>
<body>
<font id=sp>change me</font>
but the Mr.J solution given was great as I had to think about why that would work, and as a new css/javascript person, I found the solution clever.language (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-language">http://www.w3.org/TR/REC-html40/interac ... f-language</a><!-- m -->) and font (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-FONT">http://www.w3.org/TR/REC-html40/present ... #edef-FONT</a><!-- m -->) are depreciated. Do not use them.
It will not work in Mozilla, due to the IE style object reference; sp.color . Use document.getElementById('sp').style.color.Suggestion: make sure that the initial color of the text is readable for those many cases where the viewer will have JS unavailable or disabled.Take a look at these faders, one of these may suit or be amended to suit
<!-- w --><a class="postlink" href="http://www.huntingground.freeserve.co.uk/style/txt_faders.htm">www.huntingground.freeserve.co.uk/style/txt_faders.htm</a><!-- w -->
code:
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.special {color: #000000}
-->
</style>
<script language="javascript">
<!--
var color = #000000;
var max = #FFFFFF;
var change = #111111;
function colorChange(){
color += change;
if(color > max)
color = #000000;
this.style.special.color = color;
sleep(2);
}
-->
</script>
</head>
<body onLoad="colorChange()">
<span class="special">text to change</span>
</body>
</html>
thanks for any help.This is for the background, but can be changed for text color: <!-- m --><a class="postlink" href="http://www.dynamicdrive.com/dynamicindex2/fadescroll.htmHere's">http://www.dynamicdrive.com/dynamicinde ... .htmHere's</a><!-- m --> a simple one
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--
//w ww.huntingground.freeserve.co.uk
startCol="FF0000"
endCol="0000FF"
function init(){
Sred=parseInt(startCol.substring(0,2),16)
Sgreen=parseInt(startCol.substring(2,4),16)
Sblue=parseInt(startCol.substring(4,6),16)
Ered=parseInt(endCol.substring(0,2),16)
Egreen=parseInt(endCol.substring(2,4),16)
Eblue=parseInt(endCol.substring(4,6),16)
scrollCol()
}
function scrollCol(){
if(Sred!=Ered){
if(Sred>Ered){Sred--}
else{Sred++}
}
if(Sgreen!=Egreen){
if(Sgreen>Egreen){Sgreen--}
else{Sgreen++}
}
if(Sblue!=Eblue){
if(Sblue>Eblue){Sblue--}
else{Sblue++}
}
Display()
timer=setTimeout("scrollCol()", 50)
if(Sred==Ered&&Sgreen==Egreen&&Sblue==Eblue){
clearTimeout(timer)
}
}
function Hex_it(dec){
num=dec
num = num.toString(16)
if (dec<16){
num = ("0" + num)
}
return num
}
function Display(){
hexR = Hex_it(Sred)
hexG = Hex_it(Sgreen)
hexB = Hex_it(Sblue)
colour = (hexR+hexG+hexB)
document.getElementById("effect").style.color ="#"+colour
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="init()">
<div id="effect" style="font-size:40px">Coloured Text</div>
</BODY>
</HTML>thank you for the help, I wanted something slow and less grating than a 'blink'. The least complicated answer was:
<script language="javascript">
var c = ['#000000','#111111','#222222','#333333','#444444','#555555','#666666','#777777','#888888','#999999', '#aaaaaa','#bbbbbb','#cccccc','#dddddd','#eeeeee','#ffffff',];
var color = 0;
var change = 1;
var max = c.length-1;
function colorChange(){
color += change;
if(color == max || color == 0)
change *= -1;
sp.color = c[color];
}
setInterval('colorChange()',400);
</script>
<body>
<font id=sp>change me</font>
but the Mr.J solution given was great as I had to think about why that would work, and as a new css/javascript person, I found the solution clever.language (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-language">http://www.w3.org/TR/REC-html40/interac ... f-language</a><!-- m -->) and font (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-FONT">http://www.w3.org/TR/REC-html40/present ... #edef-FONT</a><!-- m -->) are depreciated. Do not use them.
It will not work in Mozilla, due to the IE style object reference; sp.color . Use document.getElementById('sp').style.color.Suggestion: make sure that the initial color of the text is readable for those many cases where the viewer will have JS unavailable or disabled.Take a look at these faders, one of these may suit or be amended to suit
<!-- w --><a class="postlink" href="http://www.huntingground.freeserve.co.uk/style/txt_faders.htm">www.huntingground.freeserve.co.uk/style/txt_faders.htm</a><!-- w -->