[Last Call] Learn how to a build a cloud-first strategyRegister Now


too Cool to wait a week or weeks. xml array

Posted on 2013-11-14
Medium Priority
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") + ", " +

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 45

Accepted Solution

Chris Stanyon earned 2000 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="//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';
				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") 
						//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. http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28295557.html hope you have a great weekend Thanks Tom

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses
Course of the Month17 days, 21 hours left to enroll

830 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