12

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.

0

4 Answers 4

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
2
  • 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, 2015 at 18:20
  • 5
    how well this a.html will be indexed by GoogleBot?
    – walv
    Sep 3, 2017 at 20:01
4

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.

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") ?>
2
  • 1
    Don't think he's using php, he didn't tag it.
    – Spokey
    Apr 6, 2013 at 16:14
  • I got the answer what I was looking for, thank you user1102285.
    – PS Nayak
    Nov 1, 2017 at 8:16
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.