rzPIframe - anchor tags not working in FF

**Nightwing308** · 04-30-2015, 03:50 PM

This is a "revival" of a very old thread http://www.dynamicdrive.com/forums/showthread.php?9139-Iframe-SSI-script-II-with-Opera/page2

@ John Scheuer - I love your rzPIframe script, and I've been using it extensively without any major problems (once I figured out how to correctly specify the DOCTYPE

).
But now I have come across a strange "glitch" that I could really use some help with.

I never noticed it before since I normally don't use anchor tags, but in FireFox ny anchor tags for scrolling to a specific
section in a page that is loaded into the rzPIframe do NOT work. I've found the problem ONLY in FireFox... in IE, Opera, Chrome and Safari
the anchor tags work as they should to scroll the page up or down.

Any chance this could be fixed so the anchor tags work correctly in FF too?...Plleeeeaase!!!

**jscheuer1** · 04-30-2015, 04:40 PM

This seems odd to me. Isn't the point of the script to resize the iframe to the height of the page that goes into it? If so, no anchors should work because a page can only scroll to anchors, if the window the page is in (iframe in this case) is the same height as the page, there's nowhere to scroll to.

That said, there's a good chance I just don't understand what you mean. If my above explanation doesn't fit the situation, and you want more help, please provide a link the problematic page on your site, so I can check it out. And please describe what I have to do to see the problem.

**Nightwing308** · 05-05-2015, 12:48 PM

Sorry John, I didn't know you had replied (email program was throwing messages into the junk folder).
Anyway, here is a link to a site (under construction) where I first noticed the problem
http://www.cvpws.org/indexREAL.html
On the "Migratory Bird List" page, the letters at the top of the list are linked to scroll the page down to the corresponding section, and each section (starting at 'B') has a "Back To Top" text link that scrolls back up....at least in IE, Opera, Safari and Chrome (using Comodo Dragon) the scrolling works flawlessly. Just not in FireFox!

**jscheuer1** · 05-05-2015, 03:53 PM

Well, it's like I said. Firefox is just the only one getting it right. Those others are not scrolling the page, they're scrolling the parent page. A script can be devised to make Firefox behave similar to those others, but I'm unsure about what effect it will have upon the browsers that are already doing what you want them to do. I think the best approach would be to try and trap the movement the other browsers are making and have that opt them out of the code I will write for this. I'll let you know.

**jscheuer1** · 05-05-2015, 05:04 PM

OK, let's try this out. Put this script on the page inside the iframe:

Code:

<script type="text/javascript">
if(window.addEventListener && typeof window.scrollY === 'number'){
	var scrollTrac = {};
	document.addEventListener('mousedown', function(e){
		if(e.target.hash){
			scrollTrac.el = e.target;
			scrollTrac.Y = parent.scrollY;
		}
	}, false);
	document.addEventListener('click', function(e){
		if(e.target === scrollTrac.el){
			setTimeout(function(){
				if(scrollTrac.Y !== parent.scrollY){return;}
				var gotoel = document.getElementsByName(scrollTrac.el.hash.substring(1))[0];
				parent.scrollTo(0, gotoel.offsetTop + window.innerHeight - gotoel.parentNode.offsetHeight);
			}, 300);
		}
	}
}
</script>

It may or may not need to be tweaked for that page. And, depending upon how similar other pages you have that are doing this are, it may have to be tweaked for one of them. But before I get into minute details, let's see how it goes.

**Nightwing308** · 05-05-2015, 10:05 PM

Still getting the same result. The anchor tags scroll the page up (or down) in IE, Opera, Chrome and Safari but not in FireFox. I tried different locations for the script inside the page that has the anchor tags...in the <head> section before or after the rzPIframe script, just after the opening <body> tag, and just before the closing <body> tag, but it doesn't seem to make a difference.

**jscheuer1** · 05-05-2015, 11:05 PM

Syntax error on my part, sorry - hard to test remotely in Firefox, especially in an iframe. Use this script instead (shouldn't really matter where it goes as long as it's on the page in the iframe):

Code:

<script type="text/javascript">
if(window.addEventListener && typeof window.scrollY === 'number'){
	var scrollTrac = {};
	document.addEventListener('mousedown', function(e){
		if(e.target.hash){
			scrollTrac.el = e.target;
			scrollTrac.Y = parent.scrollY;
		}
	}, false);
	document.addEventListener('click', function(e){
		if(e.target === scrollTrac.el){
			setTimeout(function(){
				if(scrollTrac.Y !== parent.scrollY){return;}
				if(scrollTrac.el.hash === '#top'){parent.scrollTo(0, 0); return;}
				var gotoel = document.getElementsByName(scrollTrac.el.hash.substring(1))[0];
				parent.scrollTo(0, gotoel.offsetTop + window.innerHeight - gotoel.parentNode.offsetHeight);
			}, 300);
		}
	}, false);
}
</script>

**Nightwing308** · 05-05-2015, 11:49 PM

Okay, we have "partial success" now. The page will scroll when one of the letters is clicked, however, it will scroll all the way to the bottom regardless of which letter is clicked, and then get stuck down there (not scroll back up when I click the "Back To Top" link.

**jscheuer1** · 05-06-2015, 12:39 PM

OK, as I was testing this on the parent frame, I got one of the many references to window mixed up. I think this fixes that. I still have some question about how I arrive at the distance to scroll, but I will figure that out later. This version should at least be in the neighborhood:

Code:

<script type="text/javascript">
if(window.addEventListener && typeof window.scrollY === 'number'){
	var scrollTrac = {};
	document.addEventListener('mousedown', function(e){
		if(e.target.hash){
			scrollTrac.el = e.target;
			scrollTrac.Y = parent.scrollY;
		}
	}, false);
	document.addEventListener('click', function(e){
		if(e.target === scrollTrac.el){
			setTimeout(function(){
				if(scrollTrac.Y !== parent.scrollY){return;}
				if(scrollTrac.el.hash === '#top'){parent.scrollTo(0, 497); return;}
				var gotoel = document.getElementsByName(scrollTrac.el.hash.substring(1))[0];
				parent.scrollTo(0, gotoel.offsetTop + parent.innerHeight - gotoel.parentNode.offsetHeight);
			}, 300);
		}
	}, false);
}
</script>

If that works, even if it doesn't, try:

Code:

<script type="text/javascript">
if(window.addEventListener && typeof window.scrollY === 'number'){
	var scrollTrac = {};
	document.addEventListener('mousedown', function(e){
		if(e.target.hash){
			scrollTrac.el = e.target;
			scrollTrac.Y = parent.scrollY;
		}
	}, false);
	document.addEventListener('click', function(e){
		if(e.target === scrollTrac.el && scrollTrac.el.scrollIntoView){
			setTimeout(function(){
				if(scrollTrac.Y !== parent.scrollY){return;}
				document.getElementsByName(scrollTrac.el.hash.substring(1))[0].scrollIntoView();
			}, 300);
		}
	}, false);
}
</script>

This one is much better - if it works, if it doesn't, I see a way to tweak it.

**Nightwing308** · 05-06-2015, 02:32 PM

They both work, John, at least for scrolling down to the selected section (which is awesome and a major improvement already!) Funny thing is, the only "Back to Top" link that actually scrolls the page up again is the one at the very bottom on the page (below the 'Z'). Don't know if there's a "tweak" for that in the second code (which is the one I have on the page now), but if not then that's okay. The scrolling [I]down[I] was my major concern, and not scrolling up is only a minor inconvenience compared to before.