I'm trying to do a simple animation for my html tables. I'm pulling information and displaying it in a html table/widget using JQueries, JSON, and knockoutjs data bindings. What I have so far is that I display only 3 columns (Name, Location, and Time). There is other information but I have it in a separate table. How it is set up is that on the main table, you click on the row of the specific item you want to see and that pops up the next table with all the information on that item (including the name, location, and time). I wish to animate the transition from the first table to the next with a simple "sliding" animation just like on a smartphone. I'm wishing to make it so any smartphone can use this.
Here are the simplified HTML and ViewModel files:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./lib/kockout-2.0.0.js" type="text/javascript"></script>
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./lib/widgetstyle1.css" type="text/css"></script>
<body>
<div data-bind="if: showTable" id="left">
<table width="100%"><thead>
<tr>
<th><a href="#" data-bind="click: SortByName">Name</th>
<th><a href="#" data-bind="click: SortByTimeObserved">Time</th>
<th><a href="#" data-bind="click: SortByLocation">Location</th>
</tr>
</thead>
<tbody data-bind="template: { name: 'Widget', foreach: rows }">
</tbody>
</table>
<script type="text/html" id="Widget">
<tr data-bind="click: function() {
Model.setSelectedEvent($data);
}"
<td data-bind="text Name"></td>
<td data-bind="text Time"></td>
<td data-bind="text Location"></td>
</tr>
</script>
</div>
<div data-bind="if: showDetails">
<!-- The next table is just a header with a "back-button" to return to first table -->
<!-- The table after that shows the all the content for the selected item -->
<table width="100%">
<td><button data-bind="click: function() {
Model.setSelectedEvent(null);
}">
<img src="recources/BackArrow.png" />
</button>
</td>
<td data-bind="text: SelectedEvent().Name"></td>
</table>
<table width="100%">
<tr>
<td style="text-align: left; width: 120px; font-size: 200%">Name: </td>
<td style="text-align: left; font-size: 200%" data-bind="text: SelectedEvent().Name"></td>
</tr>
<!-- I basically repeat this for all the additional information -->
</div>
</table>
<script src="ViewModel.js" type="text/javascript"></script>
</body>
</html>
Here is most of the javascript from the viewmodel file:
function Event(TimeObserved){
var self = this;
self.TimeObserved = TimeObserved;
}
function TableViewModel(){
var self = this;
self.sortColumn = ko.observable("TimeObserved");
self.sortAscending = ko.observable(true);
// Editable/Initial Data
self.rows = ko.observableArray([]);
self.Checker = "Name";
self.addRow = function(){
self.rows.push(new Event(""));
}
self.SortByName(){
self.Checker = "Name";
if(self.sortColumn == "Name")
self.sortAscending = !self.sortAscending;
else{
self.sortColumn = "Name";
self.sortAscending = true;
}
self.sorting();
});
}
self.SortByLocation(){
self.Checker = "Location";
if(self.sortColumn == "Location")
self.sortAscending = !self.sortAscending;
else{
self.sortColumn = "Location";
self.sortAscending = true;
}
self.sorting();
});
}
self.SortByTimeObserved(){
self.Checker = "TimeObserved"
if(self.sortColumn == "TimeObserved")
self.sortAscending = !self.sortAscending;
else{
self.sortColumn = "TimeObserved";
self.sortAscending = true;
}
self.sorting();
});
}
self.sorting = function(){
if(self.Checker = "Name"){
self.rows.sort(function(a,b){
if(self.sortAscending() == true)
return a.Name.toUpperCase() > b.Name.toUpperCase() ? -1 : 1;
else
return a.Name.toUpperCase() < b.Name.toUpperCase() ? -1 : 1;
});
}
if(self.Checker = "TimeObserved"){
self.rows.sort(function(a,b){
if(self.sortAscending() == true)
for(self.TimeObserved in self.rows)
return a.TimeObserved > b.TimeObserved ? 1 : a.TimeObserved < b.TimeObserved ? -1 : 0;
else
return a.TimeObserved < b.TimeObserved ? 1 : a.TimeObserved > b.TimeObserved ? -1 : 0;
}
}
if(self.Checker = "Location"){
self.rows.sort(function(a,b){
if(self.sortAscending() == true)
return a.Location.toUpperCase() > b.Location.toUpperCase() ? -1 : 1;
else
return a.Location.toUpperCase() < b.Location.toUpperCase() ? -1 : 1;
});
}
self.SelectedEvent = ko.observable();
self.showTable = ko.observable(true);
self.showDetails = ko.observable(false);
self.setSelectedEvent = function(ev){
if(ev == null){
self.SelectedEvent = ();
self.showTable(true);
self.showDetails(false);
}
else{
self.SelectedEvent(ev);
self.showTable(false);
self.showDetails(true);
}
}
}
//Access the server and pulls the info from it. I also apply my sorting() method to initially sort the info here.
function getEvents(model){
$.getJSON("http://mywebpage.com",
function (data){
model.rows([]);
$.each(data.d, function(i,item){
hendleEvent(item)
});
model.sorting();
}
);
}
//Populates the rows of the table with the info from the server I.E. item."infoIwant"
function handleEvent(item){
var newEvent = new Event(item.Name, item.TimeObserved, item.Location);
this.Model.rows.push(newEvent);
}
this.Model = new TableViewModel();
var eventInterval = setInterval(function(){
getEvents(this.Model);
}, 5000);
ko.applyBindings(this.Model);
