public
Created

Webplatform.org - show prototype of live code

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
// Use on webplatform.org to show prototype of how live code could work.
 
var el = document.querySelector('a[href="http://docs.webplatform.org/wiki/html"]');
el.href="http://denbuzze.com/code/webplatform_codepen/";
el.rel="lightbox";
el.target="_blank";
el.innerText="live example"
 
// Reload the lightbox
 
(function(){
var lightbox = document.getElementById('lightbox'),
iframe = lightbox.querySelector('iframe'),
close = lightbox.querySelector('a');
 
var links = document.querySelectorAll('[rel="lightbox"]');
for(var i=0, link; link = links[i++];) {
link.onclick = function () {
lightbox.className = 'open';
var me = this;
setTimeout(function () {
iframe.src = me.href;
}, 1500)
return false;
};
}
 
close.onclick = function () {
lightbox.className = 'closed';
iframe.src = 'about:blank';
return false;
};
})();

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.