Parent Page Jumps When Iframe is Reloaded

**Jim Weinberg** · 03-17-2015, 07:14 PM

I have what seems to be a strange situation. I have a page that uses an <iframe> to display the contents of a table in another page. The table is indexed using anchor tags. What happens is that when the parent page loads, every thing is fine (that is, the page loads properly and the frame shows the first entries in the table). The frame is located about 2/3 from the top of the monitor screen.

However, when I click on any of the anchors, the frame loads with the proper table entries, but the parent page jumps so that the iframe is at the top of the monitor screen. It only happens with IE and Safari. Firefox, Chrome and Opera work fine.

The parent page looks like this:

HTML Code:

:
html code
:
<a href="BookList.html#A" target="BookList">A</a> | 
<a href="BookList.html#B" target="BookList">B</a> | 
<a href="BookList.html#C" target="BookList">C</a> | 
:
:
<br>
<table width="96%" border=0>
<tr>
<th width="31%"><b><font size=4>Title</font></b></th><th width="5%"><b><font size=4>Date</font></b></th><th width="22%"><b><font size=4>Author</font></b></th>
</tr>
</table>
<iframe name="BookList" src="BookList.html" style="background: #FFFFFF;" width="98%" height="300"></iframe>    
:
:
more html code
:

The page being loaded into the iframe looks like this:

HTML Code:

<body>
<font face="Verdana">
<table width=100% border="0">
<tr><td colspan=3><a name="A">&nbsp;</a></td></tr>
<tr><td width="55%">1977 Handbook - American Political Items Collectors</td><td width="10%">1977</td><td>Crummet, Olson, Nichols, Albert</td></tr>
<tr><td>A Button Collector's Second Journal 1ST ED SIGNED</td><td>1941</td><td>Lillian Smith Albert</td></tr>
<tr><td>A Classification of Clear and Colored Glass Buttons</td><td>1969</td><td>Jane Ford Adams</td></tr>
<tr><td>A Classification of Pearl and Shell Buttons</td><td>1971</td><td>Margaret F. Kelso</td></tr>
<tr><td colspan="3"><a name="B">&nbsp;</a></td></tr>
<tr><td>Baubles, Buttons and Beads The Heritage of Bohemia</td><td>1993</td><td>Sibylle Jargstorf</td></tr>
<tr><td>Beads & Buttons Number 5</td><td>1994</td><td></td></tr>
<tr><td>Brass Roots</td><td>1952</td><td>Scovill Company</td></tr>
:
:
</table>
</body>
</html>

I've tried several of the suggested fixes, but none seem to work. Any suggestions would be appreciated.

Thanks.

**Beverleyh** · 03-17-2015, 07:37 PM

So we can see what's happening directly, please post a link to the problematic page.

Also, you say you've tried several of the suggested fixes but none seem to work. What fixes would they be? (Useful so we're not wasting time recovering things that have already failed)

**Jim Weinberg** · 03-18-2015, 01:08 PM

Hi Beverley.

The link is http://coloradobuttons.com/testing/Resources.html. As for what I've tried, I honestly can't recall. I saw a solution, I tried it, it didn't work, so I forgot about it. Most had to do with adding javascript to control the iframe position. Sorry, but that's the best I can do.

Thanks for the help.
Jim

**Jim Weinberg** · 03-21-2015, 11:50 AM

Hey Beverley.

Are you still working on a solution for me or have you just given up?

Jim

**molendijk** · 03-21-2015, 12:00 PM

As far as I can see it, the parent page jumps because a click on a link (re)loads both the parent page and the iframed page.
Try this for a possible solution.

**Beverleyh** · 03-21-2015, 05:06 PM

Originally Posted by Jim Weinberg

Hey Beverley.

Are you still working on a solution for me or have you just given up?

Jim

Eeek, I wasn't aware that I *was* working on a solution for you. Remind me what rates we agreed and I'll reissue the invoice.

**Jim Weinberg** · 03-21-2015, 06:58 PM

Hey Beverly.

Very funny. I thought that the purpose of the forum was to help people solve their coding problems. Was I mistaken?

Jim

**Jim Weinberg** · 03-21-2015, 07:06 PM

Hi Arie.

Thanks for the response. I read over the article(s), but as far as I can tell, their solution won't work for me as I'm already using hash marks to display various sections of the loaded page. Any suggestions?

Thanks again.
Jim

**molendijk** · 03-22-2015, 11:47 AM

I see what you mean now. I was wrong in my previous post. The window. doesn't reload.
Here's a possible fix:

Code:

<a href="BookList.html#A" target="BookList" onclick="setTimeout('window.scrollTo(0,0)',0)">A</a> | 
<a href="BookList.html#B" target="BookList" onclick="setTimeout('window.scrollTo(0,0)',0)">B</a> | 
<a href="BookList.html#C" target="BookList" onclick="setTimeout('window.scrollTo(0,0)',0)">C</a> |

**Jim Weinberg** · 03-22-2015, 04:14 PM

Hi Arie.

We're getting closer. With your suggestion, the window now jumps to the top. Which is better than it was, but still annoying. Is there a way to capture the current position and have it scrollTo there instead of 0,0?

Thanks again.
Jim