Member Avatar for brad.d.mcleod

Okay, I'm trying to do something, and I have no idea what's going on. Without having to spend a long time learning another programming language, all I want to do is target a div with a link from another div.

Okay, what I want is to click the Menu link on the left, and have the page show up in the #maincontent div in the middle.

I miss frames. They were so easy. Target=

  • 3 Contributors
  • 4 Replies
  • 256 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

Quick practical answer for : two straightforward ways to “target a div like a frame” — an iframe (closest to old frames, simplest) or an AJAX injection (modern single‑page feel). This builds on ’s suggestion to replace a div’s contents and on ’s idea of separating code; below are concrete placement and troubleshooting notes.

AJAX (clean injection; good when the content is same‑origin or CORS is enabled). Put menu anchors in the left column with real hrefs (progressive enhancement) and a data-load attribute, then place the script just before </body> or use defer. Example markup and handler:

<a href="/menu/about.html" data-load="/menu/about.html" class="ajax-link">About</a>

<script>
/* place just before </body> or use defer */
document.addEventListener('click', function(e){
  var a = e.target.closest && e.target.closest('a.ajax-link');
  if(!a) return;
  e.preventDefault();
  var url = a.dataset.load || a.href;
  fetch(url).then(function(r){ return r.text(); }).then(function(html){
    var doc = new DOMParser().parseFromString(html, 'text/html');
    var fragment = doc.querySelector('#maincontent') || doc.querySelector('main') || doc.body;
    document.getElementById('maincontent').innerHTML = fragment ? fragment.innerHTML : html;
  }).catch(function(){ location.href = url; });
});
</script>

Iframe (easiest, works cross‑domain): put a single iframe inside #maincontent and use target on links — this behaves exactly like the old frames target:

<div id="maincontent">
  <iframe id="contentFrame" name="contentFrame" style="width:100%;height:600px;border:0"></iframe>
</div>

<a href="/menu/about.html" target="contentFrame">About</a>

Troubleshooting: a “syntax error at #framecontentTop” usually means the browser was parsing CSS when it hit JS — often the <script> was accidentally pasted inside a <style> block or a stylesheet. Ensure <script> tags sit outside <style> and outside external .css files, or place scripts before </body>/use defer. Also beware: injecting full pages can duplicate <head>/scripts; prefer loading partial fragments or parse out the part needed. Progressive enhancement (real hrefs) guarantees the menu still works if JavaScript fails.

Recommended Answers

All 4 Replies

Member Avatar for brad.d.mcleod

Also, please, be very specific where I am putting things.

Member Avatar for Member #334542

You can replace another div with below code:

<script type="text/javascript">
<!--
function switchPic(picID)
{

document.getElementById(picID).innerHTML ="<h1>Test</h1>";
}
//-->
</script>
</head>

<body>
    <div id="div1">Link 1</div>
    <a href="javascript:void(0);" onclick="switchPic('div1');">Hide Div</a>
</body>
Member Avatar for brad.d.mcleod

Hi. This is what I was also asking about. Where do I put that? In the body of my code, I have 3 different divs, where do I put it? Where is the link? I see "Link 1", and an href to "javascript:void", but where do I put the page I want to link to?

This doesn't make any sense to me, because I don't know how this works. If I want the menu page to show up in the middle after the link on the left is clicked, how does this do that?

I appreciate your help, I just can't understand what to do.

Please check the to see what this did....

Also, when I put the script in the head, I now have a syntax error at #framecontentTop. Why did it do that?

Edited by brad.d.mcleod
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.