Wrapping all text in a custom div

Claretta

I'm using Greensock animation to apply some extra text effects. But to do this, Greensock needs a <div> element to refer to.

Is there any easier way than simply wrapping the top and bottom of each passage in:

<div id="myelement" class="myelement">
All passage text goes here.
</div>

This works, but it needs to be done for every single passage.

EDIT: BTW, because I am using 1.4.2, I can edit the Header directly if that's an option over using JavaScript to mess with divs. I already have several custom divs inserted into the header.

TheMadExile

I assume you mean that it needs an element. I'm skeptical that it, specifically, needs a <div>.

Have you tried simply using the existing content wrapper element? You can add an ID and classes to it without incident. It could be that you cannot use it due to styling issues, however, my suggestion would be to try that first. For example:

prerender["patchContentWrapper"] = function (content) {
	$(content).attr("id", "gsap-id").addClass("gsap-class");
};

If that proves unusable, then you can wrap the contents of the content wrapper element thus:

postrender["addContentWrapper"] = function (content) {
	$(content).wrapInner('<div id="gsap-id" class="gsap-class"></div>');
};

Claretta

I said div because when I went with "passages" it just made all the text disappear, and doing something like passage, referring to my .passage css, had no effect at all. Maybe I have it set up wrong.

Regardless I'll try your suggestion. Adding a class to the existing element seems a good idea.

Claretta

Thanks, it works well.

I could have done this with css animation, but that would involve adding animation rules to each and every type of passage tag I have, bleh.

TheMadExile

Claretta wrote: »

I said div because when I went with "passages" it just made all the text disappear, and doing something like passage, referring to my .passage css, had no effect at all. Maybe I have it set up wrong.

Neither #passages nor .passage are the content wrapper element, which is .body.content (see: SugarCube 1.x HTML). They're both ancestors (hierarchy: #passages>.passage>.body.content).