Well, I didn't do a popup I did a new tab.
http://www.jerbils.info/saratoga/wxearthquake.php
I'm not sure what source people use for earthquakes now. I have been using
http://www.emsc-csem.org's RSS feed for a while.
If interested, I use the following (modified) template for formatting RSS feeds (excuse the comments, I have modified them to make them less objectionable)...
Code: Select all
/*
"DO WHAT THE F*** YOU WANT TO" PUBLIC LICENSE (WTFPL)
Version sqrt(-1), April, 2012
Copyright (C) 2012 WickedCoder <wickedcoder@hotmail.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE F*** YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE F*** YOU WANT TO.
*/
/*
USAGE:
<p id="feedPanel" rssurl="<url to RSS feed>"
feedcount="<number of feeds to display>">
*/
$(function () {
$("p#feedPanel").feedMe({
feedUrl: $("p#feedPanel").attr('rssurl'),
feedCount: $("p#feedPanel").attr('feedcount')
});
});
jQuery.fn.feedMe = function () {
var e = $(this[0]);
var args = arguments[0] || {};
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + args.feedCount + '&callback=?&q='
+ encodeURIComponent(args.feedUrl),
dataType: 'json',
crossDomain: 'false',
beforeSend: function () {
$(e).empty()
.append("<img style=\"float:left;padding-left:70px;\" src=\"../myPictures/blog-load.gif\" alt=\"loading feeds...\" />");
},
error: function () {
$(e).empty()
.append("<span style=\"float:left;font-size:x-small;padding-left:10px;\">An error occurred retrieving feeds.</span>");
},
success: function (data) {
items = data.responseData.feed.entries;
var html = '';
for (var i = 0; i < items.length; i++) {
html += "<table style=\"margin-left:0;margin-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden" /* set table to truncate contents to width */
if (items[i].title.search(/bulgaria/i) == -1) {
html += "\"><tr><td><a href='";
html += items[i].link + "' style=\"color:black;background-color:yellow"; /* color background yellow */
} else {
html += ";border:1px solid black;\"><tr><td><a href='"; /* unless Bulgaria then red and table border */
html += items[i].link + "' style=\"color:white;background-color:red";
}
html += ";font-size:9px\" target=\"_blank\">" + items[i].title + "</a>"; /* set link to open in new tab */
var opstring = items[i].content.replace(/(\r\n|\n|\r)/gm," "); /* get rid of linefeeds from the description */
var location = opstring.substring(opstring.lastIndexOf("Location</td><td>")+18,opstring.lastIndexOf("</td></tr><tr><td style")); /* extract lat/long of location */
var locparts = location.split(" "); /* break into array */
if (locparts[1] == "S") {locparts[0] = "-" + locparts[0];} /* if latitude South make it negative */
if (locparts[4] == "W") {locparts[3] = "-" + locparts[3];} /* if longitude West make it negative */
/* create link to wikimapia and surround lat/long */
opstring = opstring.replace(location,'<a href="http://www.wikimapia.org/#lang=en&lat=' + locparts[0] + '&lon=' + locparts[3] + '&z=11&m=w" target="_blank">' + location + '</a>');
opstring = opstring.replace(/margin-top:5px;font-size:11px/gi,"margin-top:0px;font-size:9px;line-height:1.6;") ; /* change cell content margin and font size */
html += opstring + "</td></tr></table>" ; /* tack the edited text onto the end of the html and close the table */
}
$(e).empty().append(html);
}
});
}
...and I invoke it and format it to three columns width using...
Code: Select all
<script src="rssyex.js" type="text/javascript"> </script>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap: 3px;
-webkit-column-gap: 3px;
column-gap : 3px
width:820px;
}
.newspaper table {
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
margin-left:auto;
margin-right:auto;
}
</style>
...and...
Code: Select all
<div class="newspaper" style="width:820px">
<p id="feedPanel" rssurl="http://www.emsc-csem.org/service/rss/rss.php?typ=emsc&min_lat=10&min_long=-30&max_long=65" feedcount="42" style="margin-top:0px" >
</div>
So, basically, I have my country (Bulgaria, in this instance) highlighted in red, boxed and with white text (you'll have to find that in the code to change it but it is pretty obvious) and the title of each event takes you to more detail while the lat/long is selectable and links you to Wikimapia.