'How to selectively show portions of an iframe website using HTML

How to selectively show portions of an iframe website using HTML? The current website shows the entire iframe website and needs scrolling when I choose the options on the table as shown.

enter image description here

But I want to show a particular portion of an iframe website without showing the other articles in the iframe website when I press on the option on the main website as shown below.

enter image description here

How do we pull this off? Thanks!

The code I used for the iframe website is:


<!DOCTYPE html>
<html>
<style>
    body {
  background-image: url('20211121_175201.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

p,h1 {color:white;}
</style>
<head>
<title>Wacky Ideas List of Ideas</title>
</head>
<body>


<table style="float: right;margin-right: 160px;display: none">
    <tr>
        <th>Wacky Ideas</th>
    </tr>
    <tr>
        <td><a href="#A1">Model Cardboard Jet Engine</a></td>
    </tr>
    <tr>
        <td><a href="#A2">Toy Electric Fan</a></td>
    </tr>
    <tr>
        <td><a href="#A3">Toy Model Car</a></td>
    </tr>
</table>


<h1 id="A1">Model Cardboard Jet Engine</h1>

<p style = "width: 100%;text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam non erat luctus vehicula a id augue.....</p>
</p>

<hr>

<h1 id="A2">Toy Electric Fan</h1>

<p style = "width: 100%;text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam non erat luctus vehicula a id augue....</p>

<hr>

<h1 id="A3">Toy Model Car</h1>

<p style = "width: 100%;text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam non erat luctus vehicula a id augue.... </p>

</body>
</html>

The code I used for the main website is:

<!DOCTYPE html>
<html>
<style>

    table,th,td{border: 1px solid white;color: white;height: 50px;font-size: 20px}
    body {
  background-image: url('20211121_175201.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

p,h1 {color:white;}
</style>
<head>
<title>Wacky Ideas</title>
</head>
<body>

<h1 style="color: white;height: 50px">Wacky Ideas</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


<table style="float: right;margin-right: 160px">
    <tr>
        <th>Wacky Ideas</th>
    </tr>
    <tr>
        <td><a href="file:///C:/Users/pc/Desktop/experimental%20website/wacky%20ideas%20list%20of%20ideas.html#A1" target="iframe_a">Model Cardboard Jet Engine</td>
    </tr>
    <tr>
        <td><a href="file:///C:/Users/pc/Desktop/experimental%20website/wacky%20ideas%20list%20of%20ideas.html#A2" target="iframe_a">Toy Electric Fan</td>
    </tr>
    <tr>
        <td><a href="file:///C:/Users/pc/Desktop/experimental%20website/wacky%20ideas%20list%20of%20ideas.html#A3" target="iframe_a">Toy Model Car</td>
    </tr>

</table>

<iframe src="file:///C:/Users/pc/Desktop/experimental%20website/wacky%20ideas%20list%20of%20ideas.html" name="iframe_a" height="1000px" width="1100px"></iframe>

</body>
</html>

Thank you all!

html


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions