public
Created

Test Blog Post

  • Download Gist
demo.htm
HTML
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
<!DOCTYPE html>
<html>
<head>
<title>Loading GitHub Gists After Page Content Has Loaded -- UPDATED</title>
 
<style type="text/css">
 
.gist,
pre {
font-size: 12px ;
}
 
</style>
 
<!-- Load the jQuery library a and the Gist plugin. -->
<script type="text/javascript" src="../jquery-1.7.1.js"></script>
<script type="text/javascript" src="./jquery.gist.js"></script>
 
<!-- Load the Gist after DOM ready. -->
<script type="text/javascript">
 
$(function(){
 
// Get the placeholder.
var placeholder = $( "#placeholder" );
 
// Get the gist with the given ID. This will come back
// as both a hash of file names and an ordered array.
var gistResult = $.getGist( "1600811" );
 
// When the gist has loaded, append the contents to the
// rendered DOM.
gistResult.done(
function( gist ){
 
// Empty the placeholder.
placeholder.empty();
 
// Get the ordered files.
var ordered = gist.ordered;
 
// Add each gist to the content.
for (var i = 0 ; i < ordered.length; i++){
 
// Add a title for the gist.
placeholder.append(
"<h3>" + ordered[ i ].fileName + "</h3>"
);
 
// Add the gist content.
placeholder.append( ordered[ i ].content );
 
}
 
}
);
 
});
 
</script>
</head>
<body>
 
<h1>
Loading GitHub Gists After Page Content Has Loaded
</h1>
 
<h2>
Gists From GitHub:
</h2>
 
<div id="placeholder">
Loading...
</div>
 
<p>
This page has finised loading.
</p>
 
</body>
</html>
jquery.gist.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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
// Define a sandbox in which to create the Gist loader jQuery plugin.
// This Gist loader only works with public gists. It will load all of
// the files (in a single request) and then return an array of loaded
// files (with the ability to access by file name).
(function( $, nativeWrite ){
 
 
// When the Gist comes back, the first call to the write() method
// writes out the stylesheet.
var writeStyleSheetLink = function( value ){
 
// If the stylesheet has not been written before, then append
// it to the head. Since all the Gists use the same
// stylesheet, we only have to do this once per page.
if (!stylesheetIsEmbedded){
 
// Append the stylesheet Link tag.
$( "head:first" ).append( value );
 
// Flag the embed so we don't write the Link tag twice.
stylesheetIsEmbedded = true;
 
}
 
// Change the write() method for gist content production.
document.write = writeGistContent;
 
};
 
 
// The second write to the document will be for the complete gist
// content. At this point, we have to parse it out and organize
// it in a structure.
var writeGistContent = function( value ){
 
// Reset the files (container) we are about to compile.
files = {};
 
// We'll also want to list the files by Index, if the user
// wants that information.
files.ordered = [];
 
// Parse the Gist HTML in a local DOM tree.
var gistContent = $( value );
 
// Get all of the files in the gist.
gistContent.find( "div.gist-file" ).each(
function(){
 
// Get a jQuery reference to the current gist node.
var gistFile = $( this );
 
// Get the name of the file. For this, we will return
// the content of the first Meta anchor that doesn't
// contain a syntactic link.
var metaTags = gistFile.find( "div.gist-meta a" )
.filter(
function(){
 
// Only keep this value if it doesn't
// contain a useless value.
return( $( this ).text().search( new RegExp( "^\\s*(view raw|this gist|github)", "i" ) ) === -1 );
 
}
)
;
 
// Get the file name from the first filtered Meta
// anchor tag.
var fileName = $.trim( metaTags.first().text() );
 
// Get the content of the file. Each file will need
// to be re-wrapped in its own Gist div.
var content = $( "<div class='gist'></div>" )
.append( gistFile )
;
 
// Add the file the collection, indexed by name.
files[ fileName ] = {
fileName: fileName,
content: content
};
 
// Add this file to the "ordered" list as well.
files.ordered.push( files[ fileName ] );
 
}
);
 
// NOTE: At this point, the [files] value has been populated
// and will be used in the success() callback of the AJAX
// request.
 
};
 
 
// I flag whether or not a stylesheet has been appending to the
// current document. Since all Gist requests share the same
// style, we can disregard all subsequent Link tags.
var stylesheetIsEmbedded = false;
 
// I am the active result for the gist content request.
var files = null;
 
 
// Define the actual script loader.
$.getGist = function( gistID ){
 
// Before the Script is requested, override the native
// write() method so that we can intercept the calls
// for the Gist stylesheet and content output.
document.write = writeStyleSheetLink;
 
// Create a deferred value for our Gist content.
var result = $.Deferred();
 
// Request the remote Script (that will write out the
// Gist content).
$.ajax({
url: ("https://gist.github.com/" + gistID +".js"),
dataType: "script",
success: function(){
 
// Resolve the promise with the compiled Gist files.
result.resolve( files );
 
},
error: function( jqXHR, status, error ){
 
// Reject the promise.
result.reject( status, error );
 
},
complete: function(){
 
// Change the write() method back to the native
// write(). If we do it in the complete callback,
// then we won't have to worry about HTTP issues.
document.write = nativeWrite;
 
}
});
 
 
// Return the promise of the gist.
return( result.promise() );
 
};
 
 
})( jQuery, document.write );
misc-1.js
JavaScript
1
<script src="https://gist.github.com/1600811.js"></script>
misc-2.js
JavaScript
1 2
document.write( " .... LINK TAG FOR GIST CSS .... " );
document.write( " .... GIST HTML CONTENT .... " );

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.