[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 911
  • Last Modified:

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
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 7
  • 6
1 Solution
 
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now