Solved

Anchor links in lightbox moving whole page

Posted on 2010-09-08
13
871 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

740 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