Member Avatar for pacouy

Hi to all!
This is my first time for all of this, Forum, DaniWeb, CSS & Containers, so thanks in advance for your support. (My first computer was a Timex Sinclair 1000 and learned IMB S36, , I’m that old!)
I'm trying to use CSS Containers (header, maincontent, footer) for my web page.
The header has my menu (html made with fireworks) and want to display the linked pages from the menu inside "MainContent".
Is it possible?
I made it before with Frames but I read that they have several problems with web searching robots.
Once again thanks to all.
Paco

  • 2 Contributors
  • 3 Replies
  • 133 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by pacouy

Dani AI

Generated

Good container layout, — and thanks to for pointing toward dynamic loading. A practical pattern is: keep a standalone, crawlable page for each URL (so search engines and users without JavaScript get full pages), and enhance the header menu with client-side loading that swaps the inner HTML of your #maincontent, updates the URL with the History API, and runs any small initialization needed for the new fragment.

Example (minimal): fetch the clicked page, parse it, pull out the main fragment, replace the container, update title/history, and handle script tags.

async function fetchPage(url, push = true) {
  const res = await fetch(url, {credentials: 'same-origin'});
  if (!res.ok) throw new Error(res.status);
  const html = await res.text();
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const newMain = doc.querySelector('#maincontent');
  if (!newMain) return location.href = url; // fallback to full navigation

  // replace content and title
  const main = document.querySelector('#maincontent');
  main.innerHTML = newMain.innerHTML;
  document.title = doc.title || document.title;

  // re-run scripts from the fetched fragment
  newMain.querySelectorAll('script').forEach(s => {
    const n = document.createElement('script');
    if (s.src) n.src = s.src;
    else n.textContent = s.textContent;
    document.head.appendChild(n);
    document.head.removeChild(n);
  });

  if (push) history.pushState({url}, '', url);
  main.focus();
}

window.addEventListener('popstate', e => {
  if (e.state && e.state.url) fetchPage(e.state.url, false);
});

document.querySelector('header').addEventListener('click', e => {
  const a = e.target.closest('a');
  if (!a || a.target || a.hasAttribute('data-no-ajax')) return;
  e.preventDefault();
  fetchPage(a.href).catch(() => location.href = a.href);
});

Notes and gotchas: scripts injected via innerHTML do not execute by themselves, so either extract and append them as above or initialize page behavior via a small client-side init function. Watch relative URLs (use a proper <base> or ensure paths are absolute) and avoid loading cross-origin HTML without CORS. Ensure each view is reachable at its own URL for SEO; see Google on JavaScript and indexing and MDN docs for the Fetch API, DOMParser, and the History API for details (, Fetch API, DOMParser, History API).

Recommended Answers

All 3 Replies

Member Avatar for mindlesswizard

Hi to all!
This is my first time for all of this, Forum, DaniWeb, CSS & Containers, so thanks in advance for your support. (My first computer was a Timex Sinclair 1000 and learned IMB S36, , I’m that old!)
I'm trying to use CSS Containers (header, maincontent, footer) for my web page.
The header has my menu (html made with fireworks) and want to display the linked pages from the menu inside "MainContent".
Is it possible?
I made it before with Frames but I read that they have several problems with web searching robots.
Once again thanks to all.
Paco

hi there,
yeah it is possible !!!

USE "AJAX" to load the contents inside the "MainContent"

Member Avatar for pacouy

Thanks,
I'll try with ajax as soon as I undertand how it works!, jaja
I'm going to read more about it and coma back for some advice in the way to take.
Can you recomend me where to find more about ajax and the way to call this property?
Paco

Member Avatar for pacouy

Here I am again.
I think I solved my problem using Dreamweaver behavior "Change text of contaier"
There you can place text or any html or java, so I'll use that road to solve my problem.
Thanks
Paco

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.