Forum Moderators: open
Message Too Old, No Replies
Creating a Navbar
Want to create it once, and then access it on multiple pages
I'm trying to figure out how to create a simple horizontal navbar that exists in a single file that can then be called up on multiple web pages. The idea is that I don't want to have to repeat the navbar code on every page of the site, as that will make it nearly impossible to maintain. I've seen quite a few online tutorials for creating navbars, but every one that I've seen involves duplicating the same code on each page. My first thought was to use an iframe or an embed to display it from the original file, but that doesn't work, because it tries to load the new page in the iframe. Any suggestions for a simple way to create the navbar in one place and access it on multiple pages?
Background:
I'm in the process of reformatting an old website that was created with Apple's (now obsolete) iWeb web authoring software. The pages are fairly simple static text with some graphics interspersed. The original site is no longer maintainable in its iWeb form, and I've decided to redo it with a single css file and the individual html pages (total of about 65 pages). I have some rudimentary experience with html and javascript, and am just now getting into css.
Do you know how to create and use includes?
Thanks for the quick reply.
No, I hadn't known about includes until you mentioned it. I think I'd searched for just about every similar keyword except that. So, now I've found on the W3 website a javascript function w3.includeHTML() that appears to do what I want. Is that what you were referring to, or is there something simpler?
There were some stumbling blocks because I was doing my testing using local files accessing them with file:///... which was causing a security problem with Firefox, and it wouldn't allow loading of the external file even though it's in the same directory as the rest of the site files. So, I've now set up a local server with Python.
With the test site running on the local server, the javascript function is working. I've also found that another method, that failed earlier, now works correctly. I found it here:
[css-tricks.com...]
It's a one liner using an iframe that copies the inner code outside the iframe and then deletes the iframe.
<iframe src="navbar.html" onload="this.insertAdjacentHTML('afterend', (this.contentDocument.body||this.contentDocument).innerHTML);this.remove()"></iframe>
It works, but it seems like a bit of a hack, and I'm concerned that it may not be a good way to do it. What's your opinion?
I always preferred simple php includes for ease of creation, use and maintenance. You just create the element that you want and style it, then snip it out of the original page to store in a file for use on several pages.
Storing the file:
Save the text snippet of html as .html or .php or .txt whichever you prefer. I saved them to one folder just to make updating simpler but they can be stored with your .css files, .js files, loose or wherever it is most convenient for keeping them up to date - things change.
The addition of the element - where you want it to show, add the include reference link:
<?php
include("/folder/filename.php");
?>If you view the page source code for the displayed page you will see all the html is shown on the page as if it were part of the page. This can be important when deciding how to use includes. Because php is server side the include is added as the page is parsed for display so bots don't see that "<?" include code on your pages. Javascript is client side.
So, I've now set up a local server with Python.
Are you proficient in Python? If so I strongly recommend that you use the Flask frame work.
[flask.palletsprojects.com...]
When using Flask, you can create templates to do what exactly you want. This can then be applied to all static content on the page, footer, sidebars etc...
There is an excellent and fully comprehensive tutorial series for getting started and more here:
[blog.miguelgrinberg.com...]
If you are very proficient with Python and have been using asyncio, then instead of Flask you can use Quart which is an asyncio implementation of Flask.
I'm not proficient with Python, and not proficient with PHP. I want to keep this project entirely in html, css and Javascript, and the less Javascript the better.
I intend to create a boilerplate wrapper of the outer html—everything but the body content—identical for every page.
Python is pretty easy and straight forward to learn, a simple Flask would achieve your goal.
You can do it with html and css only. Look for the include virtual for more information
#include virtual="/includes/menu-inc.html"
the less Javascript the betterIn this specific case, the only acceptable amount of javascript is none at all. Otherwise you'd have to make an alternative navbar <noscript> for users with scripting turned off, and then you're right back where you started.
If you have never used SSI before, make sure you set
Options +Includes
and
AddOutputFilter INCLUDES .html
(the latter is so you don't have to rename everything .shtml)
That's assuming htaccess in Apache. Other server types will of course use different language.
Do it simply. Use an include file with PHP.
@lucy24 Unfortunately there are about six pages on the site that won't work without javascript, so those pages will never be functional with javascript disabled.
Regarding all of the suggestions to use server side scripting, I have no experience doing this, and I don't know how much control I would have, as this is a simple hobby website on shared hosting.
At the moment, I don't want to get bogged down with the navbar when there are more important things to deal with. For now, the iframe trick seems to do the job. When I get further along with converting the site, I'll revisit this, and look at server side solutions.
Anyway, I appreciate all of the suggestions. Thanks everyone.
there are about six pages on the site that won't work without javascript, so those pages will never be functional with javascript disabled.
One reason why using SSI is a good choice. A growing number of visitors are viewing the web with JS disabled ... and only turn it on for sites they know and trust.
If the user can't see the pages on first visit, they might not be inclined to turn it on when it is easier to hit the back button and move on to the next entry in the serps.
Just sayin'---
(Been using SSI over 20 years. Once two settings are made it is bulletproof and non offensive in any way.)
A growing number of visitors are viewing the web with JS disabled
Care to provide a source for this claim, because to me it seems made up. If anything more and more websites are switching to client side frameworks like React, Angular, Vue etc... Where you get no JS === no content.
It does not really matter how many users have JavaScript disabled.
The important thing is to make sure that the site is fully accessable
for all visitors.
If that is not practical for a specific page, then, at least, redirect them
to another in this manner...
<noscript>
<meta http-equiv="refresh" content="0; url=https://html.duckduckgo.com/">
</noscript>
coothead
Regarding the pages that require javascript, these are online calculators that perform scientific calculations based on user entered data, with the result displayed on the page. Without javascript, this would require cgi, and a bunch of code on the server which I'm pretty sure is not possible with my hosting plan.
I'll include a <noscript> blurb that informs the user that it's non-functional without javascript enabled.
these are online calculators that perform scientific calculations based on user entered data
You should really consider learning Python. I do a lot of front-end work with JS and there is nothing wrong with it. But there are a lot of libraries available in Python that can really simplify your life when it comes to math, scientific calculations and statistics. It is really worth the time to learn it.
Years ago, I did a lot of programming in Java, so there was very little learning curve getting into Javascript.
As for Python, I can read it and generally understand it. I've converted quite a few Python routines into other languages. The thing that I absolutely despise about Python is its use of indentation for delimiting control structures. IMHO that's such an incredibly stupid idea that it makes me wonder what other idiotic things in the language are lurking around the corner waiting to pounce.
Meanwhile, Server Side Includes are just a few lines here, a few lines there. (We seem to be drifting onto other topics.) The file-to-be-included can be anything from plain html to the advanced language of your choice. But please, not javascript for this.
While you're at it, you might as well make a shared footer too. Don't you have some of the same stuff at the bottom of each page?
Join The Conversation
- Register For Free! - Become a Pro Member!
- See forum categories - Enter the Forum
Moderators and Top Contributors
- Moderator List | Top Contributors:This Week, This Month, Aug, Jul, Archive, Top 100 All Time, Top Voted Members
Hot Threads This Week
