Tips for creating a consistent header and footer across an HTML CSS web application

My previous projects involved using ASP.NET MVC and utilizing 

@Html.Partial("_header")
to incorporate common static HTML across different pages. However, my current project is a pure HTML CSS and JS web app with no server-side technology.

The layout of this site consists of a header, changing content area, and footer:

----- HEADER -----

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

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

Now, I would like to achieve the same functionality as @Html.Partial(). One method I know of is using iframes, but I am curious if there is a more efficient approach available?

javascriptjqueryhtmlcssasp.net-mvc-4

Answer №1

During my experience creating a Chrome extension, I encountered a situation that required fixed headers and footers.

To achieve this, I stored the header and footer in variables within a JavaScript file and then used jQuery to append them to the body of the page. By including this JS file where I needed the header and footer, I was able to effortlessly add them to the page by simply adding the script in the head section.

Check out the working demo here

Here's the code snippet:

<!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>

Answer №2

When hosting your web app on a server that supports Server Side Includes (like Apache), simply insert 

<!--#include virtual="/header.html" -->
You may need to activate SSI first, depending on your web server (Options +Includes in .htaccess for Apache)

Answer №3

Evolution of Web Development Techniques

In the past, frames were a popular choice for web developers, but over time they have lost favor due to various reasons. An article from 2006 discussing this shift can be found here.

It seems that avoiding frames is now the preferred approach in modern web development :)

Choosing Server-Side Includes Over JavaScript

Server-Side Includes (SSI) or other server-based "include" methods are now favored over relying solely on JavaScript. While not a traditional HTML/JS/CSS solution, utilizing SSI offers benefits in certain scenarios.

An example of an SSI statement format is as follows:

<!--#include virtual="../quote.txt" -->

To explore more about SSI, you can visit this link.

Many responses on platforms like Stack Overflow also advocate for using server-side includes. Examples of such discussions can be found here, here, and here.

Note that while some recommend JavaScript solutions, there's a clear preference towards server-side techniques in the end.

Compiling HTML Code for Efficiency

In my experience, when creating a website using only HTML/CSS/JS, I prefer to modularize and "compile" the code before deployment.

This method, though requiring extra work upfront, results in clean and optimized code for deployment. By indicating what content needs inclusion and where, the compiled files contain pure HTML/CSS/JS ready for site hosting.

The use of SASS with Ruby on Rails for compilation is common practice. While specific references elude me currently, I will update my answer once I locate them again.

Answer №4

Do you consider utilizing Frameset, even though it is not a recommended practice in modern web development?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unravel JSON using JavaScript on the web

I encountered an issue while running this code and trying to decode it: var data = JSON.parse({"forms":[{"url":"example.com/example","name":"example"}]}) document.getElementById("name").innerHTML=data.forms.name Instead of the expected value, the returne ...

javascriptjsondecode

Customize the appearance of parent components based on the content of their child elements

I am currently working on a component that contains multiple instances, each with its own unique internal component (acting as a modal wrapper). I need to customize the size of each modal instance independently. How can I achieve this customization when th ...

cssangularbootstrap-modalparent-child

Enhance the Error class in Typescript

I have been attempting to create a custom error using my "CustomError" class to be displayed in the console instead of the generic "Error", without any success: class CustomError extends Error { constructor(message: string) { super(`Lorem "${me ...

javascripttypescript

Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like ...

csssapui5custom-font

Challenge with maintaining tab view data in Openui5

I am facing an issue with my application's tabs. Each tab renders data retrieved through ajax calls from the database. However, whenever I switch between tabs, the data gets refreshed each time. Is there a way to prevent this refreshing behavior and i ...

javascriptjqueryhtmlsapui5

Error: React.js - operationStore.getItems function is not defined

I've encountered an issue while running my Web App with the command: node --harmony gulpfile.babel The error message states: Uncaught TypeError: operationStore.getItems is not a function I'm struggling to identify the root cause of this problem ...

javascriptservergulpbabeljs

Having trouble with your jQuery learning and not seeing any results?

I have been attempting to utilize jQuery for a project, but unfortunately, nothing seems to be happening when I click the button. Despite my various attempts to modify the code, the desired effect still eludes me. I am specifically using Firefox as my bro ...

jqueryfunctionclick

Differences Between Android and JavaScript: Ensuring Library Validity

Validation in JS is provided by the validator library which can be found at https://www.npmjs.com/package/validator Is there an equivalent library for validation in Android? If so, what is the name of Android's library? ...

javascriptandroidvalidation

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

javascripthtmlcss

Some places may not have detailed information available when using the Google Places API

Greetings I am currently in the process of developing a page on my website that utilizes the Google Places API along with the user's geographical coordinates (latitude, longitude) to locate nearby restaurants. In my code, I have implemented a functio ...

javascriptangularjsgoogle-mapsgoogle-places-api

Transmit an echo using AJAX

Apologies if this question has already been asked, I tried searching but couldn't find any answers (OR didn't understand the answer). I have a hyperlink and would like to retrieve the value using AJAX. Here is an example with PHP: HOME <a h ...

phpjqueryajax

Filtering an array of JSONs in Vue.js using a separate array of JSONs

In my code, there are two arrays of JSONs: one named products and another called deletedProducts. The task is to filter out the products that are not present in the deletedProducts array. For instance: products = [ { id: 1, name: 'Box&apos ...

javascriptjsonvue.jsvuejs2vue-component

Exploring the contrast between an amd.js file and a main.js file within the dist directory of a JavaScript node project

Looking into a JavaScript project utilizing Node and Webpack, I've noticed that within the node_module directory there is a lib folder containing an xyz.js file. Additionally, in the dist folder of the node_module, there are xyz.amd.js, xyz.main.js, a ...

javascriptnode.jsnpmamd

Using JavaScript and AJAX to manage and control a shell interface

Looking to create an HTML page that includes a YouTube video and utilizes JavaScript with the YouTube API. The objective is to embed a video and test if it has been fully downloaded using the YouTube API. I have set up an Apache server with MySQL and PHP ...

javascriptajaxapacheshell

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

Node.js making an API request

I am encountering an issue with the following code snippet: const req = require("request"); const apiReq = req("http://example.com/car/items.json", (err, res, body) => { if (!err && res.statusCode === 200) { return JSON.parse(body); } } ...

javascriptnode.js

Facing a problem with the carousel in Angular 6

I am currently working with Angular 6 and I have a topAdvertisementList[] that is supposed to return 2 records to be displayed in my carousel with a fixed image, but for some reason, only one record is showing up in the carousel! I suspect there might be a ...

javascriptangularangular5

Implementing a jQuery change event to filter a specific table is resulting in filtering every table displayed on the page

I have implemented a change event to filter a table on my webpage, but I am noticing that it is affecting every table on the page instead of just the intended one. Below is the code snippet: <script> $('#inputFilter').change(function() { ...

javascriptjqueryhtmlhtml-tableonchange

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

javascriptcssiframeresponsive-designmedia-queries

Transforming a triangular shape into a square using Plane Geometry in THREE.js

I have an animation created with triangles in the link below. Is there a way to convert these triangular areas into squares? The animation currently has a line running through the middle when using "PlaneGeometry". Removing this line would turn the triangl ...

javascriptjquerycssthree.js