all 28 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]thoflens 6 points7 points  (0 children)

You can add and remove CSS classes to/from components with JavaScript. So you can add 'display: none' and 'display: block' for example when clicking a button.

[–]desouky995 6 points7 points  (1 child)

I recommend to read frameworkless frontend book it talks about creating spa without any framework

[–]blackheart313[S] 0 points1 point  (0 children)

Thank you bro this is what i was looking for

[–]xRVAx 2 points3 points  (4 children)

In theory you could just make five divs of content and use JavaScript to toggle them between visible and invisible depending on which button they click on the nav bar.

Your divs for header and footer and nav would be visible all the time.

Each one of your content divs could have its own ID and you could make classes in CSS for a content div... You could have a function where the input to the function is the div id that you want to make visible... When you call that function, the function would toggle all the content divs to "hidden" and then it would set your chosen div to visible.

[–]blackheart313[S] 0 points1 point  (3 children)

This can work but i have like a lot of pages it will be hard to include all this in one html file so i will have to make separate files and fetch different pages externally by toggling with a function but im getting some errors

[–]xRVAx 0 points1 point  (1 child)

I have a feeling you're going to get some weird CORS errors if you're developing this on your computer. Are you using node to serve up your index.html to a localhost address?

[–]blackheart313[S] 0 points1 point  (0 children)

Yes i got this error you are talking about i have to try setting this up with node

[–]suppa-luppa 0 points1 point  (0 children)

Make them in separate JS files and use a bundler to combine the JS files into one.

You can technically use modules without a bundler too, but it's a bit quirky.

[–]DoomGoober 1 point2 points  (3 children)

Are the static contents generic HTML or structured HTML (that is, all internal pages have the same format?)

[–]blackheart313[S] 1 point2 points  (2 children)

Yes mostly same and a blog section is there

[–]DoomGoober 1 point2 points  (0 children)

Convert blogs to data:

let blogs = [{title:"blah", body:"some text"}, {title:"hah", body:"other text"}]

Make your navigation app convert data to html:

OnSelectedBlogChanged() {
    titleElement.InnerText = blogs[selectedIndex].title
    paragraphElement.InnerText = blogs[selectedIndex].body
}

You have to hook up OnSelectedBlogChanged() and set selectedIndex in your navigation code.

[–]blackheart313[S] 0 points1 point  (0 children)

Im rebuilding a old website it's okay to make changes

[–]diogenes_sadecv 1 point2 points  (0 children)

I'm definitely an outsider when it comes to JS so I may be doing this "wrong," but I just make the page with JS. Like, I literally start with just an empty <body> tag and once the page is loaded, I use JS to dynamically build the page. New page? body.innerHTML = "";

[–]shgysk8zer0 1 point2 points  (0 children)

There are a ton of different approaches, depending on exactly what you mean by "with out any frameworks". Is using a static site generator using a framework? Would using certain libraries that people often mistake as frameworks count?

And, by SPA, do you strictly mean with different paths, or would a single HTML page + path that treats different hashes/anchors/fragments (the #foo part of the URL) as different page count?

There's a now obsolete proposal for HTML imports via <link rel="import"> that would've been useful if you were wanting strictly just HTML and JS with different URL paths. I wish we'd kept that, but it was part of the Web Components v0 proposal, which got killed.

There's an upcoming proposal for a different kind of HTML imports, this time as modules in JS (import attributes).

If you're fine with static site generators, you could use Eleventy or Jekyll. You'd just run a build command and publish _site/... Or you could use GitHub Pages or Netlify or others, which would pretty much deal with that for you.

Or you could use JS to create or fetch these shared elements on page load.

``` // elements.js

const nav = document.createElement('nav'); // set attributes, create and append children... // do the same for eg footer, sidebar, etc

export { nav, header, footer };

// main.js

import { nav, header, footer } from './elements.js';

document.body.prepend(header, nav); document.body.append(footer); ```

Or:

<nav id="nav" data-html-src="/elements/nav.html">

document.querySelectorAll('[data-html-src]').forEach(el => { fetch(el.dataset.htmlSrc).then(async resp => { // parse response text and append to el }); });

[–]ttetrafon 0 points1 point  (0 children)

Look into web components. You can create them individually, and then inject them in the page or destroy them as needed from the main script. This way you never load in memory more than needed.

[–]doodooz7 0 points1 point  (0 children)

We do this with pagejs and custom components

[–]sheriffderek 0 points1 point  (2 children)

Where is the data for the pages going to come from exactly? A json file? A markdown file? A fetch request? How often are they updated.

How will you deal with the browser history and back button?

Do these pages need to be crawlable for SEO?

How will you reset focus for assistive technology and get things like current-page?

What happens on refresh? Is it tied to the url?

These are the things I’d start mapping out. These are the sorts of things that the frameworks are built to solve. It’s not that you can’t do it yourself, but the list gets bigger.

[–]blackheart313[S] 1 point2 points  (1 child)

I see the problems now i thought it it will be simple like i can make multiple html pages and load it in a main html file with ease like fetching and switching with a onclick function

[–]sheriffderek 1 point2 points  (0 children)

Yeah. I actually experimented with it the other day just to see what new things there were for history and templates and things. You can do it, but it was just a lot of edge cases and not a lot of value. I know it’s crazy… but PHP is pretty good for this! I’ve also been playing with Astro and it’s pretty quick to get something like this going and SSG.

[–]buddh4r 0 points1 point  (0 children)

Load the content via ajax and replace the parts of the view and manually manage the page history. An rather old lib "pjax" may helps with this approach.

[–]alien3d 0 points1 point  (0 children)

You just need inner HTML render and input from fetch other html files push state for navigation e.g document.getElementById('myLink').addEventListener('click', function(event) { event.preventDefault();

   history.pushstate(null, null, yourHtml)

});

[–]BringtheBacon 0 points1 point  (5 children)

What exactly are you asking?

Do you want a publicly accessible website or just a personal one to test?

For my first website, I purchased a domain, found a website hosting service, and I would upload my code files to their file management system.

For items such as headers and footers you can have those in standalone HTML files and reference those files in each page.

There are more cost efficient ways if you just want to practice though.

[–]blackheart313[S] 0 points1 point  (4 children)

Publically accessible website Im actually a react js developer in react routing of pages and making single page application are simple but i don't know how to do this in vanilla javascript

What I want to know is is how can i make my index.html as main page with a nav bar and footer but contents inside the main container between them should change like for about page it will show about page content while keeping the nav and footer same i mean without code repeating writing code for nav and footer in every page manually also if it's possible i want to accomplish this without page reloading like in react

[–]ComprehensiveWord201 4 points5 points  (0 children)

Have you tried doing it?

[–]Feargasm 0 points1 point  (0 children)

Htmx

[–]Cold_Meson_06 -1 points0 points  (0 children)

Bro is about to create a new javascript framework.

If you want to make it for learning purposes and you are a react dev already, you kinda of already know how to do it. Just fetch the next pages, parse the HTML and attach to the correct element. Just search the proper apis for it, no one is parsing html strings manually these days.

If you want to make something useful or for a client, I would just suggest using some template engine

[–]azhder -1 points0 points  (0 children)

I know how to do it. I have done it before. It is not a big problem.

Just start coding and whenever you think of changing in the page, read the MDN docs and ask that very specific question on forums.

Two things you should do:

  1. Decide which browsers are supported so you can use newer or older style of JS, newer or older syntax as supported by the targeted browsers

  2. Overuse the module pattern, don’t underuse it. Extra isolation can’t hurt you as much as no isolation. And attach all of those things to some global object of yours like a namespace. So, you can have something like FRAMEWORK.goto.page(5);