Solved

too Cool to wait a week or weeks. xml array

Posted on 2013-11-14
3
219 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
  • 2
3 Comments
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

762 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