Solved

wrong logo Jquery

Posted on 2013-10-30
12
244 Views
Last Modified: 2013-10-31
I got a scoreboard that I'm working on almost done thank god but take a look two things are missing ScoreBoard

And also there is a ST Rams logo in the middle of row that says ball is on and rows for Down and Yards Well th ST Rams is just a imageholder for the team that HAS THE BALL PossID is a xml attribute that tells you which team has possession. So in this case instead of the ST Rams it would be Eagles or Packers as long as there PossID IS EQUAL TO TEAM id

here is code it is a little bloated I'm working on a leaner version. it's

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<style type="text/css">
.ballonyd {
	color: #FFF;
}
.centermid {
	text-align: center;
	vertical-align: middle;
}
.staduim {
	color: #FFF;
}
.awayscore {
	color: #FFF;
	font-size: 55px;
    font-weight: bold;
}
.homescore {
	color: #FFF;
	font-size: 55px;
    font-weight: bold;
}
.formatcellcenter {text-align: center;
	vertical-align: middle;
}
.rr {background-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 xmlPath = '.' //'/xml/nfl/scores/real';
        var xmlGameID = 'AB-3171_29'; 
		var PossID;
		var teamNames = {
    "079": "GIANTS",
    "068": "LIONS",
    "084": "49ERS",
    "063": "BEARS",
    "083": "CHARGERS",
    "085": "SEAHAWKS",
    "088": "REDSKINS",
    "061": "FALCONS",
    "062": "BILLS",
    "064": "BENGALS",
    "065": "RAVENS",
    "066": "COWBOYS",
    "067": "BRONCOS",
    "069": "PACKERS",
    "070": "TITANS",
    "071": "COLTS",
    "072": "CHIEFS",
    "073": "RAIDERS",
    "074": "RAMS",
    "075": "DOLPHINS",
    "076": "VIKINGS",
    "077": "PATRIOTS",
    "078": "SAINTS",
    "080": "JETS",
    "081": "EAGLES",
    "082": "STEELERS",
    "086": "CARDINALS",
    "087": "BUCS",
    "089": "PANTHERS",
    "090": "JAGUARS",
    "120": "BROWNS",
    "151": "TEXANS",
    "685": "A-F-C",
    "686": "N-F-C"
};
	$(document).ready(function(){
    $.ajax({
        type: "GET",
        url:  xmlPath+"/"+xmlGameID+ ".xml",
        dataType: "xml",
        success: function(data) {
            var d = $(data);
			
            d.find('Team').each(function(i,Team){
                var team=$(Team);
                var id = team.attr("ID").toLowerCase();
                var teamname = team.attr("name");
                var homeOrAway = team.attr("vh");
				var selector1 = (homeOrAway=="A") ? '#Visitor' : '#Hometeam' ;
                var selector2 = (homeOrAway=="A") ? '#VTeamname' : '#HTeamName' ;

                $(selector1).html(teamname);
                $(selector2).html(teamNames[id]);
                
                var d = $(data);
                d.find('Team').each(function(i,Team){
                   
				// var d = $(data);
              //  d.find('Team').each(function(i,Team){
                    if ($(Team).attr('vh') == "A") {
					 // var awayname =$(Team).attr('name'); 
         // var awayname = $(Team).attr('name');
                                        // var vs2 = VS1.attr('Score');
                                        $('#txtAway').html(teamname);
                        $('#imgVisitHelmet').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/'+$(Team).attr('ID')+".png");
 }
                })
                    
					 var VS1 = $(Team).find('Linescore');
         // var vs2 = VS1.attr('Score');
          $('#VS').html(VS1.attr('Score'));
		   if ($(Team).attr('vh') == "H") {
					$('#txthome').html(teamname);
                        $('#imgHomeHelmet').attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/'+$(Team).attr('ID')+".png");

                   
					 var HS1 = $(Team).find('Linescore');
         // var hs2 = HS1.attr('Score');
          $('#HS').html(HS1.attr('Score')); 
		  
		  }
                });
          //  });
        } 
    });
});
     function loadData() {
  $.ajax({
    type: "GET",
    url:  xmlPath+"/"+xmlGameID+".xml",
    dataType: "xml",
    success: function(data) {
      var d = $(data);
      var Play = d.find('Play');
	  $('#Staduim').html($(Play).attr('Location'));
	  var inn = Play.attr('TimeLeft');
	   PossID = Play.attr('PossID');
                                $('#time').html(inn); // timeleft[inn]
                                var bo = Play.attr('BallYrd');
                                $('#ballon').html(bo); // ballyrd[bo]
                                var dn = Play.attr('ResultingDown');
                                $('#Down').html(dn); // resultingdown[dn]
                                $('#downX').html(dn);
                                var ydtogo = Play.attr('ResultingToGo');
                                $('#Ydstogo').html(ydtogo); // resultingtogo[ydtogo]
                                $('#yardX').html(ydtogo);
      d.find('Team').each(function(i,Team){
		//var vh = team.attr('vh'); // A or H...
        //  var sHomeOrAway = vh == 'H' ? 'home' : 'away';
		//$('#txt' + sHomeOrAway).html(team.attr('name'));  
        if ($(Team).attr('vh') == "A") {
			 var VS1 = $(Team).find('Linescore');
			 
			    
        var vs2 = VS1.attr('Score');
		 //$('#txtAway').html(awayname);
          	$('#VS').html(VS1.attr('Score'));
			$('#miniaway').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $(Team).attr('ID') + '.png');
		   $(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodA1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodA2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodA3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodA4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodA5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodA5').text($(this).attr('score'));
						}
					});
			 if ($(Team).attr('ID') == $(Play).attr('PossID')) {
				 
         $('#minipossid').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + PossID + '.png');
		 
         
     
			
         }  
        }
		 
		// d.find('Team').each(function(i,Team){
			  
        if ($(Team).attr('vh') == "H") {
			 var HS1 = $(Team).find('Linescore');
			 var homename =$(Team).attr('name');
         // var hs2 = HS1.attr('Score');
          $('#HS').html(HS1.attr('Score')); 
		//   $('#txtHome').html(homename);
         // var vs2 = VS1.attr('Score');
         $('#minihome').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $(Team).attr('ID') + '.png'); 	
		   $(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodH1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodH2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodH3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodH4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodH5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodH5').text($(this).attr('score'));
						}
					});
			if ($(Team).attr('ID') == $(Play).attr('PossID')) {
				
         $('#minipossid').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + PossID + '.png');
		  
			
		   
    
		
     
			
			}
        }
    // });
	 });
	  
	  // each
        // changed all below to just use the variables that contain the text directly, as the arrays do not exist and don't seem necessary in this situation
      
      var qtr = Play.attr('Quarter') ;
	  if (qtr == 4) {
		$('#Q').html("4th Quarter");  
	  } else if (qtr==3) {
		 $('#Q').html("3rd Quarter");
	 } else if (qtr==2) {
		 $('#Q').html("2nd Quarter");
		 } else if (qtr==1) {
		 $('#Q').html("1st Quarter");
		 } else {
							$('#Q').text("FINAL");
						$('#quarter').text("");
		 }
       // quarter[qtr]
     // ++counterXml;
    }  
  }); //ajax

  }
 
		</script>
</head>

<body>
<table width="700" border="0">
  <tr>
    <td bgcolor="#000000"><table width="100%" border="0">
      <tr>
        <td width="13%" height="150" class="centermid"><span class="rr"><img src="http://powerzsoftware.com/tsn/IMAGES/VistorHelmet.png" alt="" name="imgVisitHelmet" width="48" height="62" class="formatcellcenter" id="imgVisitHelmet"></span></td>
        <td width="13%" class="centermid"><span class="awayscore" id="VS">0</span></td>
        <td width="46%"><table width="100%" border="0">
          <tr bgcolor="#E1E1E1">
            <td width="12%"><div align="center" id="time"></div></td>
            <td width="36%"><div align="center" id="Q"></div></td>
            <td width="11%"><div align="center">1</div></td>
            <td width="10%"><div align="center">2</div></td>
            <td width="9%"><div align="center">3</div></td>
            <td width="11%"><div align="center">4</div></td>
            <td width="11%"><div align="center">OT</div></td>
          </tr>
          <tr>
            <td><div align="center"><img src="http://powerzsoftware.com/tsn/nfl//miniLogos/074.png" alt="" name="miniaway" width="27" height="24" id="miniaway"></div></td>
            <td bgcolor="#FFCC66"><div align="left" id="txtaway"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodA5"></div></td>
          </tr>
          <tr>
            <td><div align="center"><img src="http://powerzsoftware.com/tsn/nfl//minilogos/071.png" alt="" name="minihome" width="25" height="22" id="minihome"></div></td>
            <td bgcolor="#FFCC66"><div align="left" id="txthome"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH1"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH2"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH3"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH4"></div></td>
            <td bgcolor="#FFFF99"><div align="center" id="periodH5"></div></td>
          </tr>
        </table>
          <table width="100%" border="0">
            <tr>
              <td width="12%"><div align="center"><img src="http://powerzsoftware.com/tsn/nfl/minilogos/football.png" alt="" name="imgball" width="32" height="21" id="imgball3"></div></td>
              <td width="36%" bgcolor="#006633"><div align="center" class="ballonyd"><strong>Ball on the </strong></div></td>
              <td width="10%" bgcolor="#FFFF33"><div align="center" id="ballon"></div></td>
              <td width="11%" bgcolor="#000000"><img src="http://powerzsoftware.com/tsn/nfl/miniLogos/079.png" alt="" name="minipossid" width="27" height="24" id="miniaway2"></td>
              <td width="9%" bgcolor="#FFCC33"><div align="center" id="downX"></div></td>
              <td width="11%" bgcolor="#FF9900"><div align="center">&amp;</div></td>
              <td width="11%" bgcolor="#FFCC33"><div align="center" id="yardX"></div></td>
            </tr>
          </table>
          <p align="center"><span class="staduim"><strong id="Staduim">Staduim</strong></span></p></td>
        <td width="14%" class="centermid"><span class="homescore" id="HS">0</span></td>
        <td width="14%" class="centermid"><img src="http://powerzsoftware.com/tsn/IMAGES/VistorHelmet.png" alt="" name="imgHomeHelmet" width="61" height="78" id="imgHomeHelmet"></td>
      </tr>
      <tr>
        <td colspan="5"></td>
      </tr>
    </table></td>
  </tr>
</table>
<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{

loadData();
//checkStatus();
}
</script>
</body>
</html>

Open in new window

Please Help with both issues. We had all this upgrade servers Firewall so now I have to post example on my website. I picked the NY Giants too see it automate but you knew that.
NFLGAME.zip
0
Comment
Question by:powerztom
  • 7
  • 5
12 Comments
 

Author Comment

by:powerztom
ID: 39612885
I  figured out the away team text but  I'm still having a issue with NY Giants logo again I want that to transform into either green bay or Philly based on the PossID VALUE THAT ID Identifies the team and team's logo. Please Help
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39613164
Try the following, it seemed to me that the respective checks on PossID being equal to either team id could be taken out and the statement taken out of the each loop. Most important seemed the mismatch between name and id of the image, you can actually get rid of the names where you only use #id in css and jquery to access everything. Some more if/else constructions seemed unnecessary and I replaced those by creating selectors for the elements based on v/h. In the process, I shaved off about 100 lines. It's not always about code size but the way it was before made it all the more difficult to understand what's going on. Note that this could all be even smoother if you use consistent id's in the html, for example awayscore/homescore instead of VS/HS, even better maybe (because of the vh attribute containing A/H) scoreV/scoreA or something like that, then all those selectors become really simple and clear what they're for.
  $(document).ready(function(){
    $.ajax({
      type: "GET",
      url:  xmlPath+"/"+xmlGameID+ ".xml",
      dataType: "xml",
      success: function(data) {
        var d = $(data);

        d.find('Team').each(function(i,Team){
          var team = $(Team);
          var id = team.attr("ID").toLowerCase();
          var teamname = team.attr("name");
          var homeOrAway = team.attr("vh");

          var selector3 = (homeOrAway=="A") ? '#txtaway' : '#txthome' ;
          var selector4 = (homeOrAway=="A") ? '#imgVisitHelmet' : '#imgHomeHelmet' ;
          var selector5 = (homeOrAway=="A") ? '#VS' : '#HS' ;
          $(selector3).html(teamname);
          $(selector4).attr('src', 'http://powerzsoftware.com/tsn/nfl/PS/' + team.attr('ID') + '.png');
          $(selector5).html(team.find('Linescore').attr('Score'));
        });
      }
    });
  });

  function loadData() {
    $.ajax({
      type: "GET",
      url:  xmlPath+"/"+xmlGameID+".xml",
      dataType: "xml",
      success: function(data) {
        var d = $(data);
        var Play = d.find('Play');
        $('#Staduim').html($(Play).attr('Location'));
        var inn = Play.attr('TimeLeft');
        PossID = Play.attr('PossID');
        $('#miniaway2').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + PossID + '.png');

        $('#time').html(inn);
        var bo = Play.attr('BallYrd');
        $('#ballon').html(bo);
        var dn = Play.attr('ResultingDown');
        //$('#Down').html(dn);
        $('#downX').html(dn);
        var ydtogo = Play.attr('ResultingToGo');
        //$('#Ydstogo').html(ydtogo);
        $('#yardX').html(ydtogo);

        d.find('Team').each(function(i,Team){
          var team = $(Team);
          var vh = team.attr('vh'); // A or H...
          var sHomeOrAway = vh == 'H' ? 'home' : 'away';
          $('#txt' + sHomeOrAway).html(team.attr('name'));

          $('#' + (vh == 'H' ? 'H' : 'V') + 'S').html(team.find('Linescore').attr('Score'));
          $('#mini' + sHomeOrAway).attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + team.attr('ID') + '.png');
          $('#period' + vh + Math.max(5, $(this).attr('Qtr'))).text($(this).attr('score'));
        }); // each Team

        var qtr = Play.attr('Quarter') ;
        if (qtr == 4) {
          $('#Q').html("4th Quarter");
        } else if (qtr==3) {
          $('#Q').html("3rd Quarter");
        } else if (qtr==2) {
          $('#Q').html("2nd Quarter");
        } else if (qtr==1) {
          $('#Q').html("1st Quarter");
        } else {
          $('#Q').text("FINAL");
        }
        // ++counterXml;
      }  
    }); //ajax
  }

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39614728
Rob You fixed it and cleaned up a mess. Thank You One thing happened the score for each individual quarter disappeared.

 $('#' + (vh == 'H' ? 'H' : 'A') + 'A').html(team.find('LineQuarter').attr('Score'));
          $('#mini' + sHomeOrAway).attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + team.attr('ID') + '.png');
          $('#period' + vh + Math.max(5, $(this).attr('Qtr'))).text($(this).attr('score'));
        }); // each Team

Open in new window


One thing when I use this following code else if ($(this).attr('Qtr') == "6") this allows Double Over Time. And this bloated amount of code works.

$(Team).find('LineQuarter').each(function(){
						if($(this).attr('Qtr') == "1") {
							$('#periodH1').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "2") {
							$('#periodH2').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "3") {
							$('#periodH3').text($(this).attr('score'));
						} else if ($(this).attr('Qtr') == "4"){
							$('#periodH4').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "5"){
							$('#periodH5').text($(this).attr('score'));	
						} else if ($(this).attr('Qtr') == "6"){
							$('#periodH5').text($(this).attr('score'));
						}
					});

Open in new window



I'm glad you couldn't sleep and woke up and did this. That was a cool surprise.
0
 

Author Comment

by:powerztom
ID: 39614754
Actually my method brings up the Identical Line score for home and away. So now we have a situation? it's my programming style and your selectors for vh Right?
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39614763
Hmm, I have removed the each for LineQuarter by mistake. I'll add it back in and test it better this time, then I'll post it again...
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39614779
Besides the loop, the code needed to use min() instead of max(), that was a reasoning error on my part.

So in the code I posted line 57 (and in your post line 3) needs to be replaced by:
					$(Team).find('LineQuarter').each(function(){
            $('#period' + vh + Math.min(5, $(this).attr('Qtr'))).text($(this).attr('score'));
					});

Open in new window

The xml file contains only period 0 so testing has still been limited to that for now.

Note that in your code you test for Qtr 5 or 6 going into the same html element, that is the same in my code but does mean that you might lose information unless that is how the xml data works, OT being the last period that is played?
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39614786
By the way, in the code you just posted, line 1 is different from my code! On purpose?
0
 

Author Comment

by:powerztom
ID: 39614801
Not on purpose  LineQuarter instead of Linescore Right ? My bad not you.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39614820
No, I'm talking about line 1 of the first code block.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39614850
you posted:
$('#' + (vh == 'H' ? 'H' : 'A') + 'A')

Open in new window

I posted:
$('#' + (vh == 'H' ? 'H' : 'V') + 'S')

Open in new window

Note that vh already contains H or A (despite the name), so if you have made html elements with id's HA and AA for score (where they were previously HS and VS) then you could just use
$('#' + vh + 'A')

Open in new window

Like I said before, it would actually be a great idea to give all your elements consistent id's, then all those "vh == 'H' ? ..." checks could be taken out, just using the vh and/or homeOrAway variables instead.
0
 

Author Comment

by:powerztom
ID: 39614862
$('#' + (vh == 'H' ? 'H' : 'A') + 'A').html(team.find('LineQuarter').attr('Score'));

 $('#' + (vh == 'H' ? 'H' : 'V') + 'S').html(team.find('Linescore').attr('Score'));

Again My Bad. Let me ask you would putting a 6 in place of 5 in

$(Team).find('LineQuarter').each(function(){
            $('#period' + vh + Math.min(5, $(this).attr('Qtr'))).text($(this).attr('score'));

would that write to last column and last two cells like the OT Column just in case the game went into double Overtime?
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39614896
Well you can only put a 6 in there if the corresponding html elements exist. As the html was before, they didn't otherwise I would have thought it was a typo in the code. So that's not a real answer to your question but I can't answer that because it all depends on how you want to handle that situation if the current way, overwriting the existing value, is not correct.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now