Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Can't display all games from xml file simple

I have a page that retrieves game matches and scores I coded a table to repeat itself in a grey Table. I tried making all settings to height 100% but I'm stuck I want a scrollbar that scrolls up and down. Originally the games autoscrolled but I changed it so maybe there is something left that is preventing the javascript from working.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NHL GAME LOG</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url: 'NHL.xml',
		dataType: "xml"
	}).done(function(data) {
		$('game', data).each(function(i, game) {
			newGame = $('#gameTemplate').clone().removeAttr('id');
			
			$('.awayLogo', newGame).html( $('<img>').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/logos/' + $('vteamid', game).text() + '.png') );
			$('.awayTeam', newGame).html( $('vteam', game).text() );
			$('.awayScore', newGame).html( $('vscore', game).text() );

			$('.homeLogo', newGame).html( $('<img>').attr('src', 'http://images.sportsnetwork.com/nhl/attherink/logos/' + $('hteamid', game).text() + '.png') );
			$('.homeTeam', newGame).html( $('hteam', game).text() );
			$('.homeScore', newGame).html( $('hscore', game).text() );

			$('.gameStatus', newGame).html( $('status', game).text() );
var newLink = $('<a>')
    .attr('href', 'http://dev.sportsnetwork.com/aspdata/nhl2/NHLGamecast.aspx?gameID=' + $('game_id', game).text() )
    .text( $('status', game).text() );



////  .attr('href', '#')
  //  .text( $('status', game).text() )
  //  .data('gameID', $('game_id', game).text() )
  //  .click( function(e) {
  //     e.preventDefault();
   //   window.location =
    //                    "DailyNHL.html#" + $('game_id', game).text();
  //  });

$('.gameStatus', newGame).html( newLink );
			$('#games ul').append( $('<li>').append(newGame) );
		});
			
		
		

	});
});
</script>
<style type="text/css" media="screen">
#games {
	width: 300px;
	height: 400px;
	overflow: hidden;
	top: 35px;
}
#games ul { padding: 0px; list-style-type:none; }
	#gameTemplate { display:none; }
	.gameLog { width: 222px; border-collapse:collapse; margin-bottom: 10px; }
	.gameLog td { text-align: center;  border: 1px solid #E8E1E1; }
	.gameLog col:nth-child(1) { width: 50px; }
	.gameLog col:nth-child(2) { width: 155px; }
	.gameLog col:nth-child(3) { width: 32px; }	
	.awayLogo img, .homeLogo img { width: 32px; height: 32px; }
.topdrop {
	background-color: #DBDBDB;
	position: absolute;
	height: 800px;
	width: 300px;
	left: 0px;
	top: 100px;
}
.HEADERTEXT {
	font-family: "Courier New", Courier, monospace;
	font-size: 18px;
	font-weight: bold;
	background-color: #FC3;
	margin: 1px;
	padding: 1px;
	float: left;
	width: auto;
	border: thin solid #000;
	position: absolute;
	top: 7px;
	left: 0px;
}
.auto-style1 {
	margin-bottom: 3px;
}
</style>
</head>

<body>
		
<div class="topdrop" height="100%" id="games">
	<ul></ul>
</div>
		
<table width="100%" height ="100%" "border="0" align="left" class="auto-style1">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<p>&nbsp;</p>
<table id="gameTemplate" class="gameLog">
  <colgroup><col><col><col></colgroup>
	<tr>
		<td class="awayLogo"></td>
		<td class="awayTeam"></td>
		<td class="awayScore"></td>
	</tr>
	<tr>
		<td class="homeLogo"></td>
		<td class="homeTeam"></td>
		<td class="homeScore"></td>
	</tr>
	<tr>
		<td colspan="3" class="gameStatus"></td>
	</tr>
</table>
<span class="HEADERTEXT">NHL GAMECAST 2014 </span>
</body>
</html>

Open in new window

 I'll attach necessary files to troubleshoot. Thanks EE
DailyNHL1.html
nhl.xml
0
powerztom
Asked:
powerztom
  • 2
1 Solution
 
Tom BeckCommented:
<div class="topdrop" height="100%" id="games">

height="100%" is not valid html. Height only accepts a number like height="100", not percent or px or anything else. Besides, you should always use css instead of the outdated height=, width=, etc.

Do this:

<div class="topdrop" style="height:100%;overflow:scroll" id="games">
0
 
powerztomAuthor Commented:
Beautiful TommyBoy it worked thanks for the tip. I thought this one wouldn't be too bad.
EE is the Bomb!
0
 
Tom BeckCommented:
Glad to help. Thanks for the points.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now