Last active
December 21, 2015 18:49
-
-
Save mallond/6349745 to your computer and use it in GitHub Desktop.
JQuery Include -
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| boilerplate | |
| HTML Boilerplate - simple HTML includes using jquery | |
| As a long time JSP developer, transitioning into the fabulous world of Pure HTML and JavaScript front-end development. There is a need to divide and conquer your web interface into manageable and reusable parts. This is a simple demo using JQuery that divides a front end website into three reusable parts. | |
| Header | |
| Main Container | |
| Navigation | |
| Footer | |
| There is not much to it. JQuery does all the magic. | |
| The Magic JQuery | |
| $(document).ready(function () { | |
| $.get("header.html", function (result) { | |
| $("#header").html(result); | |
| }); | |
| $.get("aside.html", function (result) { | |
| $("#aside").html(result); | |
| }); | |
| $.get("footer.html", function (result) { | |
| $("#footer-container").html(result); | |
| }); | |
| }); | |
| Index.html | |
| <!doctype html> | |
| <!--[if lt IE 7]> | |
| <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
| <!--[if IE 7]> | |
| <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | |
| <!--[if IE 8]> | |
| <html class="no-js lt-ie9" lang="en"> <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <html class="no-js" lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>BizRez.com</title> | |
| <meta name="description" content="Bizrez Internet Technologist"> | |
| <meta name="author" content="David Mallon"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script> | |
| <link href='http://fonts.googleapis.com/css?family=Maiden+Orange|Corben|Share:400,700|Averia+Libre' rel='stylesheet' | |
| type='text/css'> | |
| </head> | |
| <body> | |
| <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a | |
| different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> | |
| to experience this site.</p><![endif]--> | |
| <span id="header"></span> | |
| <div id="main-container"> | |
| <div id="main" class="wrapper clearfix"> | |
| <article> | |
| <header> | |
| <h1>BizRez We are... </h1> | |
| <h2>Web based Application Developers, small business website | |
| Gurus, Cloud Computing experts, System Consultants, and bold Internet Technologists.</h2> | |
| </header> | |
| <section> | |
| We consult, develop great software, do research and development, recruit and hire the best in the | |
| business. | |
| </section> | |
| </article> | |
| <!-- side menu --> | |
| <aside id="aside"></aside> | |
| </div> | |
| <!-- #main --> | |
| </div> | |
| <!-- #main-container --> | |
| <div id="footer-container"></div> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> | |
| <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.js"><\/script>')</script> | |
| <script src="js/plugins.js"></script> | |
| <script src="js/script.js"></script> | |
| <script> | |
| $(document).ready(function () { | |
| $.get("header.html", function (result) { | |
| $("#header").html(result); | |
| }); | |
| $.get("aside.html", function (result) { | |
| $("#aside").html(result); | |
| }); | |
| $.get("footer.html", function (result) { | |
| $("#footer-container").html(result); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment