PDA

View Full Version : 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 (http://www.dynamicdrive.com/forums/showthread.php?9139-Iframe-SSI-script-II-with-Opera/page3)

@ 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:


<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):


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


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


<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.

jscheuer1
05-06-2015, 03:01 PM
When testing the first code I noticed an anomaly with it just like that for the scroll to top. My best guess is that there's something different with the other Back to Top links. I will have a look and see if I can figure it out.

jscheuer1
05-06-2015, 03:35 PM
NOTE: Try out the code at the end of this post before making any changes to the markup. But also consider changing the markup later as a best practices kind of thing.

Those other top links don't work because they look like so:


<a href="#top"><font size="3">Back to Top</font></a>

You really shouldn't be using font tags at all, they are deprecated.

But, if you have to, you can change them to (which might not look right though):


<font size="3"><a href="#top">Back to Top</a></font>

Still it would be better to give all of the Back to Top links a class and then style them from a stylesheet.

But, since it's also possible that at some point you will have a nested image (img) tag for one or more of these links and because that cannot be worked around so easily, You can try out this code which attempts to find the parent tag that has the hash link (replaces the script you are currently using):


<script type="text/javascript">
if(window.addEventListener && typeof window.scrollY === 'number'){
function returnhashlink(el){
if(el.hash){return el.hash;}
while((el = el.parentNode)){
if(el.hash){return el.hash;}
}
return null;
}
var scrollTrac = {};
document.addEventListener('mousedown', function(e){
if(returnhashlink(e.target)){
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(returnhashlink(scrollTrac.el).substring(1))[0].scrollIntoView();
}, 300);
}
}, false);
}
</script>

Nightwing308
05-06-2015, 05:17 PM
OMG, the font tags were indeed a problem! I styled them as you suggested, and it works flawlessly now. You've once again "saved the day" for me, John! :)
Thanks sooooo much!

jscheuer1
05-06-2015, 05:24 PM
Good, but you cannot use id="top" for those because in at least some of the browsers, that's the same as name="top" so they will scroll to the next link. you can use class="top" and in the stylesheet use:

.top

instead of:

#top

Technically speaking anyways, there should never be more than one element on a page with a given id. But sometimes it's unimportant, in this case it matters.

Nightwing308
05-06-2015, 06:53 PM
Oh, wow! This puts a whole new meaning to the saying "The devil is in the details". BIG thanks for the tip, and I've changed it to "class" instead of "id" (will keep that in mind for future references too).