Member Avatar for smartintelleng

Goto:

Escentially theirs a short story hyperlink in the left colom which is supposed to target the main center window and open there, then they would pick a story which would display in the same center window. Im trying to do this without using frames; it doesnt seem possible.
Any suggestions excluding the use of frames in html and residing in the html programming our gradly welcome and appreciated.

  • 2 Contributors
  • 2 Replies
  • 70 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by smartintelleng

Dani AI

Generated

asked for left‑column story links to open in the center area without using frames; was right to steer away from frames. A durable, accessible pattern is progressive enhancement: keep each story as a normal anchor (so links work with JavaScript off, are bookmarkable, and are crawlable), and add a tiny client script that intercepts same‑origin clicks, fetches the story HTML (or a content fragment), injects it into the central container, and updates the address bar with the History API.

A minimal example (replace selectors to match the page):

document.addEventListener('click', e => {
  const a = e.target.closest('a[data-target="center"]');
  if (!a || a.origin !== location.origin) return;
  e.preventDefault();

  fetch(a.href, { credentials: 'same-origin' })
    .then(r => r.text())
    .then(html => {
      const tmp = document.createElement('div');
      tmp.innerHTML = html;
      const fragment = tmp.querySelector('#story') || tmp.querySelector('main') || tmp;
      const center = document.getElementById('center');
      center.innerHTML = fragment.innerHTML;
      history.pushState({url: a.href}, '', a.href);
      center.focus();
    })
    .catch(() => location.href = a.href); // fallback
});

window.addEventListener('popstate', () => {
  // fetch location.href and inject like above
});

Notes and troubleshooting: ensure same‑origin or proper CORS; prefer returning a fragment endpoint (e.g., ?partial=1) to avoid parsing full pages; update document.title when available; move keyboard focus into the injected region for accessibility and use a landmark (role="main"). See MDN for fetch and history details: Using Fetch and History.pushState.

Recommended Answers

All 2 Replies

Member Avatar for tgreer

Use DIVs, and CSS visibility settings. For an example:

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.