Jump to content
Search Community

ScrollTo Plugin Error

fmir86 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys, thanks in advance for the support.

 

Recently I choose GSAP ScrollTo Plugin to solve a situation on my site.

 

 

Basically I coded a window.onload function, that evaluates the url hashtag. The format of the hashtag is "#whatever_Details".

So, I take this hashtag and using the substr() method I isolate the part of the hashtag containing the name of the section ("whatever")

and concatenating "_article". The real id of the elements to target is this, they end with "_article".

 

I pass the "whatever_article" to the ScrollTo plugin 

 

This is the current script:

		<script>
			document.body.className = "stop-scrolling";
			window.onload = function(){
				document.body.className = "";
				var hashText, verticalOffset = 70;
				if(location.hash != ""){
					hashText = location.hash.substr(1, (location.hash.length - 9));
					TweenMax.to(window, 0, {scrollTo:document.getElementById(hashText + "_article").offsetTop - verticalOffset});
				}
			}
		</script>

However, It doesn't work. And in Chrome I get a weird error:

 

TweenMax.min.js:17 Uncaught SecurityError: Blocked a frame with origin ""https://www.google.com".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

 

This error is fired infinitely.

 

On Firefox I get a recurrent error, but with a different description:

 

Error: Permission denied to access property "_gsTweenID"

 

This is the webpage with the problem:
http://fabianmiranda.com/beta/about.shtml

 

You can put "#experience_Details" at the end of the url, to test what i am describing.

 

The weird thing is that this code was actually working already on another section:
http://fabianmiranda.com/beta/portfolio.shtml#shirleygatgens_Details

http://fabianmiranda.com/beta/portfolio.shtml#zambuni_Details

 

Do you guys have any idea of what could be causing this problem?

 

Thanks!

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forum!

 

Can you try and create a codepen demo so we can see if this can replicated outside of your website. Just so we can narrow down what is happening. Here is video tut on how to create a codepen demo example so we can better help you!

 

 

 

But please standby while we look into this :)

 

Thanks!

  • Like 1
Link to comment
Share on other sites

It's either Google Maps or your server SSI.

 

This works....

http://run.plnkr.co/5ek8tRkctPcgM26O/#section3

 

Here's the code.

http://plnkr.co/edit/EjMIU7X3jnIz7DZNpd8A?p=preview

 

EDIT: It looks like the URL for the preview always changes, so follow these steps.

  • Click the tiny blue box in the upper-right corner. The tooltip will show "Launch the preview in a separate window".
  • When the window opens up, copy the URL, but don't close the window as this will end the preview session.
  • Open up a new tab and paste the URL and add "#section3" to the end.
  • Press enter, and the page should load and scroll down to section 3.
  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...