I’ve been bumming over things lately, springing from Yahoo’s javascript library (with Jim’s help), Actionscript 3.0, and a few other technologies to diddle with effects that appear to make sense in my poem “What I Saw on my Homeward Way.”
Moreover, completing the poem has been difficult as the “effects” I’m after are conceptually integrated into the poem’s structural narrative, meaning that how the text behaves on screen is tied to potential meaning. Additionally, I’m curious about how linking methods change the way a poet makes images.
I need Actionscript as a means of creating hypermedia interface, but this doesn’t mean I can make Actionscript do “whatever” I want it to. AS3 will allow for event manipulation of links but not for what I want at the moment. I use Tinderbox as my primary writing tool and so the work that I expect to pump out of Tinderbox should be effectuated in that medium.
Luckily, this weekend, I began digging around with jQuery. And things suddenly made sense. I’ve wanted to write link tools directly into a Tinderbox note that would translate onto the web via Tinderbox HTML templates. It’s a simple business. Write a document in Tinderbox, flush it through an existing HTML template, taking whatever information I want to display on the web, and then publish it. Just like that.
I have lots of experience with stylesheets and their logic. Once mastered, they’re powerful for thinking about interactions and relationships. In Tinderbox, therefore, if I could add a selector from a stylesheet directly into a note, this is a good thing, especially if the writer knows what they want the code to do with the target object. But what to do with the selector once it’s out of Tinderbox and on the web? Well, that’s where scripts come into the picture–at least for me. For many, this will be nothing knew, but for me it provides new creative paths for using Tinderbox.
In a Tinderbox note called “Stone,” for instance, I could add a tag around the word “stone,” like this <st>stone</st>, the “stone” element acting as a listener. In addition we add div code plus a class to indicate which part of the text we want to manipulate.  This text could be a paragraph division, a middle stanza, or an ending paragraph:
<div class=”stretchTarget”>some text</div>
The node logic goes like this in the HTML template:
<div id=”text”>The <st>stone</st>listens. <div class=”stretchTarget”>hidden text</div></div>
jQuery provides ready methods for moving through DOM elements and Tinderbox templates will render the above tags in the resultant HTML page no matter the size of the document. What’s required next is to write those tags into the linked css page as selectors:
#text st {
some code
}
and
.stretchTarget {
some code
}
All we have to do now is write the appropriate javascript inside the head tag of the HTML template to adjust or manipulate content. After the page has been readied, jQuery attached, we write:
$(‘.stretchTarget’).hide();
the selector of the text we want to hide
$(‘#text st’).toggle();
the elements to read through to find the listener to which we can attach the target
Then we add two jQuery functions (they can be anon or named) inside toggle()
function() {
$(‘.stretchTarget’).fadeIn(); //or whatever other method is required, including animate() or show(), although next() would be inappropriate
and
$(‘.stretchTarget’).fadeOut();
And that’s basically it, thanks to the ready-baked jQuery methods. With jQuery and the css page attached, we can now easily blend stretch text functionality into Tinderbox directly by simply wrapping a listener with <st> and then wrapping target text inside a div and labeled appropriately with class=”stretchTarget”.
Thanks to Mark Bernstein for starter code and to James R for help with YUI.
Here’s a link to what the basic functionality looks like on a separate page: sonnet stretch.
The next quest will be to put together some methods for directly manipulating <a> items.
