Can I make my HTML page top bar global across all my pages?

[LloydLynx]

I'm building a basic website that switches through pages kinda like a task bar in Windows. But I'm realizing I'll have to update this code on every single HTML page every time I add a new element to the bar. Is there a way I can build this bar out of CSS so I can include it in my style.css? Or is there a way to have this div element global across all the HTML pages? Any other ideas?

<div class="bar">
<a href="index.html" class="home"></a>
<a href="serverhardware.html" class="serverhardware"></a>
</div>

 

.bar {
background-image: url("global/bar.png");
text-align: center;
height: 64px;
}

[LloydLynx]

I don't like it, but the best solution I could find is javascript. https://stackoverflow.com/a/42333464

[Neftex]

i think you could make that bar a separate page and include it in the other pages through iframe

something like this:

https://codesandbox.io/s/goofy-williamson-9q877y?file=/index.html

[Neftex]

43 minutes ago, oofki said:

iframes have many issues, performance being one of them. You essentially have to load multiple websites at once on your site. 

im fairly sure the ease of use is worth it for loading 1 extra html file of few kilobytes on the page which im pretty sure will also get cached in the browser anyway

[Neftex]

1 minute ago, oofki said:

It’s not that simple. But I’ve been a web developer for 20 years. I’m not going to encourage bad practices. 

well your idea was to use a framework or even server generated page for what seems to be a simple static website which to me seems overkill and unnecessary burden for the poster. if what he posted is really just what he needs then iframe makes the most sense to me

[Neftex]

@oofki @Sakuriru

im really interested in hearing why iframe is a bad solution in this specific case

 

security? no issue here since its same origin page?

loading multiple files? framework generated pages will also load multiple files, like javascript chunks? also the files are cached in browser anyway?

not being able to load the iframe? the main page loads anyway, you just wont see the bar?

compatibility? its been supported since forever?

you get all this on a static website without even requiring javascript on the client + you dont need to learn any new language/framework/server tech

 

(yes yes framework is better in a sense of user experience like not reloading the pages while navigating on the site) but if hes building a static website then why not iframe?

[Neftex]

@Sakuriru

 

case 1 assumes he needs to do that and it seems to me he doesnt (in fact it seems he wants to avoid javascript because he didnt want to use the javascript solution he found)

 

case 2 if you look at the bar, its 100% width and the links are centered. seems like there should be no problem with scaling unless he has like 15 links and tiny window

 

case 3 hes not using any context right now, no mention of context in the post.

i dont understand the second part about requiring two navigations - youre not navigating the iframe, the links in the iframe navigate the browser tab to a different page

 

technical debt of 1 line of code in each page, assuming he will even need to change it

other.htmlindex.htmlheader.html

[maks112]

If you are trying to keep the page to using only HTML and build it statically, I would recommend using https://www.11ty.dev/docs/ or a similar builder. It will allow you to inject a component, such as a navbar and footer, into every page.

[OhioYJ]

17 hours ago, LloydLynx said:

I'm building a basic website that switches through pages kinda like a task bar in Windows. But I'm realizing I'll have to update this code on every single HTML page every time I add a new element to the bar.

So just a thought, as on my website, I ditched iframes, a while back, and still use very simple outdated HTML, as it just works in every browser. Notepad++ allows me to open 500+ HTML files at once, find and replace complete sections of code in every open document, and replace them in one go, and then save every open document.

 

So all my pages are formatted the same way, and using this, I can actually redesigned my entire website when needed, or simply change a copyright date if needed.

[wasab]

1. use a templating engine(often included and shipped in a backend full stack app like laravel or node express) 

https://www.educative.io/answers/what-are-template-engines

 

2. use a full fledge front end SPA framework. vue and react are very popular. 

 

3. combination of all of the above. laravel with inertia library to serverside render react is an awesome setup. by default, laravel used blade as a templating engine but for SPA applications, it merely serves as an entry point to mount a SPA app like react inside no different than a regular HTML. 

[Neftex]

1 hour ago, Sakuriru said:

It seems you're really sold on this idea of yours.

 

Sure OP, go ahead and use iframes. I don't really care ¯\_(ツ)_/¯

i just wanted to see if anyone can come up with a good enough reason to not use it in this specific case instead of the usual "iframe bad" with no justification

[LloydLynx]

7 hours ago, Neftex said:

case 1 assumes he needs to do that and it seems to me he doesnt (in fact it seems he wants to avoid javascript because he didnt want to use the javascript solution he found)

I thought it would be cool to keep compatibility with absolutely ancient and niche browser engines like my old static website. But as I'm proceeding with my website rewrite/redesign, I'm starting to accept modern practices like JS which allows for more artistic freedom. 

 

Edit: If anyone's curious how the redesign is going

Spoiler

 

[OhioYJ]

2 hours ago, LloydLynx said:

I thought it would be cool to keep compatibility with absolutely ancient and niche browser engines like my old static website.

Um, it's even modern browsers.. Like I mentioned, it's why I limit using newer code. My "ancient" or "depreciated" HTML code from my site works in everything. I found it so frustrating that I can come across major sites today that still fail to function in major browsers. I still routinely come across large websites that don't function in Firefox or Chrome properly.

[wasab]

11 hours ago, Neftex said:

i just wanted to see if anyone can come up with a good enough reason to not use it in this specific case instead of the usual "iframe bad" with no justification

because it is like you opening two tabs in a browser to see like say the footer and header of the same page instead of just scrolling up and down on one single tab. you can do it but why?

[TheJudge91]

On 7/2/2023 at 2:55 AM, Sakuriru said:

The Bad Way

It goes without saying that javascript lets you do a lot of things to a webpage, including defining your own custom elements. So you could have a function that inserts your nav-bar at the beginning of every single webpage. Don't want to replicate code? No problem just have a central .js script you pull it from and import into every single page you make.

 

This may create problems for you down the road, since now you're modifying HTML with JS now in a very, ahem, silly way.

 

The Good Way

Use a framework like Vue or React. They natively come with the ability to define custom elements. In fact, that's one of their main features. This of course means you'll have to learn how to use one of these frameworks, but I think you'll find the tools they offer solve more problems than the headache it will take trying to understand how components work.

 

The Other Good Way?

Oh my goodness I almost forgot about server-side. There's more than just front-end frameworks, you could use PHP or, if you're not a masochist, something like Blazor.

 

The Kinda Ugly

Why is this problem so complicated? Why do you need a framework, or a server app, or all of this extra stuff to make your code good?

 

Because HTML is rendered by clients. Clients like Firefox, Chrome, Safari, Edge, and stuff like Vivaldi. Even Gmail has an internal rendering engine that's... weird and doesn't always support everything. It's actually a bit of a problem. Just look at all these babies. So why can't HTML just include though? Just slip it in there.

 

Uh, and who is going to do that exactly? Your browser? The server? Uh oh, none of this stuff is natively supported by anything, and because you want this little "just slip it in please" feature now we have all sorts of problems introduced. Now we need to send over 2 HTML files? Oh jeez now what if one gets downloaded first before the other and how are we going to render it if it gets stuck. All sorts of problems client side, and server side? Now you have to take the two HTMLs and spit out one centralized HTML for every single client request. Never even mind the security issues of DOM based cross-scripting.

 

Ah, you say, but what if I just combined them all for production and left them alone in development. Or like, what if you had some JS that made sure everything was patched up good on the user's end? And now, you see, we're getting it. You've just introduced all sorts of complexity to deploying your application when all you wanted to do was just slip it in there with a few lines. Now you need a post-processor.

 

Well, turns out we have some, they're called frameworks.

This is the answer... Clear and complete.

 

I would add that:

1. Generally, the <iframe> loads content from external pages. This doesn't mean that you can't use it to load internal pages, but sometimes <iframe> can cause usability issues like:

• Break the browsers’ “Back” button.
• Can confuse visually impaired visitors, using screen readers.
• Content within the iframe doesn’t fit in and looks odd.
• Every <iframe> in a page requires increased memory and other computing resources.

2. <iframe> is not natively responsive, you could have problems with mobile devices.

 

Here is another solution, using a super-simple JS that is even reusable for other things without creating a custom component.

Another (this one is stupid, IMO) solution could be to use the data-* (https://www.w3schools.com/tags/att_data-.asp) attribute and create a single HTML file that serves the whole site. Here is an example.

 

IMO the real question is: do you want to do it in the best way or simply do it? 
Of course you can use <iframe>, but it's like using <table> to display content instead of using <div>.

[Neftex]

@TheJudge91 youre copy pasting issues mentioned on other sites, you should look at the reality (im no genius but look at my implementation above)

• back button does not break because im not navigating the iframe, im navigating the whole browser tab
• iframes work fine with screen readers - "Generally, using iframes won’t negatively impact the experiences of people who use screen readers and other assistive technologies. However, iframes must have meaningful titles." https://www.boia.org/blog/why-are-iframe-titles-important-for-accessibility
• css styling works fine on the iframe, yes there are exceptions but they are not needed here
• i very much doubt performance/memory is a problem for a simple header menu

apart from using static page generator like @maks112 mentioned, i think its the best option for a static website without javascript

 

but since OP returned and said he changed his mind and going modern with javascript, then framework makes the most sense right now