Content in one float from ref in another float

Question

My html page is divided in to three columns using CSS and float. In the left hand column I want to put a selection of links ... how can I direct these links to open in the middle (main) float?

code is from https://www.w3schools.com/css/tryit.asp?filename=trycss_template2_float with the difference that I've separated the style sheet from the html using

<link rel="stylesheet" type="text/css" href="test.css">

to tie the two files together.

As to what I've tried ... nothing. The w3s link doesn't appear to have anything appropriate I could put in to the YYYY part of the link.

You want external webpages to be opened within the boundaries of your middle column ? — Trunk, Jul 08 '18 at 11:18
why not use your layout as a template, make a new page for each link? — moatist, Jul 08 '18 at 11:20
@Trunk I want a daily blog, where I have a calendar (of links) in column 1 which open up the posts of whatever day in column 2 (the middle column) — DarrenRhodes, Jul 08 '18 at 11:22
@moatist - ok. I can see that would work ... I thought there might be some sort of target attribute. If not - solved. thanks. — DarrenRhodes, Jul 08 '18 at 11:24
https://stackoverflow.com/questions/18145273/how-to-load-an-external-webpage-into-a-div-of-a-html-page — Trunk, Jul 08 '18 at 11:25
@user1945827 not unless you use iFrames like Trunk suggested. If you can use server-side code (PHP, Perl) even better. — moatist, Jul 08 '18 at 11:29
will go with @moatist suggestion but this means re-writing all previous files on a daily basis to reflect change in the calendar. — DarrenRhodes, Jul 08 '18 at 11:41
@user1945827 when using lots of pages you'll find it more convenient to solve it using server-side code, or JavaScript. I'm not sure what you're familiar with. — moatist, Jul 08 '18 at 12:01

score 1 · Accepted Answer · answered Jul 08 '18 at 12:16

$(".links a").on("click", function (e) {
  e.preventDefault();
  $(".content #myIframe").attr("src", $(this).attr("href"));
});

div { width: 49%; display: inline-block; }
.content { border: 1px solid #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="links">
  <ul>
    <li><a href="http://exocraft.io">exocraft.io</a></li>
    <li><a href="https://slither.io">slither.io</a></li>
    <li><a href="https://www.bing.com">bing.com</a></li>
  </ul>
</div>
<div class="content">
  <iframe id="myIframe" src=""></iframe>
</div>

this is modified from what MajiD posted, now its working – moatist Jul 08 '18 at 12:17 — moatist, Jul 08 '18 at 12:17

MajiD · Answer 2 · 2018-07-08T14:25:10.993

do this

$(".links a").on("click", function (e) {
  e.preventDefault();
  $(".content #myIframe").attr("src", $(this).attr("href"));
});

div { width: 49%; display: inline-block; }
.content { border: 1px solid #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="links">
  <ul>
    <li><a href="https://www.google.com">google</a></li>
    <li><a href="https://www.yahoo.com">yahoo</a></li>
    <li><a href="https://www.microsoft.com">microsoft</a></li>
  </ul>
</div>
<div class="content">
  <iframe id="myIframe" src=""></iframe>
</div>

Content in one float from ref in another float

2 Answers2