Grab "span"'s "rel=xxx" value? 1

[youradds]

Hi,

First of all - I am full aware of jQuery for this kinda stuff, but I need to do it in pure javascript (due to the fact we only use jQuery on a small handful of pages, and can't afford to put a large file on the whole site - as its already quite busy). I wrote the following code:

[HIGHLIGHT=JavaScript]var start_color = "#ffe6aa";
var end_color = "#e7eff8";
var interval = 1200;

if (!navigator.appName.match("Internet Explorer")) {
// convert into RGB for Firefox/Chorme etc...
start_color = "rgb(" + hexToR(start_color) + ", " + hexToG(start_color) + ", " + hexToB(start_color) + ")";
end_color = "rgb(" + hexToR(end_color) + ", " + hexToG(end_color) + ", " + hexToB(end_color) + ")";
}

var the_array = new Array();

window.onload = function ()
{
the_array = getElementsByClassName(document,'flashingtext');
for (i = 0; i < the_array.length; i++) {
setInterval('flashtext(' + i + ')', interval );
}
}
function flashtext(the_element) {

if (the_array[the_element].rel) {
var the_values = the_array[the_element].rel.split(","); // start_color,end_color,interval
if (the_values[0]) { start_color = "#" +the_values[0] }
if (the_values[1]) { end_color = "#" +the_values[1] }
if (the_values[2] > 0) { interval = the_values[2] }

// convert into RGB for Firefox/Chorme etc...
if (!navigator.appName.match("Internet Explorer")) {
if (the_values[0]) { start_color = "rgb(" + hexToR(the_values[0]) + ", " + hexToG(the_values[0]) + ", " + hexToB(the_values[0]) + ")"; }
if (the_values[1]) { end_color = "rgb(" + hexToR(the_values[1]) + ", " + hexToG(the_values[1]) + ", " + hexToB(the_values[1]) + ")"; }
}
//alert("STart color: " + start_color + " and end: " + end_color + " and interval: " + interval);
}

if (the_array[the_element].style['backgroundColor'] != start_color) {
the_array[the_element].style['backgroundColor'] = start_color;
} else {
the_array[the_element].style['backgroundColor'] = end_color;
}
}
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els.className) ) {
classElements[j] = els;
j++;
}
}
return classElements;
})(classname, node);
}
}

function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}[/HIGHLIGHT]

This is basically to make it so instances of <a href="xxx" class="flashingtext">some text</a> would flash to and fro with the colors we pass in. As you can see, the code is already saving a "default" value. This works 100% perfectly using a <a>, such as:

<a class="flashingtext" rel="ffe6aa,e7eff8" href="xxx">some text</a>

...it will use the values from the rel="" part, and use them to change colors.

The problem seems to come from when I'm trying to use rel="" in a <span .,... such as:

<span class="flashingtext" rel="ffe6aa,e7eff8" >some text</span>

It never seems to pick up the value of rel="" from the <span parts

I've been going around in circles with this for ages, and am still no closer to find a way of doing it (I wish I could just use jQuery as I'm far more comfortable with that - but unfortunatly we just can't add any more content to the pages, even if they are cached)

Can anyone suggest a possible solution?

TIA!

Andy

 

[vacunita]

While the "a" link element has a defined rel property you can access directly in Js the span element does not.

You can set it in the HTML but since Js doesn't know the property exists it can't directly access it. And it's for this reason the getAttribute method exists.

... the_element].getAttribute('rel').split

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[youradds]

You legend! Works like a charm!

Thank you, thank you, thank you! (star coming your way)

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech