Solved

Anchor links in lightbox moving whole page

Posted on 2010-09-08
13
866 Views
Last Modified: 2012-05-10
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
Comment
  • 7
  • 6
13 Comments
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33633754
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33636234
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
 
LVL 15

Accepted Solution

by:
StealthyDev earned 500 total points
ID: 33660000
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 15

Expert Comment

by:StealthyDev
ID: 33660009
ScrollTo plug-in is available in the below location:

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

Regards.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33665771
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
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33668849
I think you have not hosted the below file properly:
/js/jquery.scrollTo.min.js

Page Not Found - godaddy

Regards
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33674534
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
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33679253
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33685042
Even with that updated it still doesnt scroll to the correct anchor, it sometimes scrolls in the middle of the copy.

Thoughts?

Ryan
0
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33688643
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33691739
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33704843
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33719811
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now