Tom Powers
asked on
scroll mini html table vertically
I have a web page that data scrolls up and down I also need a page that scrolls data vertically
I have a plugin http://wmh.github.io/jquery-scrollbox/ that shows right to left and left to right is what I want but I insert code and data doesn't move.I need >>>>>>>>>>>> then <<<<<<
The website displayed this to scroll left to right or Left direction: 'h',
distance: 140,
queue: 'demo6-queue'
jquery.scrollbox.js
DailyNBA.html
I have a plugin http://wmh.github.io/jquery-scrollbox/ that shows right to left and left to right is what I want but I insert code and data doesn't move.I need >>>>>>>>>>>> then <<<<<<
The website displayed this to scroll left to right or Left direction: 'h',
distance: 140,
queue: 'demo6-queue'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NBA GAME LOG</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.scrollbox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: 'nba.xml',
dataType: "xml"
}).done(function(data) {
$('game', data).each(function(i, game) {
newGame = $('#gameTemplate').clone().removeAttr('id');
$('.awayLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/nbalogos/' + $('vteamid', game).text() + '.png') );
$('.awayTeam', newGame).html( $('vteam', game).text() );
$('.awayScore', newGame).html( $('vscore', game).text() );
$('.homeLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/nbalogos/' + $('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/nba2/Default.aspx?gameID=' + $('game_id', game).text() )
.text( $('status', game).text() );
$('.gameStatus', newGame).html( newLink );
$('#games ul').append( $('<li>').append(newGame) );
});
$('#games').scrollbox({
});
});
});
</script>
<style type="text/css" media="screen">
#games {
width: 225px;
height: 400px;
overflow: hidden;
}
#games {
width: 365px;
height: 300px;
overflow: hidden;
background-color: #FF9;
}
#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: }
.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; }
#listing {
position: absolute;
width: 370px;
height: 416px;
z-index: 15;
left: 382px;
top: 8px;
}
</style>
</head>
<body>
<div id="games">
<ul></ul>
</div>
<p><img src="http://dev.sportsnetwork.com/aspdata/Gamescast/Images/TSN.png" width="200" height="150"><img src="http://dev.sportsnetwork.com/aspdata/Gamescast/Images/insideNBA.png" width="200" height="150"></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>
</body>
</html>
NBA.xmljquery.scrollbox.js
DailyNBA.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER