I'm currently developing an Android app using PhoneGap and I need assistance with dynamically changing the background color. Can someone guide me on how to achieve this?
Here is the HTML5 code snippet:
<div data-role="page">
<div data-role="content" >
<div class="my_body1">
<ul id="table_list_id"></ul>
</div>
</div>
</div>
And here is the CSS3 code snippet:
.my_body1 ul li {
float: left;
list-style-type: none;
border: 2px solid #a1a1a1;
padding: 5px 5px;
text-align: center;
width: 120px;
border-radius: 5px;
margin: 1%;
box-shadow: 5px 5px 5px #888888;
}
.my_body1 ul {
width: 100%;
}
.my_body1 ul li a {
text-decoration: none;
color: #525252;
}
Also, in jQuery:
function callXMLConnection() {
$("#table_list_id").empty();
$.support.cors = true;
$.ajax({
type: "GET",
url: "table.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache: false,
processData: false,
crossDomain: true,
success: function (data) {
$(data).find('xyz').each(function () {
var title = $(this).find('title').text();
var status = $(this).find('status').text();
if (status == 'vacant') {
var scripts = "<li><a href='#'>" + title + "</a></li>"
$("#table_list_id").append(scripts).trigger('create');
}
else if (status == 'occupied') {
var scripts = "<li><a href='#' >" + title + "</a></li>"
$("#table_list_id").append(scripts).trigger('create');
}
});
}
});
}
$(document).unbind('pageinit').bind('pageinit', function () {
callXMLConnection();
});
If the status is vacant, I'd like the background color to be green. If the status is occupied, then it should be red. Any help would be greatly appreciated!