Created
April 20, 2013 20:32
-
-
Save daangemist/5427304 to your computer and use it in GitHub Desktop.
A HTML page to easily display three RememberTheMlik lists using the mobile website and an iFrame.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
<html> | |
<head> | |
<title>RTMDash</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<style type="text/css"> | |
/* IE10 Consumer Preview */ | |
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #23A614 100%); | |
/* Mozilla Firefox */ | |
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #23A614 100%); | |
/* Opera */ | |
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #23A614 100%); | |
/* Webkit (Safari/Chrome 10) */ | |
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #23A614)); | |
/* Webkit (Chrome 11+) */ | |
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #23A614 100%); | |
/* W3C Markup, IE10 Release Preview */ | |
background-image: linear-gradient(to top, #FFFFFF 0%, #23A614 100%); | |
#dashboard { margin-left: 10px; } | |
#dashboard .window { float: left; width: 400px; height: 300px; margin: 14px 5px; } | |
#dashboard .caption { display:block; font-weight:bold; width:100%; } | |
#dashboard iframe { width: 100%; height: 100%; } | |
</style> | |
<script src="app://js/jquery.min.js" type="text/javascript"></script> | |
<script type="text/javascript"> | |
var dashboard = { | |
dashboards : [ | |
['Widget', 'https://m.rememberthemilk.com/lists/-/21173589'], | |
['Work', 'https://m.rememberthemilk.com/lists/-/28856418'], | |
['MC', 'https://m.rememberthemilk.com/lists/-/24461873'], | |
], | |
addWindow : function( name, url ) | |
{ | |
$('#dashboard').append('<div class="window"><div class="caption">' + name + ' <a href="#" class="refreshBtn">refresh</a></div><iframe src="' + url + '">' + name + 'iFrame</iframe></div>'); | |
} | |
} | |
function refreshAllOnTimer( firstLoad ) | |
{ | |
//on the first request of this function, only set the time | |
if( !firstLoad ) { | |
$('iframe').each( function(index) { | |
$(this).attr('src', $(this).attr('src') ); | |
}); | |
} | |
setTimeout('refreshAllOnTimer(false);', 1800000); //refresh every half an hour | |
} | |
$(document).ready( function() { | |
var i = 0; | |
for( i = 0; i < dashboard.dashboards.length; i++) { | |
dashboard.dashboards[i][0]; | |
dashboard.addWindow( dashboard.dashboards[i][0], dashboard.dashboards[i][1] ); | |
} | |
$('.caption .refreshBtn').click( function() { | |
var frame = $(this).parent().parent().children('iframe'); | |
frame.attr('src', frame.attr('src')); | |
}); | |
/* | |
-- Does not work on multiple lines | |
$(window).resize(function(e) { | |
$('#dashboard .window').height($(window).height() - (100)); | |
}); | |
*/ | |
refreshAllOnTimer(true); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="dashboard"></div> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment