Anchor links in lightbox moving whole page

Hello,

We are using a lightbox to display some pages on http://www.pingpayday.com. If you click one of the frequently asked questions on the right hand side you will see what I mean.

The issue arises when the user is not scrolled all the way to the bottom of the page when they click one of those FAQ. The whole page then jumps and in IE leaves a trail. Does anyone know of anyway to make it so the whole page doesn't jump?

Thanks
Ryan
LVL 1
catonthecouchproductionsAsked:
Who is Participating?
 
StealthyDevCommented:
Oh, I see...

I can suggest you a scroll plug-in using jQuery.

All you need to do is this:
Instead of:
     <a class="pop faq-nav-link" href="questions.html#3">some content</a>
Use this:
     <a class="pop faq-nav-link" href="questions.html" onclick="scrollLinkLoc='1';">some content</a>

Now, in your fancybox initialization, add this:
'onComplete' : delayedScroll

Then, add the code to your page attached.

Regards.
function delayedScroll(){
			setTimeout(function() {
				//var targetEle = $(document.getElementById("fancybox-frame").contentWindow.document).find("#" + scrollLinkLoc);
				var targetEle = document.getElementById("fancybox-frame").contentWindow.document.getElementById(scrollLinkLoc);
				$(document.getElementById("fancybox-frame").contentWindow.document).scrollTo(targetEle, {duration:500});
				$(document.getElementById("fancybox-frame").contentWindow.document).find("#" + scrollLinkLoc).css("color", "red");
			}, 500); 
		}

Open in new window

0
 
StealthyDevCommented:
Hi author, good day wishes to you!

It is because of #1 or #2 in the end of the link:

http://www.pingpayday.com/popup/questions.html#1

use
http://www.pingpayday.com/popup/questions.html

All the best!

Regards.
0
 
catonthecouchproductionsAuthor Commented:
I agree that would work but then we would lose the anchor link which is what we need, right? They like how it jumps to the specific question but they do not like how the box makes the page autoscroll back to top. Make sense?
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
StealthyDevCommented:
ScrollTo plug-in is available in the below location:

http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.zip

Regards.
0
 
catonthecouchproductionsAuthor Commented:
Awesome, thank you for this. I know have the following HTML below in the box.

I have your JS at the top of my page. The code has also been uploaded here: https://www.pingpayday.com/ - if you need to view source.

I dont think that it is doing the right behavior.

Ryan
<li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='1';" class="pop faq-nav-link">What is a payday loan and how does it work?</a></li>
						<li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='2';"class="pop faq-nav-link">What do I need to qualify for a payday loan?</a></li>
						<li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='3';" class="pop faq-nav-link">Does it matter if I have bad credit or no credit?</a></li>
	                    <li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='8';" class="pop faq-nav-link">What if I don't get approved by lender?</a></li>
						<li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='5';" class="pop faq-nav-link">If approved how quickly can I receive my Payday loan?</a></li>
						<li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='4';" class="pop faq-nav-link">How much money can I qualify for?</a></li>
						<li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='6';" class="pop faq-nav-link">When will I have to repay my loan?</a></li>
	                    	<li><a href="http://www.pingpayday.com/popup/questions.html" onclick="scrollLinkLoc='9';" class="pop faq-nav-link">When I pay off a loan, how soon can I receive another loan?</a></li>

Open in new window

0
 
StealthyDevCommented:
I think you have not hosted the below file properly:
/js/jquery.scrollTo.min.js

Page Not Found - godaddy

Regards
0
 
catonthecouchproductionsAuthor Commented:
Ah ha, thanks! It is scrolling now, but seems to be going to the wrong ID. I have checked the ID's of the link and made sure they match up and they're right. But if you click one of the top ones on the FAQ box to the right, it scrolls you down to the bottom of the list.

Any ideas?

Thanks,

Ryan
0
 
StealthyDevCommented:
Oh, alright.. The code is not updated by the author in that link.. Use the below JS file:

http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.zip

Learn more: http://flesler.blogspot.com/2008/09/jqueryscrollto-14-released.html

Regards.
P.S.: Please try using the same socket for all transfers.. You are using HTTPs for the main page and in the links you are using HTTP.
0
 
catonthecouchproductionsAuthor Commented:
Even with that updated it still doesnt scroll to the correct anchor, it sometimes scrolls in the middle of the copy.

Thoughts?

Ryan
0
 
StealthyDevCommented:
Oh, okay.. I got it.. Its working for me in InternetExplorer but not in Firefox....
Sorry buddy, I will look for an alternative and let you know...

Regards.
0
 
catonthecouchproductionsAuthor Commented:
Thank you. I appreciate the help.

Thats weird why it would work differently. Arent you just grabbing the ID and scrolling to that one tag? I can take a look back at the code.

Ryan
0
 
catonthecouchproductionsAuthor Commented:
Hey,

I just noticed this, if you click here https://www.pingpayday.com/ - click the bottom faq link on the right box, the bottom title shows red, which is what you have in place to see if it is scrolling to the right anchor correct?

I wonder why the others arent..maybe the pattern is off?
0
 
catonthecouchproductionsAuthor Commented:
I am trying to find some way to tell it to use a specific frame/window and not the whole parent window of the browser.

Any ideas?

Thanks,

Ryan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.