Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Moo

Play a GreenSock script when loading another page

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

Hello people!

I am struggling with this, what i want to do in my website is to click a link, take you to another page and also execute an animation. Basically im working a page with kind of tabs done with GreenSock, so for example, in my index i have two buttons to visit, Apple and Pear. If i click Pear, it will take me to a page that displays me Pear tab instead of Apple. That's it.

Forgive my english! Its not my native language. Anyways this is the website im working on http://gamacreativos.com/combarranquilla_wp/recreacion-y-deportes/ (spanish website) for example, i want to click in Hospedaje button, and then load the page in the Hospedaje tab instead of Unidades de Servicio

Thanks!

Share this post


Link to post
Share on other sites

Hello @Moo and welcome to the GreenSock Forum!

 

This looks more like a question on regular JS, instead of how to use the GSAP API. ;)

 

But you could get the hash in the browser url location bar. Store it as a variable and then trigger the click handler id name with that hash.

 

// cross browser event auto trigger click event
function triggerClick(el){
    if (document.createEvent) {
        var mEvt = document.createEvent('MouseEvents');
        mEvt.initEvent('click', true, false);
        el.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        el.fireEvent('onclick'); 
    } else if (typeof node.onclick == 'function') {
        el.onclick(); 
    }
}

//  auto click tab when hash is present in url browser bar
if(window.location.hash) {
	
  var hash = window.location.hash.substring(1), // puts hash in variable, and removes the # character
      tabTarget = document.getElementById(hash); // create id selector
  
  triggerClick(tabTarget); // auto click tab via vanilla JS

  // or if you use jQuery to auto click tab
  // jQuery("#"+tabTarget).trigger("click");
}

 

Resource:
window.location: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

jQuery trigger(): http://api.jquery.com/trigger/

 

Happy  Tweening :)

  • Like 5

Share this post


Link to post
Share on other sites

Worked like a charm! :D

Found out only using this as a <script> in the pages i need it will do the job!

jQuery(window.location.hash).trigger('click');

 

Thank you very much Jonathan!

  • Like 1

Share this post


Link to post
Share on other sites

Hello again @Moo

 

For full cross browser you should add the pound/hash symbol (#) inside the jQuery selector so the browser knows it explicitly is an ID. Passing just the hash forces the browser to look up to the window object to find the stored id parsed in the DOM. But some browsers might not like that since the id attribute shares the same namespace with the name attribute. Better not to trust that there is not another id or element with that same name. So it is better to do this with the hash symbol #, this way you know for sure the browser finds that specific unique id with your hash name.

 

jQuery("#"+window.location.hash).trigger('click');

 

UPDATE: ignore my last.. My bad.. i forgot that you are not parsing out the substring of the hash name without the hash.

 

:)

Share this post


Link to post
Share on other sites

Hey @Jonathan !

It always returns me a double hash ## before the id by doing that! Which browser would not work with the code without "#"?
Tested in Firefox and Chrome

  • Like 1

Share this post


Link to post
Share on other sites

My bad.. i forgot that you are not parsing out the substring of the hash name without the hash.

 

Happy Tweening!

  • Like 3

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×