Solved

too Cool to wait a week or weeks. xml array

Posted on 2013-11-14
3
225 Views
Last Modified: 2013-11-15
I want to do something and I was hoping someone could jump in an accelerate this.
I want to load 5 starting players for each team there is a attribute Started="1"
I want to load their headshot and displays there points scored Points attribute. And finally a Tooltip that when you hover over the player it displays Firstname Lastname and Position. I suck at tooltips. I realize this would take me a week or two but I've learned some important tips. Like var sHomeOrAway = vh == 'H' ? 'home' : 'away I named away and home players awayplayer1 to awayplayer5 and homeplayer1 to homeplayer5 So sHomeOrAway  +  "player" + 1 this is the array part the 1 below is where you find player headshots and team logos and Tooltip text.
var pid =  player.attr('ID');   
             $('#imgcenter').attr('src', 'http://dev.sportsnetwork.com/aspdata/nhl2/NBA/Images/NBAlOGOSZ/'+ tid +".png");
           var txt;
			
			$('#imgplayer').attr("src","http://images.sportsnetwork.com/bask/nba/atthecourt/players/" + pid + ".jpg");
            txt = " " +
                player.attr("FirstName") + " " +
                player.attr("Lastname") + ", " +
                player.attr("Pos");

Open in new window


That can be tooltip part. The problem is I'll write and my mind thinks of if else if and it will be a bloated chunk of code when I'm starting off Lean what I have so far. I'm trying to learn at writing efficient and lean code. This part is perfect. In the code is the headshots for players. So if you need a good reference handle this and you got it.
Starters.html
18672.XML
0
Comment
Question by:powerztom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39649905
Have a look at this. The tooltips are added by using the jQueryUI library:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Q_28294614 // Chris Stanyon</title>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" type="text/css" media="screen" charset="utf-8"/>

		<script type="text/javascript">
		$(document).ready(function() {
			
			var xmlPath = '.';
			var xmlGameID = '18672';
			
			$.ajax({
				url:  xmlPath+"/"+xmlGameID+ ".xml",
				dataType: "xml"
			}).done(function(gameData) {
		     	
				var gameData = $(gameData);
			
				$('Team', gameData).each(function(i, team) {
					//get to the Stats
					indStats = $('Individual_Statistics', gameData).filter(function() { return $(this).attr('IS_TeamID') == $(team).attr('ID') });
					startingPlayers = $('Player', indStats).filter(function() { return $(this).attr('Started') == '1' });
					teamDiv = $('#' + $(team).attr('vh'));
					
					//set up the team header
					teamLogo = $('<img>').attr('src', 'http://dev.sportsnetwork.com/aspdata/nhl2/NBA/Images/NBAlOGOSZ/' + $(team).attr('ID') + '.png' );
					lineScore = $('Linescore', team).attr('Score');
					$('.teamHeader', teamDiv).append(teamLogo, lineScore);
		
					//add the players
					startingPlayers.each(function(i, player) {
						//create the headshot, set the title, and add the tooltip.
						playerImage = $('<img>').attr({
							'src': 'http://images.sportsnetwork.com/bask/nba/atthecourt/players/' + $(this).attr('ID')  + '.jpg',
							'title': $(this).attr("Firstname") + " " + $(this).attr("Lastname") + ", " + $(this).attr("Position") 
						}).tooltip()
						
						//add the player info to the Team Div
						playerDiv = $('<div>').html(playerImage).addClass('headshot');
						points = $('<p>').html( $(this).attr('Points') ).addClass('points').appendTo(playerDiv);
						$('.teamPlayers', teamDiv).append(playerDiv);
					});
				});
		     });
		
		
		});
		</script>

		<style type="text/css">
			.teamPlayers { overflow:hidden; }
			.headshot { float:left; text-align:center; padding: 5px;  }
			.points { text-align:center; }
		</style>
	</head>

	<body>
		
		<div id="H" class="teamRow">
			<div class="teamHeader"></div>
			<div class="teamPlayers"></div>
		</div>
		
		<div id="A" class="teamRow">
			<div class="teamHeader"></div>
			<div class="teamPlayers"></div>
		</div>

	</body>

</html>

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39651315
Chris, thanks I'm impressed with your skill maybe it's me cause I'm learning but you guys on EE THERE seems like there is nothing you guys can't do. And your coding is something I can definitely learn alot from. You guys all code a little bit differently from each other which is cool I think cause you learn a different style. Your style is definitely the best if not top 1 or 2 yet. Thanks I always appreciate and love  a solution cause it's a piece of your time you've devoted to me .
0
 

Author Comment

by:powerztom
ID: 39652118
Chris,

Thanks for the work you did with tooltip. I started using your code in a few different things I wanted to create a table that highlights a row then if clicked a nice dialog popup I was wondering if there is a prebuilt JueryUI Dialog popup where I can have player's entire stats based on player id. I learned alot from you and I like your style of writing code. I would love if you do this one. Then I let your chill for the weekend. I'm not relining on you more like learning from you. http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28295557.html hope you have a great weekend Thanks Tom
0

Featured Post

Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

687 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