hi i am new to coding and i am working on a jquery mobile web app. basically i want to build a news application that dynamically populate list view and create a dynamic html page. i found this code on the internet and i have editored it to the best of my knowledge.but the after editing the code is now a mess. can someone please help me clean up this code? thanks in advance.
here is the html page
<!DOCTYPE html>
<html>
<head>
<title>Latest news ! </title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./js/lib/jqm/jquery.mobile-1.3.0.css" />
<script src="./jquery-1.9.1.min.js"></script>
<!-- Adding deafult button -->
<script type="text/javascript">
$(document).bind('mobileinit', function(){
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript">
$("#mydiv").parent().css({position:'relative'});
$("#mydiv").css({top: 200, position:'absolute'
});
</script>
<!-- fade is the default transition style -->
<script type="text/javascript">
$(document).bind('mobileinit', function(){
$.mobile.defaultPageTransition = "none";
});
</script>
<script src="./js/lib/jqm/jquery.mobile-1.3.0.js"></script>
<!-- to avoid header text from being
truncated overwrite the margin -->
<style type="text/css">
img,h5 {
margin-right: 5%;
margin-left: 5%;
}
</style>
</head>
<body>
<script src="./js/app/news.js"></script>
</body>
</html>
here is the js
var newsInfoFile = "./news-details.json";
$.getJSON(newsInfoFile, function(news){
//Start off with an empty list every time to get the latest from server
$('#newsList').empty();
$.each(news, function(i, newe){
$('#newsList').append(generateNeweLink(newe));
});
//refresh the list view to show the latest changes
$('#newsList').listview('refresh');
});
function generateNeweLink(newe){
//debugger;
return '
';
}
function goToNeweDetailPage(neweName1, neweName, newePicUrl1, newePicUrl, neweTrailerUrl){
//create the page html template
var newePage = $("
"
+ "<img border='0' src='"
+ newePicUrl1 + "'width=154 height=158></img>"
+ "
"
+ neweName1 + "
"
+ "<img border='0' src='"
+ newePicUrl + "'width=154 height=158></img>"
+ "
"
+ neweName + "
");
//append the new page to the page container
newePage.appendTo( $.mobile.pageContainer );
//go to the newly created page
$.mobile.changePage( newePage );
}
here is the json
[
{ "name1" : "best news around the world",
"name" : "best news around the worldf"
"picUrl1" : "toys2.jpg",
"picUrl" : "toys3.jpg"
}
]