Sitewide Static Area (with Javascript)

View (and, if you want, copy) a eurodance-themed mockup showing this technique on Code Pen.

This is an incredibly useful thing to do with Javascript if you want to make a site that is both user-friendly and easy for you to organize, update, and manage.

I speak, of course, of making certain areas of your site static across all pages. Obviously, while the content of each page is different, some parts (sidebars, perhaps, menus, maybe the footer) should appear the same throughout for a fluid user experience.

If each page contains an individual copy of these, you’ll need to change each individually every time you need to add or remove a link, etc. If you have only a couple pages, this isn’t too difficult. If you have dozens, replacing each individual sidebar, menu, and/or footer can be a major chore, can’t it? The solution is to separate these semi-static portions of your site from the rest of the content.

This is simple, and a built-in function of most PHP-based apps; not so on static hosting services like neocities. It can still be done, though, using Javascript. Because of the way this works, it’s best to begin early with the process, before you’ve created very many pages. It’s good to do prior to actually starting major work on your site, but if you’re willing to edit all your pages one more time, you can get this going on an existing site…

CSS

There’s no required CSS code for this. You merely label the container of the content in the HTML with the CSS ID of your choosing. Presumably, you’ve already styled it and/or its contents to some degree (but you don’t have to). In the example we’re using, the ID is #sidebar.

If you replace all references in these snippets with a different name, you can do this with any identified element you want, though. You can also do this to multiple elements on the same page (more on this later), thankfully. This allows (for example) a sitewide menu sidebar, and footer, with styling for each, integrated with the rest of the theme/site.

HTML

To begin, you’ll be moving all the HTML content within a particular <div> (in this case, #sidebar) into a separate Javascript file. For example, let’s say we’re going to call it static.js. We’ll assume that we’ll be putting it in a folder called /js/ in your root directory for the sake of orderliness.

This leaves us with only this in the HTML itself, an empty div labeled #sidebar. You’ll add a Javascript file (soon to contain your actual sidebar HTML content) linked at the very bottom of every page just above the </body> tag…

<div id="sidebar"></div>
                                        <script type="text/javascript" src="/js/static.js"></script></body>

Javascript

Copy the entire contents of that <div>, your sidebar (or whatever area of the site that you’d like to make static sitewide) into a Javascript file. This is a little harder than it sounds, though. While the copied text can contain any HTML necessary, you’ll need to make sure it’s formatted in a unique way that won’t demolish the Javascript itself. I did this initially using escape strings.

When using escape strings, any quotation marks (single or double) will require you to add a \ just prior to them. Also, be aware that you must remove all line breaks from the code itself. I do have a (rather shaky and slapdash) webform that does this automatically for you, but it’s a bit amateurish and probably isn’t going to handle everything well.

You can completely get around this problem by surrounding it with the ` (backtick) symbol (for making things literal) instead of mere quotation marks, though. I switched to doing this as my static content areas got larger, more chaotic, and I learned more. If you're using backticks, you needn't worry about removing line breaks, either. The below snippets assume the use of backticks.

Either way, once you’ve formatted the code save the file with the name and location you listed in the HTML file (here, it was /js/static.js), and you’re done. Usually…

const sidebar = ` 
<p>You can insert whatever you want your element to contain here.</p> 
` ;

    document.getElementById("sidebar").innerHTML = sidebar

If you are using multiple copies of this script/snippet to separate and fill multiple areas of the page, you need to replace the highlighted areas above that say sidebar with something more unique identifying the subsequent page areas, ie, footer, menu, etc.

Multiple Iterations Together

Initially, I created a separate Javascript file for each sitewide static area of my site. This actually provides some convenience, particularly if some of these areas, sidebars, menus, etc are very large and would become unwieldy if dumped into the same file.

Still, if you want to fill multiple areas of the page with static content throughout the site, without needing to have a different Javascript file for each, well… you can do that. I ended up switching to said method after a while myself. It’s not actually that difficult.

Create a new Javascript file entirely. This one (let’s say) will be called altogether.js and located, again, in /js/ in your root directory. Go through each of your other Javascript files (static.js, for example) and copy them all including everything in them into that new file. Save it in the appropriate location.

Your HTML for your page, and all the various (blank at this point) areas that your Javascript files were filling can be left exactly the same (for the most part) as it was previously. The only change? Remove the links to those other Javascript files. Replace them with <script type="text/javascript" src="/js/altogether.js"></script> right before the </body> tag of your HTML documents.

Either Way

Now, as long as every single HTML page on your site contains those (empty) divs and the link to the Javascript file(s) that reference them at the end, the divs will be filled with the content stipulated in the Javascript file for each. Any changes made to the content of those divs within the Javascript is displayed across the entire site.

Bit more convenient than editing the sidebar and menu and footer and everything of every single page, one by one, isn’t it? It can be a hassle to add this to an existing large site, though, and that’s why I recommend starting the process before you start on your site. If your site is already large, though, you have some options (extreme use of the find + replace feature, for example), but you might well have to go through and prepare each page of your site to work with this, one by one. It’s worth it, though!