TeenagePoetry

<<include "LinkButtonInclude">>\n<<include "StyleInclude">>\n<style>\n#mycontainer1 {\n width: 600px;\n height: 50px;\n position: relative;\n left: 250px\n top: 0px;\n}\n#mycontainer2 {\n width: 600px;\n height: 50px;\n position: relative;\n left: 700px;\n top: -50px;\n}\n#mycontainer3 {\n width: 200px;\n height: 50px;\n position: absolute;\n top: 25px;\n}\n#mytext1 {\n width: 420px;\n height: 50px;\n text-align: right;\n position: absolute;\n left: 250px;\n} \n#mytext2 {\n width: 450px;\n height: 50px;\n text-align: left;\n position: absolute;\n left: 350px;\n} \n</style>\n<script>\nvar finaltext="<br/>We'll deckle the edges of all of the words<br/>and paint each other’s invisible tears.<br/><br/>We’ll order an emergency skull repair kit<br/>and watch the bubbles burst together.<br/><br/>We can walk side by side between bronzed hedgerows<br/>and repair ruts and potholes as we go.<br/><br/>Talking at each other won't break down walls<br/>or help us soothe each others' shame.<br/><br/>Let’s clear out the bottles from under the bed.<br/>and place them gently in the bin.";\nvar elem1;\nvar elem2;\nvar pos1=250;\nvar pos2=350;\nvar id;\nvar startpos1;\nvar endpos1;\nvar keeptalk = 0;\nvar moveStep = 2;\nvar direction; /* 0 = moving towards centre, 1 = moving away from centre */\nfunction talkframe() {\n if( pos1 < startpos1 ) { /* got back to start, stop moving */\n clearInterval(id);\n }\n else {\n if( direction != 1 ) { /* moving towards centre */\n pos1+=moveStep;\n pos2-=moveStep;\n if( pos1 > endpos1 ) { /* got to centre, change direction */\n direction = 1;\n }\n }\n else { /* moving away from centre */\n pos1-=moveStep;\n pos2+=moveStep;\n }\n elem1.style.left = pos1 + 'px';\n elem2.style.left = pos2 + 'px';\n }\n}\nfunction commframe1() {\n if( pos1 > endpos1 ) { /* overlapping now, stop moving */\n clearInterval(id);\n }\n else { /* move towards centre */\n pos1+=moveStep;\n pos2-=moveStep;\n elem1.style.left = pos1 + 'px';\n elem2.style.left = pos2 + 'px';\n }\n}\nfunction commframe2() { /* elem2 is at centre, move it to LHS */\n if( pos2 < endpos2 ) { /* at LHS, stop moving */\n clearInterval(id);\n }\n else { /* move left */\n pos2-=moveStep;\n elem2.style.left = pos2 + 'px';\n }\n}\nfunction talk() {\n direction = 0;\n elem1 = document.getElementById("mytext1");\n elem2 = document.getElementById("mytext2");\n pos1 = 250;\n pos2 = 350;\n startpos1 = pos1;\n endpos1 = pos2+(pos1/3);\n id = setInterval(talkframe, 1);\n keeptalk++;\n switch(keeptalk) {\n case 1:\n document.getElementById("keeptalking").innerHTML = "Keep talking.";\n break;\n case 2:\n document.getElementById("keeptalking").innerHTML = "Talk some more.";\n break;\n case 3:\n document.getElementById("keeptalking").innerHTML = "Don't give up.";\n break;\n case 4:\n document.getElementById("keeptalking").innerHTML = "You're not listening!";\n break;\n default:\n document.getElementById("combutton").style.visibility = "visible";\n document.getElementById("keeptalking").innerHTML = "Try communicating?";\n }\n}\nfunction showFinalText(el1,el2) {\n el1.style.visibility = "hidden";\n el2.innerHTML = finaltext;\n endpos2 = -400;\n id = setInterval(commframe2, 1);\n}\nfunction showResetButton() {\n document.getElementById("resetbutton").style.visibility = "visible";\n}\nfunction communicate() {\n document.getElementById("keeptalking").style.visibility = "hidden";\n document.getElementById("talkbutton").style.visibility = "hidden";\n document.getElementById("combutton").style.visibility = "hidden";\n direction = 0;\n elem1 = document.getElementById("mytext1");\n elem2 = document.getElementById("mytext2");\n pos1 = 250;\n pos2 = 350;\n endpos1 = 2*pos2; /* want them to overlap here so double it */\n id = setInterval(commframe1, 1);\n setTimeout(showFinalText,1000,elem1,elem2);\n setTimeout(showResetButton,2000);\n}\n</script>\n<span style="position:absolute; top:0px; left:100px; right:0px">\n!Teenage Poetry\n</span>\n<span style="position:absolute; top:500px; left:100px; right:0px">\n<strong>from<br/>“<<include "StoryTitle">>”<br/>by <<include "StoryAuthor">></strong>\n</span>\n<div style="position:absolute; top:125px; left:100px; right:100px">\n\n<div id="mycontainer3" class="navMenu">\n<span id="keeptalking" style="font-weight:bold;">Talk to each other.</span>\n\n\n<span class="mylinkbutton" id="talkbutton"><<link "Talk">><<script>>talk();<</script>><</link>></span>\n\n<span class="mylinkbutton" id="combutton" style="visibility:hidden;"><<link "Communicate">><<script>>communicate();<</script>><</link>></span>\n\n<span class="mylinkbutton" id="resetbutton" style="visibility:hidden;"> <<button [[Reset|Start]]>><</button>></span>\n\n\n<span class="mylinkbutton" id="aboutbutton"><<button [[About Teenage Poetry|AboutTeenagePoetry]]>><</button>></span>\n</div>\n<div id="mycontainer1"><div id="mytext1">\nYes, I’d love to read your poems.\nI never wanted you to be a scientist.\n\nAll I want is for you to be happy.\nBy the way, where’s my cooking brandy gone?\n\nYou won’t be able to sunbathe when you’re older.\nYour skin was so smooth on the day you were born.\n\n<span style="font-variant:small-caps">Why do you do it?</span>\nTell me—just tell me—why do you do it?\n\nIt's time I went to work, we can talk later.\nI can’t stand to see your bloody arms.</div></div><div id="mycontainer2"><div id="mytext2">\nI want to walk the boundary with you.\nTell me how to distill invisible tears.\n\nHappiness is liquid and my skull has leaks.\nI'm a fifteen-year-old drunk just seeking attention.\n\nI’m old and rutted like the lanes we once walked.\nI’ve foot-slogged down them far too long now.\n\n<span style="font-variant:small-caps">The first time you shout at me is about <em>this</em>?</span>\nShame hacks its way through my false skin.\n\nWhat should I do till the off-licence opens?\nYou should know how to keep me from harm.\n</div></div>\n</div>

// disable the debug view\n(function () {\n\tSetting.addHeader("Debug Settings");\n\n\tfunction initSettingDebug() {\n\t\tConfig.debug = settings.debug;\n\t}\n\tSetting.addToggle("debug", {\n\t\tlabel : "Enable test/debug mode?",\n\t\tdefault : false,\n\t\tonInit : initSettingDebug,\n\t\tonChange : function () {\n\t\t\tinitSettingDebug();\n\t\t\twindow.location.reload();\n\t\t}\n\t});\n})();\n\n// get rid of the UI bar on the LHS\nUIBar.destroy();\n

.mybutton {\n background-color: #3355AA;\n color: white;\n padding: 6px 6px;\n text-align: center;\n text-decoration: none;\n font-weight: normal;\n display: inline-block;\n font-size: 16px;\n margin: 2px 0px;\n border: none;\n}\n.mybutton:hover {\n background-color: #2C488E;\n text-decoration: none;\n color: white;\n}

<<include "LinkButtonInclude">>\n<<include "StyleInclude">>\n<span style="position:absolute; top:0px; left:100px; right:0px">\n!About<br/>“Teenage<br/>Poetry”\n</span>\n<span style="position:absolute; top:500px; left:100px; right:0px">\n<strong>from<br/>“<<include "StoryTitle">>”<br/>by <<include "StoryAuthor">></strong>\n</span>\n<div style="display:flex; position:absolute; top:50px; left:100px; right:0px">\n <div style="flex:20%;" class="navMenu">\n\n\n\n\n\n\n\n\n\n\n\n<span class="mylinkbutton"><<button [[Return to poem|Start]]>><</button>></span>\n </div>\n <div style="flex:40%;">\n\nThis poem was originally called “Awful Teenage Poetry”, but my mentor said that wasn't a good title… I'm not sure why, but then I always have problems with titles.\n\nIt's about a time when I was fifteen or so, and I showed my [awful] poetry to my mum to try and get her to understand me. She read it, then said, “I don't want you to be a scientist.”\n\nI said, “What do you want me to be then?” and she replied, “I just want you to be happy.”\n\nI snapped back, “Why should I be happy?”\n\nMum laughs when she tells the story now, but at the time it brought home to both of us just how little we were able to communicate with each other.\n\nAs far as the digital elements of the poem go, this was the first I wrote that used movement of the text on the screen. It's a bit crude in terms of both implementation and poetic merit, but I enjoyed making it, and I think Mum likes it, so it's done its job.\n </div>\n <div style="flex:40%;">\n </div>\n</div>

.flex-container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-content: space-between;\n}

#passages {\n\tmargin: 100px;\n max-width: 1500px;\n}

everything is pieces of itself

Pippa Hennessy