too Cool to wait a week or weeks. xml array

Posted on 2013-11-14
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', ''+ tid +".png");
           var txt;
			$('#imgplayer').attr("src","" + pid + ".jpg");
            txt = " " +
                player.attr("FirstName") + " " +
                player.attr("Lastname") + ", " +

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.
Question by:powerztom
  • 2
LVL 43

Accepted Solution

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">
		<meta charset="utf-8" />
		<title>Q_28294614 // Chris Stanyon</title>

		<script src="//"></script>
		<script src="//"></script>
		<link rel="stylesheet" href="" type="text/css" media="screen" charset="utf-8"/>

		<script type="text/javascript">
		$(document).ready(function() {
			var xmlPath = '.';
			var xmlGameID = '18672';
				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', '' + $(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': '' + $(this).attr('ID')  + '.jpg',
							'title': $(this).attr("Firstname") + " " + $(this).attr("Lastname") + ", " + $(this).attr("Position") 
						//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);

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

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



Open in new window


Author Closing Comment

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 .

Author Comment

ID: 39652118

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. hope you have a great weekend Thanks Tom

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
The viewer will learn how to dynamically set the form action using jQuery.
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…

713 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