Solved

Anchor links in lightbox moving whole page

Posted on 2010-09-08
13
863 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 15

Expert Comment

by:StealthyDev
Comment Utility
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
Comment Utility
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
Comment Utility
I think you have not hosted the below file properly:
/js/jquery.scrollTo.min.js

Page Not Found - godaddy

Regards
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

744 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

16 Experts available now in Live!

Get 1:1 Help Now