SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code 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[i].className) ) {
    			  classElements[j] = els[i];
    			  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}

    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

  2. #2
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For anyone interested, I was pointed to the getAtribute option - ie

    the_array[the_element].getAttribute('rel')

    That works like a charm


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •