1

I have an iframe that loads a map from CartoDB. 

<iframe src='https://recology.cartodb.com/tables/condma_1_cleaned/embed_map' width='900' height='600'></iframe>

This iframe is embedded in an html presentation. When I am doing the presentation it's possible there won't be internet. In that case, it would be nice if a screenshot of the map would load instead.

How can I get a screenshot of the map to load when loading the live version fails due to lack of internet access?

sckott
  • 5,755
  • 2
  • 26
  • 42
  • First obstacle is detecting load failure, see [(1)](http://stackoverflow.com/questions/375710/detect-failure-to-load-contents-of-an-iframe), [(2)](http://stackoverflow.com/questions/35240/retrieving-http-status-code-from-loaded-iframe-with-javascript?lq=1) - then you just need to replace the iframe with an img of the same dimensions. Easy enough with jQuery using the [`.replaceWith()`](http://api.jquery.com/replaceWith/) command. – Orbling Sep 27 '12 at 16:44
  • 1
    Thanks, looking into that solution. – sckott Sep 27 '12 at 17:05

1 Answers1

1

Borrowing from this answer on SO you could do something like the following:

<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script id="iframe_loader">
function loadIframe() {
  var iframe_element = document.getElementById('iframe_id');
  if (navigator.onLine) {
    iframe_element.src = 'www.CartDB_url.com';
  } else {
    iframe_element.src = '/local_version_CartDB.htm';
  }
}
</script>

And then just before you close the BODY-tag at the end of your website put in

<script>
  loadIframe();
</script>
Community
  • 1
  • 1
leifdenby
  • 1,428
  • 1
  • 13
  • 10
  • Thanks. Tried this, and it just loads all my slides at once. Im using deck.js. Any thoughts? – sckott Sep 27 '12 at 17:06
  • My slides are in the index.html file at this [github repo](https://github.com/SChamberlain/posterstalks/tree/gh-pages/ucalgarytalk) – sckott Sep 27 '12 at 17:14
  • I've added the code for you in a pull request, now you can see how to do it another time :) – leifdenby Sep 27 '12 at 17:53