« AT&T DSL Customer Service Adventure, Part Three | Main | AT&T DSL Customer Service Adventure, Part Four »

To celebrate my phallic spike in visitors, I've restored one of the functions of Ye Olde Bloge: The Expandotron! This was always a crowd favorite, and by crowd, I mean me.

To celebrate: instructions for building your own Expanotron on your own blog! Customize it and make it your own! Call it the Expand-o-tron to be different!

Here's the original documentation I wrote for the E-o-t, waaaaaay the fuck back in 2005. I am already irritated by my writing style of two years ago.

---

Good grief. Well that certainly was complicated. I wanted to add some expandy foolishness to the blog, as crowed about on LifeHacker and described here. But the only available instructions were barely instructions at all. So, if you'd like to know how to add fun little expandy bits to a website -- it's actually pretty easy, once you figure out how -- read on for my handsy, I mean handy, HOWTO.

Update: Oh damn. Never mind, it still needs a little tweaking; clicking one expandotron link causes all of the divs on the page to expand. Der. So, my technique doesn't exactly work. I'll keep at it.

Update update! Okay, I got it to work. I'm fairly shocked that I did, since my knowledge of CSS and JS are vastly insufficient for this sort of thing.

Shmupdate: Jamison pulled out some MT and JS help to make things run a bit smoother -- now you don't have to worry about entries with apostrophes and other JS-unfriendly characters in the title.

Flupdate: I've just figured out that because this uses trackback IDs to identify hidden divs, it won't work unless you have trackbacks enabled. So ... enable those trackbacks.

Step Arlington:
Put on some cozy pants. This won't work if your junk is all bunched up or you've got a wedgie. You'll just get uncomfortable and frustrated.

Step Berkeley:
If you have a stylesheet, put this in it:

div#expandotron
{
display: none;
margin: 0px 20px 0px 20px;

}

If you don't have a stylesheet, put this in the head of your HTML (or in the head of your template):

<style type="text/css">

div#expandotron
{
display: none;
margin: 0px 20px 0px 20px;

}

</style>

Step Clarendon:
Stick this into the head of your HTML (or your tempate):

<script type="text/javascript">
function toggleLayer(whichLayer)

{

if (document.getElementById)

{

// this is the way the standards work

var style2 = document.getElementById(whichLayer).style;

style2.display = style2.display? "":"none";

}

else if (document.all)

{

// this is the way old msie versions work

var style2 = document.all[whichLayer].style;

style2.display = style2.display? "":"none";

}

else if (document.layers)

{

// this is the way nn4 works

var style2 = document.layers[whichLayer].style;

style2.display = style2.display? "":"none";

}

}

</script>

(Note that the default display style has changed from "block" to "none." I have no idea why this is necessary, but it works, so let's go with it.)

Step Dartmouth:
This is the tricky part.
I'm going to make these instructions specific to Movable Type main-index templates, but it would be pretty easy for you to translate them to something else if you wanted to.
Find the spot in your MT main-index template where you want the "expand the extended entry" link to be. (It should probably be within the MTEntryIfExtended tags, so that the expandotron links only appear when they're needed, and don't appear when there's no Extended Entry.) Stick in this code:

<a href="javascript:toggleLayer('<$MTEntryTrackbackID$>');" onmouseover="window.status='expand <$MTEntryTitle encode=js="1"$>';return true">Engage the Expand-o-Tron to read more.</a>
<div id="<$MTEntryTrackbackID$>" style="display:none">
<$MTEntryMore$>

<a href="javascript:toggleLayer('<$MTEntryTrackbackID$>');" onmouseover="window.status='collapse <$MTEntryTitle encode=js="1"$>';return true">Unleash the Collapse-o-Tron!</a>

</div>

Step Exeter:
Okay, I lied, that wasn't so hard. I guess it just looks complicated.

Step Fairfield:
The onmouseover code that I used doesn't work on all browsers. In MSIE, it makes the status bar look pretty, but in Safari, it has no effect. I think Safari's view of things is more technically accurate, even though it's uglier. There's probably a better way to implement that sort of thing, but I don't know what it is. Maybe you do. If so, you win the partypants prize.

Step Gloucester:
You can add the following line to your RSS feeds if you like:

<MTEntryIfExtended><$MTEntryMore$></MTEntryIfExtended>

If you don't add that line, then RSS aggregators won't receive your extended entries. That means that if you have an extended entry, your RSS-reading readers won't know about it. I don't think there's a way to implement the expandotron via RSS, so you'll just have to broadcast your feeds with good old fashioned static text.

Also: it's pronounced Glawsstuh. Try to get it right.

Step Hereford:
Please let me know if you've given this stuff a go. I'd love to hear how it worked out, or failed to work out, or if you've got any questions, or what you think of my new haircut. Feedback = life.