picture home | pixelblog | qt_tools

omino code blog

We need code. Lots of code.
David Van Brink // Sun 2008.09.14 18:45 // {code scripting wordpress}

simple browser tricks

In a detour to a detour to some longer term goal, I needed to do some minimal HTML/JavaScript coding. The regularly scheduled hardware and WBL tinkering — including soldering, LEDs, and wireless sensors — will resume shortly.

Specifically, in WordPress, I wanted to hide <embed> tags behind a “click-to-show” link, to reduce browser-clobbering in some of my heavier posts.

It turns out that such manipulations are easy and fun!

getElementById & innerHTML

Modern HTML lets you add an onclick=”some JavaScript code to any element. That JavaScript code can then modify another element. Here’s a bit of HTML:

<span 
onclick='document.getElementById("sbt_target1").innerHTML="Ah, you clicked the Span.";'
style='cursor:pointer' >
   Click this Span
</span>

<a onclick='document.getElementById("sbt_target1").innerHTML="You clicked the Anchor!";'>
   Click this Anchor
</a>

<span id="sbt_target1">... this text will be changed ...</span>

And here’s the code, live. Try it out.


Click this Span


Click this Anchor

… this text will be changed …

A Self-Modifying Element

The next obvious silly trick is to have an element set its parent’s inner HTML, obliterating itself.

<span id="sbt_target2"><a onclick='document.getElementById("sbt_target2").innerHTML="Gone!";'>
  Click me and I'll disappear!
</a></span>

And… here it is, self-destroying code, live. Single-use only.

Click me and I’ll disappear!

WordPress Plugin

So, sure, I know there’s one or two of these floating around out there, but I’m addicted to rolling my own. A WordPress plugin has the opportunity to filter post’s contents. To put my QuickTime movies behind a “show-me click”, my plugin looks for <embed> elements and replaces them with a self-modifying span, like the second example above.

It uses a global variable to count invocations, to generate unique element ID’s in case there’s more than one embed. Here it is in action (with a spoiler from the next post, about wireless doohickies):

(I confess, I’m particularly proud of the tv-snow animated GIF, made in After Effects.)

Lastly, here’s the plugin code, for amusement purposes only.

oh, i dont know. what do you think?



(c) 2003-2011 omino.com / contact poly@omino.com