Log in

View Full Version : 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
:
<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:


<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 (http://www.dynamicdrive.com/forums/entry.php?292-From-frameset-to-hashchange) for a possible solution.
Beverleyh
03-21-2015, 05:06 PM
Hey Beverley.

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

JimEeek, 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:

<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
Jim Weinberg
03-22-2015, 05:34 PM
Hey Arie.

Got it solved. With your suggestion, I did a little research and came up with the following:



<a href="BookList.html#A" target="BookList" onclick="checkbrowser();">A</a> |
<a href="BookList.html#B" target="BookList" onclick="checkbrowser();">B</a> |
<a href="BookList.html#C" target="BookList" onclick="checkbrowser();">C</a> |
:
:
:


Where checkbrowser is:


function checkbrowser(){
browsername=navigator.userAgent;
xx=document.documentElement.scrollTop
if (browsername.indexOf("Safari")!=-1) xx=document.body.scrollTop;
setTimeout('window.scrollTo(0,xx)',0);
}


The only thing is that in IE and Safari, the window flashes when one of the hash links is clicked. A bit annoying, but much, much better.

If you figure out a way of getting around the screen flashing, let me know. Otherwise, I think I'm good to go.

Thanks for the help.
Jim
molendijk
03-22-2015, 07:08 PM
Nice you solved it.
On my machine, the flash is not very annoying. You could try to use jquery fadeIn / fadeOut for softening the flash.