How to reuse the html code in every html page?

Question

Let say I have the code as below:

<!DOCTYPE HTML>
<html>
<head>
<style>
#overlay_form{
    position: absolute;
    border: 5px solid gray;
    padding: 10px;
    background: white;
    width: 270px;
    height: 190px;
}
#pop{
    display: block;
    border: 1px solid gray;
    width: 65px;
    text-align: center;
    padding: 6px;
    border-radius: 5px;
    text-decoration: none;
    margin: 0 auto;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    //open popup
    $("#pop").click(function(){
        $("#overlay_form").fadeIn(1000);
        positionPopup();
    });

    //close popup
    $("#close").click(function(){
        $("#overlay_form").fadeOut(500);
    });
});

//position the popup at the center of the page
function positionPopup(){
    if(!$("#overlay_form").is(':visible')){
        return;
    }
    $("#overlay_form").css({
        left: ($(window).width() - $('#overlay_form').width()) / 2,
        top: ($(window).width() - $('#overlay_form').width()) / 7,
        position:'absolute'
    });
}

//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);

</script>
</head>
<body>

<a href="#" id="pop" >PopUp</a>
<br />
<form id="overlay_form" style="display:none">
<h2> Put your contents here..</h2>
<label>Username: </label><input type="text" name="username" /><br /><br />
<label>Password: </label><input type="text" name="password" /><br /><br />
<input type="button" value="Login" />
<a href="#" id="close" >Close</a>
</form>


</body>
</html>

This is a popup dialog example. Let say I want to use this dialog in all my webpages (a.html, b.html, c.html and etc), what is the best and easiest way to make the code above to be reusable? Because I think that to copy paste the 'overlay_form' into every html pages is not reasonable.

I am still at the beginning level in Javascript, so to create a jQuery plugin for this is too hard for me. That's why I would like to seek for other ways to do it. Thanks.

Spokey · Accepted Answer · 2013-04-06T15:21:55.227

19

You could put your code in a different .html file and load it with .load() http://api.jquery.com/load/

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

edited Apr 06 '13 at 15:21

answered Apr 06 '13 at 15:05

Spokey

10,974
2
28
44

I've been looking into code reuse and like the jQuery approach the best, BUT, I'm having issues applying my css to the loaded content. What is the proper way to do this? – Austin A Jun 21 '15 at 18:20
5

how well this a.html will be indexed by GoogleBot? – walv Sep 03 '17 at 20:01

dsgriffin · Answer 2 · 2013-04-06T16:01:58.843

Best practice if you want to re-use the code multiple times is to place all your jQuery code into an external .js file, place all your CSS into an external style sheet, and reference those files from each page.

E.g. for the CSS, in a file named style.css:

<link rel="stylesheet" type="text/css" href="style.css">

and for the jQuery in a file named jQueryFunctions.js:

<script type="text/javascript" src="jQueryFunctions.js"></script>

In regard to including the same HTML code on different pages, one of the simplest ways I can think of would be to use the PHP include() function. Here's a very simple one-page tutorial on re-using HTML forms on multiple pages using it.

score 2 · Answer 3 · answered Apr 06 '13 at 16:08

2

put all of your reusable code in a html document and call it to the page using the following php code:

<?php include("example.html") ?>

answered Apr 06 '13 at 16:08

1

Don't think he's using `php`, he didn't tag it. – Spokey Apr 06 '13 at 16:14
I got the answer what I was looking for, thank you user1102285. – PS Nayak Nov 01 '17 at 08:16

GoalBased · Answer 4 · 2013-09-06T04:32:37.463

Modest HTML does this.

It looks like this:

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>overlayForm</include>
  </head>
  <body>
    <overlayForm/>
  </body>
</html>

overlayForm.xml

<form style="display:none">
  <h2> Put your contents here..</h2>
  <label>Username: </label><input type="text" name="username" /><br /><br />
  <label>Password: </label><input type="text" name="password" /><br /><br />
  <input type="button" value="Login" />
  <a href="#" id="close" >Close</a>
</form>

How to reuse the html code in every html page?

4 Answers4

Linked