Skip to content

Instantly share code, notes, and snippets.

@poonkave
poonkave / google_feed_list.js
Created April 17, 2013 15:37
Dynamically populating jQueryMobile listview from google news feed.
(function () {
var googleResult = [];
var newsTopic = "w";
function initialize() {
var feed = new google.feeds.Feed("https://news.google.com/news/feeds?pz=1&cf=all&ned=en_ie&hl=en&topic=" + newsTopic + "&output=rss");
feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
//feed.includeHistoricalEntries();
feed.setNumEntries(100);
feed.load(function (result) {
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('pageinit', '#home', function () {
// code
var _menuLoaded = false;
$('#menuPanel').load('menu.html', function () {
<html>
<head>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<html>
<head>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<style>
#clock
{
margin:0 5px 0 5px;
color: Blue;
}
var app = {
timer: null,
init: function () {
var instance = this;
$(document).on('pageinit', '#list_page', function () {
$('#searchBox').on('keyup', function () {
var $searchBox = $(this);
var searchFor = $.trim($searchBox.val() + "");
if(instance.timer) {
clearTimeout(instance.timer);
$(document).on("pagebeforechange", function (e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL
if(typeof data.toPage === "string") {
// We are being asked to load a page by URL
var u = $.mobile.path.parseUrl(data.toPage),
_re = "#contact";
if(u.hash.search(_re) !== -1) {
var id = urlParam("id", data.toPage);
$.ajax({
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
var i = 0;
$(document).on('pageinit', '#home', function () {
// code
var _menuLoaded = false;
$('#menuPanel').load('menu.html', function () {
$(this).find(":jqmData(role=listview)").listview();
$(this).trigger("updatelayout");
$.mobile.loading("hide");
_menuLoaded = true;
});
$("#menuPanel").on("panelopen", function (event, ui) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body>