Jump to content
Search Community

Play a GreenSock script when loading another page

Moo 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

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!

Link to comment
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
Link to comment
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
Link to comment
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.

 

:)

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...