-1

Say I have something like the following:

<!-- index.html -->
<a href="#heading32">Link to Section</a>

<section id="heading1">Section Name</section>
<div>Content</div>
<section id="heading2">Section Name</section>
<div>Content</div>
<section id="heading3">Section Name</section>
<div>Content</div>
<!-- More sections -->
<section id="heading32">Section Name</section>
<div>Content</div>
<!-- More sections -->

Basically, I want to implement a functionality similar to what you find in sites like Wikipedia, where you click a link in a table of contents and it will scroll your page down to the linked section.

Now, I need to change the code as follows:

<!-- index.html -->
<a href="#heading32">Link to Section in iFrame</a>
<iframe src="content.html">

<!-- content.html -->
<section id="heading1">Section Name</section>
<div>Content</div>
<section id="heading2">Section Name</section>
<div>Content</div>
<section id="heading3">Section Name</section>
<div>Content</div>
<!-- More sections -->
<section id="heading32">Section Name</section>
<div>Content</div>
<!-- More sections -->

Basically, the table of contents will now be in the parent container, and clicking on one should have the iframe content go to the linked section - same functionality as before, only that the content is now relocated.

How should I further modify my implementation to achieve it? The content is exported from a Microsoft Word document and so the content HTML document cannot be modified per se. My system's framework, however, does allow me to add scripts and stylesheets but that's about it.

thegreatjedi
  • 2,788
  • 4
  • 28
  • 49

1 Answers1

0

Think a variation of this has been asked and answered in another stackoverflow question. open link in iframe

http://jsfiddle.net/HnXFj/2/

Basically this:

<a href="content.html" target="myIframe" >Link to Section in iFrame</a>
<iframe src="content.html" name = "myIframe">
codinon
  • 43
  • 5