Untitled

<!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>