Forum Moderators: open
Any way the first part of my goal is to have the script unobtrusively select the id that contains the anchors with the ids (done).
The second part of my goal is to use their id value (such as "color789def"), use JavaScript's split ability and get the desired color for the anchor (half done). I have a function called what_is_color() in the file below though I'm not sure at the moment how to get the element's ID (I figure this will make it useful after the for loop is declared). Suggestions?
The code I have below changes each row of anchors to one class or another. I'm stuck on that because frankly there are too few good working examples of JavaScript for each loops (so this helps me a bit by creating another good example presuming I can get this to work).
- John
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//<![CDATA[
function what_is_color() {
var color_id = 'color369111';
var color = color_id.split("color");
alert(color[1]);
}function add_color(id)
{
if(document.getElementsByTagName)
{
var div = document.getElementById(id);
var rows = div.getElementsByTagName("a");for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = 'toggle_off';
}else{
rows[i].className = 'toggle_on';
}
}
}
}function start() {
add_color('editorcolors');
}
window.onload = start;
</script>
<style type="text/css">
.toggle_off {background-color: #00f;}
.toggle_on {background-color: #f00;}
#editorcolors {
background-color: #ccc;
float: left;
}
#editorcolors div.colors {
float: left;
width: 80px;
}
#editorcolors div.greys {
clear: none;
float: left;
padding: 0px 8px 0px 0px;
width: 80px;
}
#editorcolors #greys a {
clear: left;
}
#editorcolors div.colorset {
float: left;
padding: 8px;
}
#editorcolors div.colorset a {
border: #000 solid 1px;
display: block;
float: left;
height: 24px;
margin: 0px;
width: 80px;
}
#editorcolors div a:hover, #editorcolors div a:focus {
border: #fff solid 1px;
}
</style>
</head><body>
<div id="editorcolors">
<div class="colorset">
<div class="greys">
<a id="color000000" tabindex="3">000000</a>
<a id="color999999" tabindex="3">999999</a>
<a id="colorffffff" tabindex="3">ffffff</a>
</div>
<div class="colors">
<a id="colorff0000" tabindex="3">ff0000</a>
<a id="color00ff00" tabindex="3">00ff00</a>
<a id="color0000ff" tabindex="3">0000ff</a>
</div>
</div>
</div></body>
</html>
var rows = div.getElementsByTagName("a");
for(i = 0; i < rows.length; i++){
var elem = rows[i];
var elemid = elem.id;
var color = elemid.split('color')[1];
elem.style.backgroundColor = "#"+color;
}
when you code the real thing, you'll probably want to add some if() conditions in there to ensure that the id exists, that it starts with "color", etc.
having all those colors forced into the ID doesn't make a lot of sense... wouldn't it be better just to add a style="" attribute to each one, instead of hijacking the ID?
There isn't much difference between:
<a id="color0000ff">0000ff</a><a style="background:#0000ff">0000ff</a>And when you apply a style inline like that, it's still retrievable like this:
var color = element.style.backgroundColor;tomayto, tomahto...
- John
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//<![CDATA[
function add_color(id)
{
if(document.getElementsByTagName)
{
var div = document.getElementById(id);
var rows = div.getElementsByTagName("a");
for(i = 0; i < rows.length; i++)
{
var elem = rows[i];
var elemid = elem.id;
var color = elemid.split('color')[1];
elem.style.backgroundColor = "#"+color;
}
}
}function start() {
add_color('editorcolors');
}
window.onload = start;
</script>
<style type="text/css">
.toggle_off {background-color: #00f;}
.toggle_on {background-color: #f00;}
#editorcolors {
background-color: #ccc;
float: left;
}
#editorcolors div.colors {
float: left;
width: 80px;
}
#editorcolors div.greys {
clear: none;
float: left;
padding: 0px 8px 0px 0px;
width: 80px;
}
#editorcolors #greys a {
clear: left;
}
#editorcolors div.colorset {
float: left;
padding: 8px;
}
#editorcolors div.colorset a {
border: #000 solid 1px;
display: block;
float: left;
height: 24px;
margin: 0px;
width: 80px;
}
#editorcolors div a:hover, #editorcolors div a:focus {
border: #fff solid 1px;
}
</style>
</head><body>
<div id="editorcolors">
<div class="colorset">
<div class="greys">
<a id="color000000" tabindex="3">000000</a>
<a id="color999999" tabindex="3">999999</a>
<a id="colorffffff" tabindex="3">ffffff</a>
</div>
<div class="colors">
<a id="colorff0000" tabindex="3">ff0000</a>
<a id="color00ff00" tabindex="3">00ff00</a>
<a id="color0000ff" tabindex="3">0000ff</a>
</div>
</div>
</div></body>
</html>
