/    Sign up×
Community /Pin to ProfileBookmark

Changing Colours in Javascript

Copy linkTweet thisAlerts:
Jan 08.2004

Have a look at this code:

[code=php]<html>

<head>
<meta http-equiv=”Content-Language” content=”en-us”>
<meta name=”GENERATOR” content=”Microsoft FrontPage 5.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Glowing Text</title>
<style>
<style>{ }
#glowtext{
filter:glow(color=0000ff,strength=3);
width:100%;
}
–>
</style>
<script language=”JavaScript1.2″>

function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=8
else
document.all.glowtext[which].filters[0].strength=3
}

function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}

function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval(‘setInterval(“glowit(‘+i+’)”,150)’)
}
else if (glowtext)
setInterval(“glowit2(0)”,150)
}

if (document.all)
window.onload=startglowing
</script>

<script type=”text/javascript”>
var colorArr=[“808080”, “Yellow”, “Orange”, “Black”];
var colorInx=0;
function bgChange(){
document.bgColor=colorArr[colorInx];
colorInx++;
if (colorInx>colorArr.length-1) colorInx=0;
}
</script>

<a href=# onclick=”bgChange();”>Name of the link</a>

</head>

<body text=”#00FF00″ bgcolor=”#000000″ link=”#FFFF00″ vlink=”#FF9900″>

<p align=”center”><font face=”Comic Sans MS” size=”5″>Glowing Text</font></p>
<p align=”center”>&nbsp;</p>
<p align=”center”><font face=”Courier” size=”5″>This is a very good script,
especially for something like Haloween. Try it. This is the effect of the
script:</font></p>
<p align=”center”><font face=”Courier” size=”5″><span id=”glowtext”>This is normal text </span></font></p>
<p align=”center”><font face=”Courier” size=”5″><span id=”glowtext”>
<a href=”../glowtext.htm”>This is a hyperlink</a> </span></font></p>
<p align=”center”>
<textarea rows=”5″ name=”S1″ cols=”50″><style>
<!–
#glowtext{
filter:glow(color=FFFF00,strength=3);
width:100%;
}
–>
</style>

<script language=”JavaScript1.2″>

function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=2
else
document.all.glowtext[which].filters[0].strength=3
}

function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}

function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval(‘setInterval(“glowit(‘+i+’)”,150)’)
}
else if (glowtext)
setInterval(“glowit2(0)”,150)
}

if (document.all)
window.onload=startglowing
</script></textarea></p>

[/code]

How can i change the bgchange part of the script so that it chages the colour of the glow instead of the background colour?

to post a comment
JavaScript

18 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJan 08.2004 — Try changing

document.bgColor=colorArr[colorInx];

to become

for(i=0;i<document.all.glowtext.lenght;i++){

document.all.glowtext[i].color=colorArr[colorInx];

}





If you want a certain text to be changed (not all), choose whichever i value and forget about the [b]for[/b] loop....
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — [code=php]<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Glowing Text</title>
<style>
<style>{ }
#glowtext{
filter:glow(color=0000ff,strength=3);
width:100%;
}
-->
</style>
<script language="JavaScript1.2">

function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=8
else
document.all.glowtext[which].filters[0].strength=3
}

function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}

function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}

if (document.all)
window.onload=startglowing
</script>

<script type="text/javascript">
var colorArr=["Red", "Yellow", "Orange", "Blue"];
var colorInx=0;
function bgChange(){
for(i=0;i<document.all.glowtext.lenght;i++){
document.all.glowtext[i].color=colorArr[colorInx];
}
colorInx++;
if (colorInx>colorArr.length-1) colorInx=0;
}
</script>


<a href=# onclick="bgChange();">Name of the link</a>

</head>[/code]

This is what the head looks like after i implement what you told me, but it doesn't work, i tried it

Any other ideas?
Copy linkTweet thisAlerts:
@KorJan 08.2004 — Sorry, try this

for(i=0;i<document.all.glowtext.leng[color=red]th[/color];i++){

document.all.glowtext[i][color=red].style[/color].color=colorArr[colorInx];



and



<a href="../glowtext.htm" [color=red]id="glowtext"[/color]>This is a hyperlink</a>



The red inserts are to be added at my previous
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — My head looks like this:


[code=php]<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Glowing Text</title>
<style>
<style>{ }
#glowtext{
filter:glow(color=0000ff,strength=3);
width:100%;
}
-->
</style>
<script language="JavaScript1.2">

function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=8
else
document.all.glowtext[which].filters[0].strength=3
}

function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}

function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}

if (document.all)
window.onload=startglowing
</script>


<script type="text/javascript">
var colorArr=["808080", "Yellow", "Orange", "Black"];
var colorInx=0;
function bgChange(){
for(i=0;i<document.all.glowtext.length;i++){
document.all.glowtext[i].style.color=colorArr[colorInx];
colorInx++;
if (colorInx>colorArr.length-1) colorInx=0;
}
</script>


<a href="../glowtext.htm" id="glowtext">This is a hyperlink</a
</head>

<body text="#00FF00" bgcolor="#000000" link="#FFFF00" vlink="#FF9900">
[/code]

And it gives a runtime error
Copy linkTweet thisAlerts:
@KorJan 08.2004 — No erron on me for this:

[code=php]
<html>
<head>
<style>
<style>{ }
#glowtext{
filter:glow(color=0000ff,strength=3);
width:100%;
}
-->
</style>
<script language="JavaScript1.2">

function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=8
else
document.all.glowtext[which].filters[0].strength=3
}

function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}

function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}

if (document.all)
window.onload=startglowing
</script>

<script type="text/javascript">
var colorArr=["Red", "Yellow", "Orange", "Blue"];
var colorInx=0;
function bgChange(){
for(i=0;i<document.all.glowtext.length;i++){

document.all.glowtext[i].style.color=colorArr[colorInx];
}
colorInx++;
if (colorInx>colorArr.length-1) colorInx=0;
}
</script>

</head>
<body text="#00FF00" bgcolor="#000000" link="#FFFF00" vlink="#FF9900">
<a href=# onclick="bgChange();">Name of the link</a><br>
<p align="center"><font face="Comic Sans MS" size="5">Glowing Text</font></p>
<p align="center">&nbsp;</p>
<p align="center"><font face="Courier" size="5">This is a very good script,
especially for something like Haloween. Try it. This is the effect of the
script:</font></p>
<p align="center"><font face="Courier" size="5"><span id="glowtext">This is normal text </span></font></p>
<p align="center"><font face="Courier" size="5"><span id="glowtext">
<a href="../glowtext.htm" id="glowtext">This is a hyperlink</a> </span></font></p>
<p align="center">
<textarea rows="5" name="S1" cols="50"></textarea></p>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — Yeah, i had just noticed what i had done wrong. But this changes the colour of the text itself. Can it change the colour of the GLOW?

You know, the blue around the text?
Copy linkTweet thisAlerts:
@KorJan 08.2004 — Your error might have been provided by the incorrect hexa color

"[color=red]#[/color]808080" is the correct, not "808080"
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — yeah. That may have been the problem. But, i want to change the glow of the text, not the text colour itself!
Copy linkTweet thisAlerts:
@KorJan 08.2004 — try modify in CSS

filter:glow([color=red]color=0000ff[/color],strength=3);

here you may let the hexa without # but the standard code is in CSS also with #

try #FF0000 and the glove color will be red... use diferent values as u like
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — I know that already! You know the hyperlink that you made for me? It changes the text colour. How can i make it change the GLOW colour instead of the TEXT colour
Copy linkTweet thisAlerts:
@KorJan 08.2004 — Ok, don't be angry, you said text atthe begining, not glove... here's the new function:

function bgChange(){

for(i=0;i<document.all.glowtext.length;i++){

[color=red]var colglove = "glow(color="+colorArr[colorInx]+",strength=3)";

document.all.glowtext[i].style.filter=colglove;[/color]

}

colorInx++;

if (colorInx>colorArr.length-1) colorInx=0;

}



And the whole code



[code=php]
<html>
<head>

<style>
#glowtext{
filter:glow(color=#0000ff,strength=3);
width:100%;
}
-->
</style>
<script language="JavaScript1.2">

function glowit(which){
if (document.all.glowtext[which].filters[0].strength==3)
document.all.glowtext[which].filters[0].strength=8
else
document.all.glowtext[which].filters[0].strength=3
}

function glowit2(which){
if (document.all.glowtext.filters[0].strength==3)
document.all.glowtext.filters[0].strength=2
else
document.all.glowtext.filters[0].strength=3
}

function startglowing(){
if (document.all.glowtext&&glowtext.length){
for (i=0;i<glowtext.length;i++)
eval('setInterval("glowit('+i+')",150)')
}
else if (glowtext)
setInterval("glowit2(0)",150)
}

if (document.all)
window.onload=startglowing
</script>

<script type="text/javascript">
var colorArr=["Red", "Yellow", "Orange", "Blue"];
var colorInx=0;
function bgChange(){
for(i=0;i<document.all.glowtext.length;i++){
var colglove = "glow(color="+colorArr[colorInx]+",strength=3)";
document.all.glowtext[i].style.filter=colglove;
}
colorInx++;
if (colorInx>colorArr.length-1) colorInx=0;
}
</script>

</head>
<body text="#00FF00" bgcolor="#000000" link="#FFFF00" vlink="#FF9900">
<a href=# onclick="bgChange();">Name of the link</a><br>
<p align="center"><font face="Comic Sans MS" size="5">Glowing Text</font></p>
<p align="center">&nbsp;</p>
<p align="center"><font face="Courier" size="5">This is a very good script,
especially for something like Haloween. Try it. This is the effect of the
script:</font></p>
<p align="center"><font face="Courier" size="5"><span id="glowtext">This is normal text </span></font></p>
<p align="center"><font face="Courier" size="5"><span id="glowtext">
<a href="../glowtext.htm" id="glowtext">This is a hyperlink</a> </span></font></p>
<p align="center">
<textarea rows="5" name="S1" cols="50"></textarea></p>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — Sorry, i hope u didn't think i got angry with you. I just tried to highlight the important parts. I don't know where the colour is!
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — And THANX ALOT MAN! It works! Iv'e been struggling on this for ages!

Thanx alot!
Copy linkTweet thisAlerts:
@KorJan 08.2004 — OK, I am glad I could help you. I am sure you could do it by yourself if only have learned about changing styles on-the-fly... It is rather easy, just have a search on DHTML tutorials...

have a good coding time and a nice day/evening!
Copy linkTweet thisAlerts:
@aommasterauthorJan 08.2004 — Ok. One more thing. What is the code, for changing [COLOR=red]all[/COLOR] (i found it!) the text on the website. The one that you gave me only changes the first text and the hyperlink. How do you change all of it
Copy linkTweet thisAlerts:
@KorJan 09.2004 — here's a very short explanation of the way of changing the styles on the fly. Hope that will help you change from now on every style attribut on any page...

The main ideea is that you have to find out the reference of the object you want to change his proprieties and the method you may use.

The reference is a "tree" kinda, from the most comprehensive to the unique element. generally is something like:

window

body

document

element

... separated by dots

in practice you hardly need the whole reference, most of the time is enough to start from the document 'branch":

document.element

well, the way that "element" is named is a whole story, because older IE uses document.all.element while old NS uses document.element or document.layers.element. Present browsers are using a better referenece as document.getElementById or document.getElementsByTagName

The way you find a unique element is another story it is and sometimes it is not the same thing...

In your case, I saw that u used a script using document.all reference, which means only IE4+ can execute.

So, to reference something you have to give a name or an id.In your case you have some text in 2 SPAN (which is a neutral tag) with the same ID, which complicate the things

Usualy your text should have the refrence

document.all.the_element's_id

or

document.all['the_element's_id']

But, as you have 2 elements with the same id, you have to specify each of them using the normal order, from top to bottom, from 0...

So, your first text will be refeneced (find as object) as

document.all.the_element's_id[0]

and the second

document.all.the_element's_id[1]

In practice you may have more than 2, so it is obviously to use an array set by a for cycle loop

for(i=0;1<document.all.the_element's_id.length;i++)

{

document.all.the_element's_id[i];

}



This expresion will return, in our case, the 2 references. Would have been 100 you imagine that it wasn't a pleasure to write 100 of the arrays elements...:-)



Now the method.



To set the CSS styles attributtes you have to prolongue the reference adding .style.attribute (where attribute can be any CSS attribute - color, filter, font proprieties .... all of them)



document.all.the_element's_id[0].style.color = red;



...will modify the color of the element with the id called the_elements'_id, and the first position ([0])



Now if you want to change the both texts (or all if there have been more on the page) use the whole array reference and style on-the-fly as:



for(i=0;1<document.all.the_element's_id.length;i++)

{

document.all.the_element's_id[i].style.color = "red";

}



NOTE:

1. Some attributes are written in CSS with a short line, such as

font-weight background-color..... References on-the-fly will remove that line and put a Caps on the second word



document.all.the_element's_id[i].style.fontWeight

document.all.the_element's_id[i].style.backgroundColor



  • 2. Some attributes has secondary attributes, such as filter, which can be refere in 2 modes


    • document.all.the_element's_id[i].style.filter = "(glove=...)"

    document.all.the_element's_id[i].style.filter.glove = "...":



    It is OK so far? have I managed to explain it?











    ?
    Copy linkTweet thisAlerts:
    @aommasterauthorJan 09.2004 — OKAAAYYYY!!! So THAT's how it works. Nice!

    Thanx alot!
    Copy linkTweet thisAlerts:
    @KorJan 09.2004 — to change the text's style from ALL the page which means from all the <body>, use

    document.body.style.color = "...";
    ×

    Success!

    Help @aommaster spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...