Help! My site no longer works

[heidiworm]

I created a web site for someone about a year ago that uses TweenLite js. I just got a call from the client saying the site is no longer working. I think it might be something that has changed in the js since I created the site (it links to the CDN). Is there a way to download older versions of the js files?

[jamiejefferson]

There is a complete history of the different versions of GSAP that have been hosted by cdnjs at http://cdnjs.com/libraries/gsap - I would not expect any of these older versions to ever be removed from the CDN.

 

I would recommend linking to a specific version (as updated as possible) that works with the site and not always linking to the latest branch, in case a compatibility issue crops up.

 

That said, it would be great to know more about the issue with the site other than 'no longer working', so we can identify if and where compatibility was lost.

[Jonathan]

Hello heidiworm, and welcome to the GreenSock Forum!

 

Was your GSAP CDN linking to latest of TweenLite instead of a specific version number?

 

If you go to cdnjs.com for GSAP, you can find older version via the CDN .. just use the dropdown to find the older version.

 

http://cdnjs.com/libraries/gsap

 

To download... Just pull up the URL in your broswer and then save the page.. you will get a prompt to save the js file.

 

Or you can just use the GSAP CDN link to the previous version of TweenLite.

 

I hope this helps!

 

Jamie beat me to it again

[heidiworm]

Sorry about that. I sort of panicked when things suddenly didn't work. Here are the details.

 

I'm using TweenMax and it seems to have gotten broken at version 1.13.0. When I go back to 1.12.1, everything works as it should. I think I've narrowed down the problem.

 

I have a series of buttons named "_1", "_2", "_3", etc. When each button is clicked, it opens a popup (using TweenMax) with the corresponding name ("popup_1", "popup_2", etc.). So when you click a button, the button name gets passed to the function, where it gets combined with the word "popup" to make a variable, which in turn gets is used as the object of the TweenMax call.

 

Here's the code on the button.

<div id="cartoons" style="position:absolute; top:188px; left:38px; width:195px; height:296px; z-index:40;">
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('_1','','images/cartoonswork_over.png',1)"><img src="images/cartoonswork.png" alt="cartoons work" name="_1" width="195" height="296" border="0" id="_1" onclick="popIn(this.id);"/></a></div>

Here is the function

function popIn(obj) {
	itemNum = "popup" + obj;
	TweenLite.fromTo(itemNum, .3, {scaleX:.5, scaleY:.5, top:615, autoAlpha:0}, {scaleX:1, scaleY:1, top:0, autoAlpha:1});
}

If I pass the actual name of the popup and change the function to say itemNum = obj, then my code works with the later versions of TweenMax. But, for whatever reason, version 1.13.0 and later doesn't like my method.

 

Here's a link to the complete site: http://otlcreativegroup.com/.

[GreenSock]

Short answer:

You're missing the "#" at the beginning of the selector text you're passing in, indicating that it's an ID. This is an industry-standard way of doing things. Add that and you'll be golden.

 

Explanation:

Before 1.13.0, the way GSAP chose the default selector engine was:

jQuery (or similar) > document.getElementById()

 

So if jQuery (or Zepto or whatever $ was defined as) wasn't loaded, it'd use document.getElementById(). That's perfect for your scenario because it resulted in document.getElementById("item_1"). 

 

However, in 1.13.0, we modernized things so that GSAP falls back to document.querySelectorAll() (and if that's not available, it'll still fall back to document.getElementById()). So now it goes:

jQuery (or similar) > document.querySelectorAll() > document.getElementById()

 

Why? Because querySelectorAll() is significantly more versatile - instead of being limited only to an ID, it can do IDs, classes, and all sorts of other things, very much like jQuery but without all the extra file weight. Trust me - this is a very good thing (although I can see why you'd be ticked that your code broke). We work VERY hard to maintain backwards compatibility, but since using querySelectorAll() has so many positives (it could allow people to drop 100k+ from their JS dependencies) and because virtually everyone was using the # prefix anyway, it seemed like the wisest course of action. I apologize for any hassles this caused you though. 

 

In all of our examples even in old versions, we showed using the "#" prefix, so "#item_1" instead of "item_1" because that not only works with jQuery, but pretty much every other selector engine on the planet. You happened to leave off that prefix which means it wouldn't work in any other engine except document.getElementById(). Since you must not be loading jQuery, it worked in your scenario but it was very fragile. Now that 1.13.0 uses querySelectorAll(), it exposed that weakness in the way you were defining your targets.

 

So again, to fix things all you need to do is follow the industry standard way of adding a "#" to the beginning of your IDs when you use selector text. 

 

Does that clear things up?

[heidiworm]

Thanks so much for your detailed explaination. I know just enough programming to get me in trouble (clearly!) so I appreciate the help.