Scriptaculous Effect.Appear w/ multiple divs

[bonerton]

Hello all,
I'm fairly new to javascript so bear with me. Here's my source:

http://webspace.ringling.edu/~doverton/test/

I've basically got absolutely positioned divs in two categories; on the left the "buttons" and on the right the "pictures." The buttons make use of the Draggable behaviour and the pictures make use of Effect.Appear. The buttons have an ondblclick event that toggles the Effect.Appear for the pictures to appear/disappear. My problem is that I would like to have it so that only one of the "picture" divs appears at a time while still making use of the Effect.Appear toggle. For instance, if pic2 is visible, I'd like to be able to double-click button3 to have pic2 fade out while pic3 fades in.
Some thoughts:
- Would rather toggle picture divs' display: block/none rather than visibilty.
- Does the z-index come into account?
This seems like it'd be easy enough, but i'm just not at that level yet. Thanks in advance, any feedback is greatly appreciated!

[ohgod]

mmmkay, how familiar are you with prototype? because that's what you're going to need here i think. let's start with what i think the logic would look like and go from there.


let's say the image that is currently up will have a z-index of 0
you make your double click, pass the incoming img id as an argument
z-index on your incoming img is set to 1, it fades in on top of the outgoing img
find all img elements that are visible and NOT the incoming img (so, the outgoing img)
iterate through the list of img's and fade them out from behind the other image
set the z-index of the incoming img to 0 (so that the next one can repeat the process)

so you already know how to use the effect toggle. what's left? setting z-index, using prototype to find all visible img elements, iterating through the array of visible img elements and telling your function what to do with them.

that should get you started or at the very least give you some ideas.

[bonerton]

i'm not very familiar with prototype besides knowing that scriptaculous is based on it/built with it (whatevs). i'm actually pretty new to even plain javascript; but i'm catching on as best as i can and loving it.
thanks for your reply! very thorough thought process without just slapping some code down for me to decipher; i appreciate that when trying to grasp something. this'll take me a while to figure out no doubt, so any other thoughts or opinions on the best way to go about this would be greatly appreciated while i try and get my hands dirty! i'll post when/if i'm able to find a solution.

p.s. - the test url i posted is just a simple example. in my real site, the divs being faded contain multiple img's and text among other things; the logic is still the same as replied, just applied to these container divs instead of specific imgs?

[rhinodog8]

use parallel effects from spcriptulous.

Click here for about.

new Effect.Parallel([
  Effect.toggle('pic2', 'appear'),
  Effect.toggle('pic1', 'appear')
])

I could be misunderstanding want you want though, could you explain it a little simpler?

[ohgod]

yeah, but to make it work for every pic it's going to have to be a lil more in depth. unless he wants to code a function for every possible scenario that is.


effect parallel will work, but only if you use some sort of identifier in the affected elements. the first approach just iterated through all the img tags on the page, but if you added a classname that the function should look for it would get you to the same end.

[bonerton]

awesome, thanks rhino, i wasn't aware of parallels. i'll give it a try as well and get back to you on it.

to reiterate, what i'm trying to do is be able to have multiple AP divs on a page (represented by the chair images), but only display one of those divs at a time so that no overlapping occurs.

so if, for example...
http://webspace.ringling.edu/~doverton/test/
...any combination of the chair images were being displayed, you could double click any one of the draggable buttons on the left and that would trigger a fade out of the current image(div) and a fade in of the corresponding button image(div), and only that image(div). Hope that clarifies further?

thanks again for your help, and happy thanksgiving!

[ohgod]

the trick is finding which img is visible to hide it. 2 things immediately come to mind. 1, scanning the page for all visible img tags like i said above, or 2, when you set it to visible add some other attribute that your function will look for.

hardcoding all these with img names is really not an answer here, you're going to need a function.