Tom Powers
asked on
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.
DailyNHL1.html
nhl.xml
<!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> </td>
</tr>
<tr>
<td><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
</table>
<p> </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>
I'll attach necessary files to troubleshoot. Thanks EEDailyNHL1.html
nhl.xml
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Glad to help. Thanks for the points.
ASKER
EE is the Bomb!