Color two cells two different team colors

I wrote a if else statement and based on what teams are playing two cells called awaycolor and homecolor will turn color that represents there corresponding hockey teams. I made both cells Black so that when this script gets updated the colors will match Detroit RedWings and Philadelphia Flyers. Please assist EE ATTACHED IS A ZIP THAT CONTAINS A XML AND HTML FILE. XML FILE'S NAME GETS CHANGED UNLESS I PUT THEM IN A ZIP.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.textwhite {
	color: #FFF;
}
.format {	text-align: center;
	vertical-align: top;
}
.whitetext strong {
	color: #FFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var myVar;
var xmlPath = '/xml/nhl/scores/real';
var xmlGameID = '17823';
var teamid = "", lineColour, fillColour;
// new globals
var newTR, newestTR, _blnFirst = true, currSeq = -1;
var playTypes = {
    "GOAL": {subnode: 'Goal', teamidnode: 'ScoreTeamID', playeridnode: 'ScoreID'},
    "MISSED": {subnode: 'Missed', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
    "BLOCKED": {subnode: 'Blocked', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
    "ONGOAL": {subnode: 'OnGoal', teamidnode: 'ShootTeamID', playeridnode: 'ShootID'},
    "HIT": {subnode: 'Hit', teamidnode: 'HitTeamID', playeridnode: 'HitID'},
    "PENL": {subnode: 'Penalty', teamidnode: 'PONTeamID', playeridnode: 'PONID'},
    "PREADY": {subnode: '', teamidnode: '', playeridnode: ''},
    "PSTR": {subnode: '', teamidnode: '', playeridnode: ''},
    "PEND": {subnode: '', teamidnode: '', playeridnode: ''}
};

function getInfo(playNode) {
    var ret = {};
    ret.GameID = playNode.attr('GameID');
    //ret.Seq = Number(playNode.attr('Seq'));
    ret.Quarter = playNode.attr('Quarter');
    ret.PlayType = playNode.attr('PlayType');
    ret.TimeLeft = playNode.attr('TimeLeft');

    var narr = playNode.find('narrative');
    ret.NarrTxt = narr.attr('text');
    // debug
    //ret.NarrTxt = '[' + playNode.attr('Seq') + '] ' + ret.NarrTxt;

    var pt, subnode;
    if ((pt = playTypes[ret.PlayType]) && pt.subnode && (subnode = playNode.find(pt.subnode))) {
        ret.TeamID = subnode.attr(pt.teamidnode);
        ret.PlayerID = subnode.attr(pt.playeridnode);
    }

    return ret;
}

function checkPreviousPlays(d) {
    var inf, trnew;
    var PreviousPlays = d.find('PreviousPlays').find('Play');
    var i1, i2, ii;
    if (currSeq == -1) {
        // add all in order
        i1 = 0;
        i2 = PreviousPlays.length;
        ii = 1;
    } else {
        // add newest in reverse
        i1 = PreviousPlays.index(d.find('PreviousPlays').find('Play[Seq="' + currSeq + '"]')) - 1;
        i2 = -1;
        ii = -1;
    }
    for (var i = i1; i != i2; i += ii) {
        inf = getInfo($(PreviousPlays[i]));
        trnew = _blnFirst ? newestTR : $('<tr/>').html(newTR);
        trnew.find('td:nth-child(1)').find('img').attr('src', inf.TeamID ? 'http://images.sportsnetwork.com/nhl/attherink/logos/' + inf.TeamID + '.png' : "http://199.233.14.112/aspdata/NHL2/IMAGES/Teamlogo.png");
        trnew.find('td:nth-child(2)').html(inf.TimeLeft);
        trnew.find('td:nth-child(3)').html(inf.PlayType);
        trnew.find('td:nth-child(4)').html(inf.NarrTxt);
        if (!_blnFirst) {
            if (ii == 1) {
                newestTR.after(trnew);
            } else {
                newestTR.before(trnew);
            }
            newestTR = trnew
        }
        _blnFirst = false;
    }
    if (currSeq == -1) // reset to first tr for adding before in next calls
        newestTR = $('#scrolltable tr:first');
    currSeq = $(PreviousPlays[0]).attr('Seq');

    // now show current play info
    inf = getInfo(d.find('Play').first());
    $('#imgTeamlogo1').attr('src', inf.TeamID ? 'http://images.sportsnetwork.com/nhl/attherink/logos/' + inf.TeamID + '.png' : "http://199.233.14.112/aspdata/NHL2/IMAGES/Teamlogo.png");
    $('#imgplayerHeadshot').attr('src', inf.PlayerID ? 'http://images.sportsnetwork.com/NHL/players/' + inf.PlayerID + '.jpg' : "http://199.233.14.112/aspdata/NHL2/IMAGES/player.png");
    $('#txtAction').html(inf.PlayType);
    $('#txtGameP').html(inf.NarrTxt);
}

function loadData() {
    $.ajax({
        type: "GET",
        url:  xmlPath+"/"+xmlGameID+ ".xml",
        dataType: "xml",
        success: function(data) {
            var d = $(data);
            checkPreviousPlays(d, false);
        }
    });
}

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url:  xmlPath+"/"+xmlGameID+ ".xml",
        dataType: "xml",
        success: function(data) {
            var d = $(data);
            var Play = d.find('Play').first();

            Play.find('Team').each(function(i,Team){
                var team = $(Team);
                //var id = team.attr("ID").toLowerCase();
                var vh = team.attr('vh'); // A or H...
                var sHomeOrAway = vh == 'H' ? 'home' : 'away';
				teamid = team.attr('id')
                $('#txt' + sHomeOrAway).find('div').html(team.attr('name'));
            });

            newestTR = $('#scrolltable tr:first');
            newTR = newestTR.html();

            checkPreviousPlays(d, true);

            myVar = setInterval(loadData, 2000);

        }
    });
});
function Colorcheck() {
if (teamid == "145") { //Anaheim Ducks
		lineColour = 0xFFCC99;
		fillColour = 0x91764C;
	} else if (teamid == "147") { //Atlanta Thrashers
		lineColour = 0x0000FF;
		fillColour = 0x900028;
	} else if (teamid == "121") { //Boston Bruins
		lineColour = 0x000000;
		fillColour = 0xF9B426;
	} else if (teamid == "122") { //Buffalo Sabres
		lineColour = 0x000099;
		fillColour = 0x0E1F44;
	} else if (teamid == "123") { //Calgary Flames
		lineColour = 0x000000;
		if ((away_id == "129") || (home_id == "129")) {
			fillColour = 0xFF9933;
		} else {
			fillColour = 0xE13A3E;
		}
	} else if (teamid == "127") { //Carolina Hurricanes
		lineColour = 0x000000;
		fillColour = 0xD72A32;
	} else if (teamid == "124") { //Chicago Blackhawks
		lineColour = 0x000000;
		fillColour = 0xCC0000;
	} else if (teamid == "136") { //Colorado Avalanche
		lineColour = 0xFF0000;
		fillColour = 0x802939;
	} else if (teamid == "148") { //Columbus Blue Jackets
		lineColour = 0x003366; 
		if ( (away_id == "139") || (home_id == "139") || (away_id == "142") || (home_id == "142") ) {
			fillColour = 0xFF0033;
		} else {
			fillColour = 0x253E67;
		}
	} else if (teamid == "130") { //Dallas Stars
		lineColour = 0x009900;
		fillColour = 0x0A4A3D;
	} else if (teamid == "125") { //Detroit Red Wings
		lineColour = 0xFF0000;
		fillColour = 0xD5252D;
	} else if (teamid == "126") { //Edmonton Oilers
		lineColour = 0x000099;
		fillColour = 0xc5892d;
	} else if (teamid == "146") { //Florida Panthers
		lineColour = 0x000099;
		fillColour = 0xB67b11;
	} else if (teamid == "128") { //Los Angeles Kings
		lineColour = 0x0000FF;
		fillColour = 0x233289;
	} else if (teamid == "149") { //Minnesota Wild
		lineColour = 0x009900;
		fillColour = 0x004033;
	} else if (teamid == "129") { //Motreal Canadiens
		lineColour = 0xFF0000;
		fillColour = 0xB62630;
	} else if (teamid == "150") { //Nashville Predators
		lineColour = 0x000099;
		fillColour = 0x143048;
	} else if (teamid == "131") { //New Jersey Devils
		lineColour = 0xFF0000;
		fillColour = 0xD82D35;
	} else if (teamid == "133") { //New York Rangers
		lineColour = 0x0000FF;
		fillColour = 0x055B8D;
	} else if (teamid == "132") { //New York Islanders
		lineColour = 0x0000FF;
		if ((away_id == "128") || (home_id == "128")) {
			fillColour = 0xFF9933;
		} else {
			fillColour = 0x002843;
		}
	} else if (teamid == "143") { //Ottawa Senators
		lineColour = 0xFF0000;
		if ( (away_id == "146") || (home_id == "146")) {
			fillColour = 0xFF0033;
		} else {
			fillColour = 0xD89D00;
		}

	} else if (teamid == "134") { //Philadelphia Flyers
		lineColour = 0xFF6600;
		if ((away_id == "131") || (home_id == "131")) {
			fillColour = 0x000000;
		} else {
			fillColour = 0xF9773B;
		}
	} else if (teamid == "141") { //Phoenix Coyotes
		lineColour = 0xFF0000;
		if ((away_id == "125") || (home_id == "125")) {
			fillColour = 0XF4E3C7;
		} else {
		fillColour = 0xA51818;
		}
	} else if (teamid == "135") { //Pittsburgh Penguins
		lineColour = 0xFFCC00;
		fillColour = 0x000000;
	} else if (teamid == "142") { //San Jose Sharks
		lineColour = 0x000099;
		fillColour = 0x07515F;
	} else if (teamid == "137") { //St. Louis Blues
		lineColour = 0x3366FF;
		fillColour = 0x004C7D;
	} else if (teamid == "144") { //Tampa Bay Lightning
		lineColour = 0x000099;
		fillColour = 0x003D7D;
	} else if (teamid == "138") { //Toronto Maple Leafs
		lineColour = 0x3366FF;
		fillColour = 0x003559;
	} else if (teamid == "139") { //Vancouver Canucks
		lineColour = 0x000099;
		fillColour = 0x002B3E;
	} else if (teamid == "140") { //Washington Capitals
		lineColour = 0x0000FF;
		if ((away_id == "138") || (home_id == "138")) {
			fillColour = 0xFF0000;
		} else {
			fillColour = 0x364165;
		}
	} else {
		//do nothing
	}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

</head>

<body onLoad="MM_preloadImages('IMAGES/goalbutton2.png','IMAGES/hitbutton2.png','IMAGES/Shotbutton2.png','IMAGES/penaltybutton2.png')">
<table width="355" border="0">
  <tr>
    <td><table width="100%" border="0">
      <tr>
        <td width="14%" bgcolor="#000000"><div align="center" id="awaycolor"></div></td>
        <td width="36%"><div align="center" id="txtaway">
          <div align="left">awayteam</div>
        </div></td>
        <td width="37%"><div align="center" id="txthome">
          <div align="right">hometeam</div>
        </div></td>
        <td width="13%" bgcolor="#000000"><div align="center" id="homecolor"></div></td>
      </tr>
    </table>
      <table width="100%" border="0">
        <tr>
          <td><div align="left"><img src="http://199.233.14.112/aspdata/NHL2/IMAGES/Rink.png" width="355" height="163"></div></td>
        </tr>
      </table>
      <table width="100%" border="0">
        <tr>
          <td bgcolor="#000000"><div align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','IMAGES/goalbutton2.png',1)"><img src="http://199.233.14.112/aspdata/nhl2/IMAGES/goalbutton1.png" width="43" height="19" id="Image2"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','IMAGES/hitbutton2.png',1)"><img src="http://199.233.14.112/aspdata/nhl2/IMAGES/hitbutton1.png" width="42" height="17" id="Image3"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','IMAGES/Shotbutton2.png',1)"><img src="http://199.233.14.112/aspdata/nhl2/IMAGES/Shotbutton1.png" width="42" height="17" id="Image4"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','IMAGES/penaltybutton2.png',1)"><img src="http://199.233.14.112/aspdata/nhl2/IMAGES/penaltybutton1.png" width="56" height="17" id="Image5"></a></div></td>
        </tr>
      </table>
      <table width="100%" border="0">
        <tr>
          <td width="16%"><div align="center">
            <p><img src="http://199.233.14.112/aspdata/NHL2/IMAGES/Teamlogo.png" name="imgTeamlogo1" width="50" height="50" id="imgTeamlogo1"></p>
            <!--
            <p>&nbsp;</p>
            -->
          </div></td>
          <td width="16%"><div align="center">
            <p><img src="http://199.233.14.112/aspdata/NHL2/IMAGES/player.png" name="imgplayerHeadshot" width="50" height="50" id="imgplayerHeadshot"></p>
            <!--
            <p>&nbsp;</p>
            -->
          </div></td>
          <td width="20%"><div align="center">
            <p id="txtAction">Action</p>
            <!--
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            -->
          </div></td>
          <td width="48%"><div align="center">
            <p id="txtGameP">Gameplay Description</p>
            <!--
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            -->
          </div></td>
        </tr>
        <tr>
          <td colspan="4" bgcolor="#000000"><div align="center" class="whitetext"><strong>ICE LOG PERIOD #</strong></div></td>
        </tr>
      </table>
      <div style='height: 200px; overflow-y: scroll;'>
      <table width="100%" border="1" id="scrolltable">
        <tr>
          <td><div align="center">
            <p><img src="http://199.233.14.112/aspdata/NHL2/IMAGES/Teamlogo.png" alt="" width="50" height="50"></p>
          </div></td>
          <td class="format">Time</td>
          <td class="format">Action </td>
          <td class="format">Gameplay Description</td>
        </tr>
    </table></div></td>
  </tr>
</table>
</body>
</html>

Open in new window

hOCKEY.zip
powerztomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Can you use the
sHomeOrAway
variable?
0
Julian HansenCommented:
Not sure what you are asking

There is no use of lineColour or fillClour (set in ColourCheck)
The function ColourCheck is not being called.

Trying to understand what the question is.
0
Julian HansenCommented:
Some other comments - your doctype is html (HTML5) but you are still using inline attributes like bgcolor and width that have been deprecated as part of HTML5

Am I correct in my understanding that you are looking for a way in your AJAX success function to set the background colour of the different cells for home and away. You have written the function colourCheck but you are asking how to integrate that into what you ahve already?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
In case the answer to the above question is yes then you could do this

1. Change Colorcheck declaration to

function Colorcheck(teamid) { // Add teamid as a parameter

Open in new window

2. Add the following two lines to your AJAX success call

           Play.find('Team').each(function(i,Team){
                var team = $(Team);
                //var id = team.attr("ID").toLowerCase();
                var vh = team.attr('vh'); // A or H...
                var sHomeOrAway = vh == 'H' ? 'home' : 'away';
		teamid = team.attr('id')
                // Add the call to Colorcheck to set the background and line colours
		Colorcheck(teamid);
                // set the cell attributes here by creating an id out of concatenating
                // the sHomeOrAway value with the suffix 'color' - using that to find
                // the parent (<td>) and then setting the background and border colour
                // to the values set in Colorcheck(teamid)
		$('#' + sHomeOrAway + 'color').parent().css({backgroundColor: fillColour, borderColor: lineColor});
                $('#txt' + sHomeOrAway).find('div').html(team.attr('name'));
            });

Open in new window

The above code has not been tested so you may need to tweak it.
0
Julian HansenCommented:
I just noticed your Colorcheck is not prepending a '#' to the color values so you need to change your .each loop like shown below.

Also - the sample xml does not seem to yield team values that result in a colour being assigned in Colorcheck - so you might want to look at giving lineColour and fillColour default values in Colorcheck if none of the if statements match.

           Play.find('Team').each(function(i,Team){
                var team = $(Team);
                //var id = team.attr("ID").toLowerCase();
                var vh = team.attr('vh'); // A or H...
                var sHomeOrAway = vh == 'H' ? 'home' : 'away';
		teamid = team.attr('id')
		Colorcheck(teamid);
                // Easier to put the '#' on the front of the colours here rather than
                // update all the values in the Colorcheck function
		$('#' + sHomeOrAway + 'color').parent().css( { backgroundColor : '#' + fillColour, borderColor: '#' + lineColour} );
                $('#txt' + sHomeOrAway).find('div').html(team.attr('name'));
            });

Open in new window

0
smeghammerCommented:
As noted, the function is never called, and some of the variables are not defined. It also looks like if the function IS called from line 8 as julianH says, you will get a bunch of undefined errors (away_id, home_id).

I think what you will need to do is re work the logic of the Colorcheck function. At the moment it looks like you are trying to execute the cell colour setting in ONE go - there are checks for home/away etc. I would treat each call from within the loop inside the document.ready function (Play.find().each) as independent calls to the Colorcheck function. Pass in addition to the team colour, the away/home status and set the relevant HTML elements in turn. Your loop does indeed pull out the various data needed (team ID, home/away status etc) so this should be relatively simple to do.

I'll have a tinker and get back later on hopefully.
0
smeghammerCommented:
OK try this to get you going:

After you set the team name (line 130), add the following call to the Colourcheck() function:

var colourObj = Colorcheck(team.attr('ID'),sHomeOrAway);

Open in new window


I modified the function to accept these parameters. I also modified to use a switch/case statement as it is more efficient. Finally, it now returns the colour values. Note I have just used the two teams in your XML:

function Colorcheck(team_id,homeOrAway) 
{
  
  var line_colour = "";
  var fill_colour = "";
  
  switch(team_id)
  {
    case "125":   //Detroit Red Wings
      line_colour = "FF0000";
      fill_colour = "D5252D";
    break;
    case "134":      //Philadelphia Flyers
      line_colour = "FF6600";
      fill_colour = "F9773B";
    break;
  }
  
  var obj = new Object();
  obj.line = line_colour;
  obj.fill = fill_colour;
  return obj;
}

Open in new window


[Note I have not added the code for the home/away stuff as I am not sure what it needs to do - you should be able to add this logic inside each case that requires it.]

Finally, back in the document.ready() block, immediately after my new call to Colourcheck(), I set the background and border based on the values returned from Colourcheck:

document.getElementById("txt"+sHomeOrAway).style.border = "1px solid #" + colourObj.line;
document.getElementById("txt"+sHomeOrAway).style.backgroundColor = "#" + colourObj.fill;

Open in new window


One thing to bear in mind is variable scope - most of the initial errors appeared to be either undefined variables, or variables that were incorrect in scope. In this context, HTML page global variables do not work - there is a logical conflict if you try and use page variables with AJAX - don't forget that AJAX is essentially independent HTTP requests in a similar way that images on a page are independent HTTP requests.
Rink2.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
As he is already using JQuery - why not stick with that?
0
smeghammerCommented:
I'm old skool...
Of course, set the styles like so instead:

 $('#txt' + sHomeOrAway).css("border","1px solid #" + colourObj.line);
$('#txt' + sHomeOrAway).css("background-color","#" + colourObj.fill); 

Open in new window

0
powerztomAuthor Commented:
Alot of good advice here I wish I could have awarded more points to others that had good ideas.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.