Master Page concept for html

I was used to the concept of Master Page when I was dealing with ASP.NET in the past. When I dived into bootstrap, I was surprised that there isn’t a thing called “Master Page”.

I am reluctant to having to go into all of the html page and edit the headers/footers for each time that I am going to make changes. It turned out that there is a simple way to share a common header/footer and that is via javascript.

For instant if you are having a footer such as the below


<footer>
<div class="row">
<div class="col-lg-12">
&copy; TechCentral 2016
</div>
</div>
</footer>

All you have to do is a create a javascript (footer.js) that basically write the same code. With this method, the javascript would be generating the same piece of html code.

It is important to note that you would have to replace the initial double-quote with single-quote. This is to ensure that the javascript are not confused by the quote used.


document.write(
" <footer>" +
"
<div class='row'>" +
"
<div class='col-lg-12'>" +
"&copy; TechCentral 2016

" +
"</div>
" +
"</div>
" +
" </footer>"
);

With the javascript created, you would then replace the existing footer code in the html with a javascript call in the below manner.


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

A more detailed explanation could be found at HTML Cheats.

Advertisements
This entry was posted in Web Development and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s