Play a GreenSock script when loading another page

[Moo 2 Likes (Newbie)]

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!

[Jonathan 5,176 Likes (Superhero)]

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

[Moo 2 Likes (Newbie)]

Worked like a charm!

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!

[Jonathan 5,176 Likes (Superhero)]

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.

 

[Moo 2 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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

 

Happy Tweening!