Jump to content


Onclick event to swap text boxes: best method?

Go to solution Solved by OSUblake,

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

I'm converting another Flash movie. This one has 16 buttons, each targeting a unique text box. When the user clicks on a button, it changes the text that appears in an adjacent area. In the Flash version, this was done with layers and moving around on the Timeline.


No problem figuring out the onclick actions. But how to handle the "stack" of text boxes?


1.) When the page opens, the default text box is in place. When the user clicks a button, it's easy to change the zIndex, or the opacity, or even the show/hide properties. But, when the click occurs, this is what has to happen:


1.) The selected layer is "activated," either by changing its opacity to 1, or bringing it to the top of the "stack" with zIndex. The text box appears. BUT, simultaneously, the text box that was at the top of the stack must be "deactivated."


2.) The box at the "top of the stack" at any time could be any one of those 16 different boxes. Obviously, it must now "go away," by hiding it, or changing its opacity to 0, or sending it to the bottom of the "stack" with a lower zIndex number.


Easy to "activate" a box, but not so easy to send away the one that's currently visible when the click occurs. Since it will always be a different box, I can't see a way to target it. I would think that when the selected text box loads, it has to somehow automatically become a variable that could be addressed later. But this is above my jQuery knowledge level... can someone point me in the right direction?  TIA!

Link to comment
Share on other sites



Not so sure we are going to have much time to dig into this for you. 99% of this seems to be related to general project architecture, application logic and DOM manipulation (mostly through jQuery). We have to stay really focused on the GSAP API (questions related to animation) right now. Its likely someone around here may have an example quite similar to this, but its really beyond the scope of what we handle.

Link to comment
Share on other sites

Thanks, OSUblake. That's what I needed.


The problem is how to target all of my buttons in order to hide them all before showing the one I want. 


My text boxes all have the ID's specified like this:






So, it's then just a question of a little jQuery selector stuff:


var hideall = sym$("[id*=Box]");

TweenMax.to (hideall, .25, {opacity:0, ease: Linear.easeNone});


And then the line to show the individual box that I want, etc.


Just had to look up the jQuery selector syntax, which I couldn't quite recall.

Link to comment
Share on other sites

If you want to target them all, you could just give them all the same class or target the element type.  You don't even have to use jQuery to do that with the latest version of GSAP.

// By element
TweenMax.to("button", .25, {opacity:0, ease: Linear.easeNone});

// By class
TweenMax.to(".my-class", .25, {opacity:0, ease: Linear.easeNone});
Link to comment
Share on other sites

Yup. I have been working with GSAP inside of Adobe Edge, as the interface is very simple to use to pre-test the animation.


The only real issue I have come across is that of targeting specific elements. So, while


var hideall = sym$("[id*=Box]");

TweenMax.to (hideall, .25, {opacity:0, ease: Linear.easeNone});


works, if I try to target an individual element with the same syntax, i.e.


var.showbox = sym.$("[id=Text_Box3]");

TweenMax.to (showbox, .25, {opacity:1, ease: Linear.easeNone});


It does not work. But this does, oddly enough:


var.showbox = sym.$("[id*=Text_Box3]");

TweenMax.to (showbox, .25, {opacity:1, ease: Linear.easeNone});


I checked the selector, and it's correct: Text_Box3


No big deal, as it works fine using the wildcard. Just wondering why the selector doesn't work as expected.

Link to comment
Share on other sites

That looks so cryptic!


Is hard to use GSAP with Edge? I saw a video on it, and it looked the guy would create the animation then rip all the Adobe code out.

Link to comment
Share on other sites

Yes, it sure does, I guess. Works fine, though, and only 2 lines of code per button.


Well, the Edge interface looks a lot like the Flash interface. I don't know much about the Edge code itself, because it isn't very well documented, and seems very clunky to use. I had avoided using it at all until they "fixed" the way Edge uses external JS files (such as GSAP) - now, all you have to do is click to add the JS files, without having to manually paste them into the HTML file, as had been the previous method. I'm using strictly GSAP code for the different Edge events: mouseover, mouseout, onclick, etc. - it's so easy to write, and all I need to do is to have the GSAP Easing demo up on another screen to figure out which effect I need.


I think of Edge as working pretty much like Flash works - the real functionality is in the ability to use scripting, not in the built-in stuff: using GSAP is like using Actionscript - just code. Much more intuitive, given the fact that Adobe's Edge interface is IMHO, completely non-intuitive and needlessly complex. The only thing I like about Edge is that the Timeline is just as easy to use as it was in Flash, especially if you're trying to do something where a visual depiction of the Timeline is helpful.

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.