The Content Layer
Create a CSS style for your content layer, for example.:
#myContentLayer {
padding: 10px;
border: 1px solid #ccc;
background: #f0f0f0;
}
JQuery
Add a link to the JQuery file
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
The JQuery function
Add a function to load the external file:
<script type="text/javascript">
function displayMyExternalContent() {
$.ajax({
url: "my_external_content.html",
success: function (data) {
$("#myContentLayer").html(data);
}
});
}
</script>
Add the HTML layer to the page
<div id="myContentLayer"></div>
Add the link to load the content into the layer
<p><a href="javascript:displayMyExternalContent();">click here to display the external HTML page</a></p>
Demonstration
click here to load the external HTML page my_external_content.html inside the layer below: