In this edition of Thingys & Doodads, we'll look at the extended entry thingy and detail a javascript doodad to improve the blog interface, making your site more reader friendly.
Let's discuss the extended entry thingy. Since this post will be fairly lengthy, we can use it for an example. I'll do the main discussion points in the # Entry Body and put the javascript and installation instructions in the # Extended Entry
First, from the Movable Type User Manual: ENTRIES
# Entry Body
# Extended Entry
Collectively these two fields make up the body of your entry. You can use the two fields however you like: you could split up your entry over the two fields, or you could completely ignore the Extended Entry text and enter only the Entry Body text. Movable Type allows you to split up your entry for more flexibility in the display of that entry; for example, if you write very long entries, you may not want your entire entry on your index pages. You can use the two fields to control what gets displayed, and where.
Note that when the text of your entry and extended entry fields are output into your public weblog, paragraphs--blocks of text separated by two line breaks--will be automatically converted using the Text Formatting option you have selected. The default formatting is to enclose paragraphs within <p> and </p>> tags, and to convert line breaks to <br /> tags. If you do not want this formatting to occur, you can select None for the text formatting.
Now you see the MT generated tag Continue reading "Thingys & Doodads - II" This is generated in the this code in the body section of the Main Index Template:
<MTEntryIfExtended>
<span class="extended"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></span>
</MTEntryIfExtended>
My personal preference is not to be redirected to another window (Individual Entry Archives) in order to read the entire post. Then, after you're finished and perhaps have made a comment, you have to click around to get back to the Main Page so you can read the rest of the material you came there to read in the first place.
I saw this thingy/doodad over at www.MargiLowry.com that made the extended entry "roll-down" into the post on that same page... "WOW... that's too cool... how do you do that?"" I asked. From the best of my recollection, Margi (Which way did she go?) e-mailed me back with a link to the code.
Now, for a little history on the origins and evolution of the code.
The original code for the show/hide script was written by Aarondot. He uses really wild variable names eg coconutsKillMorePeopleThanSharks and noMoreThankYou, which is fine for personal use... but if you are trying to dessimenate your code, it should really comply with more traditional coding practices.
Then, Jennifer the Scripty Goddess revised the variable names. and expanded the code to include a show/hide for comments.
I have tweaked the code with line breaks to see what it going on with the lables so it would be easier to edit with something witty and unique.
So here is the final iteration of the show/hide extended entry code.
Installation instructions:
Cut and paste the following code between the <head> tags in every page that you want to utilize the script:
<!-- Scripty Goddess Show/Hide Extended Entry -->
<script language="javascript">
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }} else { location.href = varB1;
return true; }
}
</script>
Next, in the <body> section of the Main Index Template, delete the default MT extended entry code, then cut and paste the following code in it's place:
<!-- Scripty Goddess Show/Hide Exntended Entry -->
<MTEntryIfExtended>
<span id="varP<$MTEntryID$>">
<a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">
Read More "<$MTEntryTitle$>" »
</a>
<br />
</span>
<div id="varXYZ<$MTEntryID$>" style="display: none">
<p><$MTEntryMore$></p>
<a href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return
true;">
<p>
« Hide "<$MTEntryTitle$>"
</p>
</a>
</div>
</MTEntryIfExtended>
[SAVE] and Rebuild indexes only, or whatever archives you decide to install the script in. I would recommend installing it in the all but the Individual Entry Archives.
You can modify the labels/text for the Show and Hide lines. As the code is written, it will display Read More concantated with the post title.
Easy as pie!
For the next edition of Thingys & Doodads, I'll present the Show/Hide Comment Script and Code that is used in Main Index Templates with the html file extension. (I think Pixy has a Show/Hide Script that he uses for Main Index Templates with php file exstensions, or did he modify this code to work in-line?)
The Scripty Goddess Show/Hide Comment thingy sometimes does a magic disappearing text thing and other weird stuff... I don't know why... but it only happens in some sites and not others. Weird, freaky stuff!!1!
UPDATE: The Scripty Goddess has modified this basic code to Show/Hide anything on your page. I may try it out as a sort of roll-down link list... that might be pretty cool!
Posted by Madfish Willie at April 17, 2004 07:17 AMMr Pixy: While I was poking around over at Scripty Goddess, I found a solution to my category posting or being hidden at Script snippet: Using php to selectively show or hide content based on MT category!
She has some really interesting stuff over there. And good resource for tinkering!
Posted by Madfish Willie at April 17, 2004 07:36 AMErk.
Yeah, that would work fine, but rebuild times would be horrendous.
Posted by Pixy Misa at April 17, 2004 10:30 AMworth mentioning that including content in your hidden extended entry will still contribute to your page load time. So if you're hiding a lot of content in there the browser will still have to download it.
Posted by Rob at April 17, 2004 01:23 PMTrue. The same applies to the view comments thingy. But you can have quite a bit of text in the page before it adds up to one medium-sized image.
Posted by Pixy Misa at April 17, 2004 01:44 PMI generally don't have but one or two long posts on my front page, and the extended entry content is text, not images, and they aren't Bill Whittle length posts, so wouldn't the load factor be minimal at worst?
Now, in the archives pages, where you have a boatload of posts loading, it would be a problem, but then it was a problem with the default templates because they loaded and displayed the extended entry text into the post. So the load times would be the same, but the show/hide thingy would make the page somewhat more managable.
Posted by Madfish Willie at April 17, 2004 01:49 PMThat's friggin' awesome. Thanks to all those involved.
Posted by Army NCO Guy at May 18, 2005 09:38 PM