CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net-mvc-4
Yasser Shaikh
Yasser Shaikh

Reputation: 47774

How to have a common header and footer in a HTML CSS web app?

I have been using ASP.NET MVC for all my projects and have been using @Html.Partial("_header") where ever I wanted to include a common static html in any of my pages.

But now I am working in a pure HTML CSS and JS web app. Here I am not using any server side technology, just a set of static contents.

Here in the site I have the following layout

----- HEADER -----

----- Changing Content ------

----- FOOTER ------

So, here is what I want, I want to somehow do the thing I used to achieve @Html.Partial()

One way I know is using IFRAMES, is there any other better way ?

Upvotes: 0

Views: 10259

Answers (4)

kwah
kwah

Reputation: 1149

Frames

Frames used to be the way to go, but as time has gone by they have fallen out of favour with developers for one reason or another - note this article from 2006!

Fortunately, you seem to be in favour of avoiding frames :)

SSI over JavaScript

Secondly, Server-Side Includes (SSI) or some other server-based "include" is favoured over JavaScript, though I accept that this is not necessarily a "pure" HTML/JS/CSS solution.

The format of an SSI statement is as follows:
<!--#include virtual="../quote.txt" -->

http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

There are many answers that reflect this view on SO - for example, the first three that appeared in searching are here, here and here ...

Note that the accepted answer for that last one is recommending a JS solution, but the final paragraph states a preference for something server-side..

Compilation of your HTML code (my preferred option)

It has been a while since I have needed to create a "pure" HTML/CSS/JS website, but when doing so my preference is to keep the code modular and "compile" the HTML before deployment.

Although it requires a little additional work prior to deployment, it produces the "purest" output to be used within deployed code. You write your code as normal, use a little magic to indicate what you want included and where and then you "compile" this code into bog-standard HTML/CSS/JS files that are deployed onto your site.

This brings the ease and simplicity of using templated header/footer/menu-bar/sidebar files, with the tradeoff of needing to compile the HTML code beforehand.

SASS uses Ruby on Rails to perform this compilation. Unfortunately, a reference for its HTML equivalent is escaping me at this particular moment in time, so I shall update my answer as/when I relocate it.

Upvotes: 0

igoratron
igoratron

Reputation: 134

If your web app is going to be hosted on a web server supporting Server Side Includes (for example Apache) you can just add <!--#include virtual="/header.html" --> Depending on your web server, you might need to enable the SSI first (Options +Includes in .htaccess on apache)

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

i have come across this situation while making chrome extension.

What i did was storing the header footer in variable of js file and then appending that to body using jquery.i was using that js file where i wanted my header and footer to be.i just used to add js in script of head.....Boom i got my fixed header footer in page.

WORKING DEMO

Code:

<!DOCTYPE html>
<html>
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">      </script>
 <script>
 function appendheaderfooter(){
 var header="<div style='position:fixed;top:0px;background-color:aqua;'>header html</div>";
 var footer="<div style='position:fixed;bottom:0px;background-color:aqua;'>footer html</div>"
 $("body").append(header+footer);
}
  window.onload = appendheaderfooter;
</script>
<style>
div{width:100%;}
</style>
</head>
<body><br/>
<p>Content goes here</p>
</body>
</html>

Upvotes: 1

Nilesh Thakkar
Nilesh Thakkar

Reputation: 2895

Are you open to use Frameset, though it is not supported in HTML5?

Upvotes: -1

Related Questions