Grabbing a chunk from a passage and throwing it into another panel?

LeonDaydreamer

Hi, I was hoping someone out there with a little more programming expertise might have some ideas about how to take some information from a passage, say it were certain options or inventory related info and throwing it into a separate <div> that sits apart from the passage.

Trying to MacGyver this together, I wound up with creating a <span> for the chunk I want to display elsewhere, and then using .appendChild to drop it into the <div>.

$("panel").children[0].appendChild($("mySpan"));

This may by far not be the best way to do this (and if you have a better idea, please let me know!), but so far there are a few problems with this:

1) If I try to then 'remove()' the <span> from the main passage, I can only reference it by its ID, and it winds up removing both instances, though I'm sure I can figure out a way to dig through the <div>s and find the right one eventually.
2) If I try to grab the <span> inside the passage, it may not work right away as the <span> is still being generated (I guess).
3) What might be the best way to refresh checking if there is a new span to grab and then grabbing it?

Hope someone can help.

Claretta

Wouldn't it be better to create the add-on as its own separate passage and then just use a print passage function to display it where you want it?

LeonDaydreamer

Hi Claretta,

I'm not sure... I'd have to try it out.
Do you mean if I had a passage 'Panel' with all the appropriate contents inside, wrapped in a <span> and CSS-formatted to behave properly, and then I would use <display 'Panel'> on every other passage? That MIGHT work, depending on whether it preserves the <span>'s formatting. I'll try it when I get home.

Right now, though my <div> panel that I want to print to is not part of the passages, it sits on top of them, since I don't really want it affected by the passage transitions.

LeonDaydreamer

Hi Claretta, so I've been implementing it the way you suggested and it's been working out quite well.
The only thing is for it to work properly I had to kill all the transitions, since it's really distracting having the panel fade in and out along with the text. Much as I'll miss them, I think I'll go with it for the time being.

Thanks a lot!    I was really over-complicating this for myself.

Claretta

It should be possible to disable passage transitions just for that specific element. Example is in SugarCube you could tag the "panel" passage with the "panel" tag and in your css put this:


.passage.panel
{
transition: none;
}

LeonDaydreamer

That doesn't seem to work, because the panel's content is still nested in the parent passage.
I'll have to look further into how to add transitions to certain elements, haven't had too much success with them so far.

Claretta

Ok, I can see that.

Have you tried to simply write the panel passage as its own independent passage?

I.e. Rather than pulling it from anywhere, you simply make it a passage with a lot of <<if>> conditional logic so that it displays things based on where you are in the story.

This is how this example on SugarCube's website works: http://www.motoslave.net/sugarcube/download.php/examples/example-rhs-box.zip

LeonDaydreamer

This is beautiful! Thanks so much Claretta!
It works really nicely and allows me to throw in alternate transition effects for the panel.