PDA

View Full Version : Using javascript to change a tag?

Deadman DJ
05-21-2010, 09:44 PM
Hello all. What I'm trying to do is modify this document to cycle through these colors in a ring buffer pattern (e.g. rgb -> brg -> gbr... where r, g, and b are dropshadows, letter denoting the color they hold) such that I only need to use the tag ("RAINBOW" here) to apply the script to text. Here is the stationary version:

<HEAD>
<TITLE>Rainbow Dropshadow</TITLE>
<STYLE TYPE="text/css">
RAINBOW { text-shadow: 2px 2px 0px orange,
4px 4px 0px yellow,
6px 6px 0px green,
8px 8px 0px blue,
10px 10px 0px indigo,
12px 12px 0px violet;
color: red;
font-size: 128px;
}
</STYLE>
</HEAD>

<RAINBOW>foo</RAINBOW> bar <RAINBOW>foo</RAINBOW>


I have absolutely no idea how to make this work, and am very much an amateur at coding. I've seen a method that cycled the text-color attribute for a tag using a "getElementByID" method, but it only worked for the first instance of the tag, and that's not what I'm trying to do.

Any assistance would be much appreciated.
TinyScript
05-22-2010, 03:47 AM
fricken sweet!

very cool idea


<HEAD>
<TITLE>Rainbow Dropshadow</TITLE>
<STYLE TYPE="text/css">
#RAINBOW { text-shadow: 2px 2px 0px orange,
4px 4px 0px yellow,
6px 6px 0px green,
8px 8px 0px blue,
10px 10px 0px indigo,
12px 12px 0px violet;
color: red;
font-size: 128px;
}
</STYLE>
</HEAD>

<div id="RAINBOW">foo bar </div>
TinyScript
05-22-2010, 03:53 AM
Wow, I love this effect.


<HEAD>
<TITLE>Rainbow Dropshadow</TITLE>
<STYLE TYPE="text/css">
#RAINBOW { text-shadow: 2px 2px 2px orange,
4px 4px 3px yellow,
6px 6px 4px green,
8px 8px 5px blue,
10px 10px 6px indigo,
12px 12px 7px violet;
color: white;
font-size: 128px;
}
</STYLE>
</HEAD>

<div id="RAINBOW">foo bar </div>
TinyScript
05-22-2010, 04:15 AM
And now, animated


<HEAD>
<TITLE>Rainbow Dropshadow</TITLE>
<STYLE TYPE="text/css">
#RAINBOW { text-shadow: 2px 2px 2px orange,
4px 4px 3px yellow,
6px 6px 4px green,
8px 8px 5px blue,
10px 10px 6px indigo,
12px 12px 7px violet;
color: white;
font-size: 128px;
}
</STYLE>
</HEAD>

<div id="RAINBOW">foo bar </div>








<script>
var ARRY=[

"2px 2px 2px orange,4px 4px 3px yellow,6px 6px 4px green, 8px 8px 5px blue, 10px 10px 6px indigo,12px 12px 7px violet",
"2px 2px 2px yellow,4px 4px 3px green, 6px 6px 4px blue, 8px 8px 5px indigo,10px 10px 6px violet,12px 12px 7px orange",
"2px 2px 2px green, 4px 4px 3px blue, 6px 6px 4px indigo,8px 8px 5px violet,10px 10px 6px orange,12px 12px 7px yellow",
"2px 2px 2px blue, 4px 4px 3px indigo,6px 6px 4px violet,8px 8px 5px orange,10px 10px 6px yellow,12px 12px 7px green",
"2px 2px 2px indigo,4px 4px 3px violet,6px 6px 4px orange,8px 8px 5px yellow,10px 10px 6px green, 12px 12px 7px blue",
"2px 2px 2px violet,4px 4px 3px orange,6px 6px 4px yellow,8px 8px 5px green, 10px 10px 6px blue, 12px 12px 7px indigo"
]
var count=0;
window.onload=run

function run(){
rainbow=document.getElementById("RAINBOW")
rainbow.style.textShadow=ARRY[count]
count++
count%=ARRY.length
setTimeout(run,100)
}

</script>




with mouseover

<TITLE>Rainbow Dropshadow</TITLE>
<STYLE TYPE="text/css">
#RAINBOW { text-shadow: 2px 2px 2px orange,
4px 4px 3px yellow,
6px 6px 4px green,
8px 8px 5px blue,
10px 10px 6px indigo,
12px 12px 7px violet;
color: white;
font-size: 128px;
}
</STYLE>
</HEAD>

<div id="RAINBOW">foo bar </div>








<script>
var ARRY=[

"1px 1px 1px orange,2px 2px 2px yellow,3px 3px 2px green, 4px 4px 2px blue, 5px 5px 2px indigo,6px 6px 2px violet",
"1px 1px 1px yellow,2px 2px 2px green, 3px 3px 2px blue, 4px 4px 2px indigo,5px 5px 2px violet,6px 6px 2px orange",
"1px 1px 1px green, 2px 2px 2px blue, 3px 3px 2px indigo,4px 4px 2px violet,5px 5px 2px orange,6px 6px 2px yellow",
"1px 1px 1px blue, 2px 2px 2px indigo,3px 3px 2px violet,4px 4px 2px orange,5px 5px 2px yellow,6px 6px 2px green",
"1px 1px 1px indigo,2px 2px 2px violet,3px 3px 2px orange,4px 4px 2px yellow,5px 5px 2px green, 6px 6px 2px blue",
"1px 1px 1px violet,2px 2px 2px orange,3px 3px 2px yellow,4px 4px 2px green, 5px 5px 2px blue, 6px 6px 2px indigo"
]
var count=0;
window.onload=run

function run(){
rainbow=document.getElementById("RAINBOW")
rainbow.onmouseover=function(){doRUN=true;run()}
rainbow.onmouseout=function(){doRUN=false}
rainbow.style.textShadow=ARRY[count]
count++
count%=ARRY.length
if(doRUN)setTimeout(run,30)
}

</script>



Couldn't help it. Had to make is a class function for multiple instances

<HEAD>
<TITLE>Rainbow Dropshadow</TITLE>
<STYLE TYPE="text/css">
.RAINBOW { text-shadow: 2px 2px 2px orange,
4px 4px 3px yellow,
6px 6px 4px green,
8px 8px 5px blue,
10px 10px 6px indigo,
12px 12px 7px violet;
color: white;
font-size: 128px;
}
</STYLE>
</HEAD>

<div class="RAINBOW">foo bar </div><br>

<div class="RAINBOW">foo bar 2 </div>









<script>

var ARRY=[

"1px 1px 1px orange,2px 2px 2px yellow,3px 3px 2px green, 4px 4px 2px blue, 5px 5px 2px indigo,6px 6px 2px violet,-2px 2px 4px rgba(0,0,0,.5)",
"1px 1px 1px yellow,2px 2px 2px green, 3px 3px 2px blue, 4px 4px 2px indigo,5px 5px 2px violet,6px 6px 2px orange,-2px 2px 4px rgba(0,0,0,.5)",
"1px 1px 1px green, 2px 2px 2px blue, 3px 3px 2px indigo,4px 4px 2px violet,5px 5px 2px orange,6px 6px 2px yellow,-2px 2px 4px rgba(0,0,0,.5)",
"1px 1px 1px blue, 2px 2px 2px indigo,3px 3px 2px violet,4px 4px 2px orange,5px 5px 2px yellow,6px 6px 2px green, -2px 2px 4px rgba(0,0,0,.5)",
"1px 1px 1px indigo,2px 2px 2px violet,3px 3px 2px orange,4px 4px 2px yellow,5px 5px 2px green, 6px 6px 2px blue, -2px 2px 4px rgba(0,0,0,.5)",
"1px 1px 1px violet,2px 2px 2px orange,3px 3px 2px yellow,4px 4px 2px green, 5px 5px 2px blue, 6px 6px 2px indigo,-2px 2px 4px rgba(0,0,0,.5)"
]
var count=0;
window.onload=run

function run(){
rainbow=document.getElementsByClassName("RAINBOW")

for(i=0;i<rainbow.length;i++){
rainbow[i].onmouseover=function(){this.canRUN=true;setTimeout(run,1)}
rainbow[i].onmouseout=function(){this.canRUN=false;}

if (rainbow[i].canRUN){rainbow[i].style.textShadow=ARRY[count];setTimeout(run,1)}

}
count++
count%=ARRY.length

}

</script>