Improved Extended Entry Script and Template Code for MT

| 20 Comments | 28 TrackBacks

ScriptyGoddess has had (for quite a while) a script and template code that allow inline expansion and collapse of extended entry text. To generally make it easier to read and understand as well as fix some problems in it, I made a number of changes to it. Here is my modification of the javascript code, which goes between the <head> and </head> tags in your template:

<script type="text/javascript">
  function showMore(entryID, entryLink, htmlObj) {
    extTextDivID = ('extText' + (entryID));
    extLinkDivID = ('extLink' + (entryID));
    if( document.getElementById ) {
      if( document.getElementById(extTextDivID).style.display ) {
        if( entryLink != 0 ) {
          document.getElementById(extTextDivID).style.display = "block";
          document.getElementById(extLinkDivID).style.display = "none";
          htmlObj.blur();
        } else { 
          document.getElementById(extTextDivID).style.display = "none";
          document.getElementById(extLinkDivID).style.display = "block";
        }
      } else {
        location.href = entryLink;
        return true;
      }
    } else {
      location.href = entryLink;
      return true;
    }
  }
</script>

And here's my modification of the template code to display the extended entry text:

<MTEntryIfExtended>
  <div id="extLink<$MTEntryID$>">
    <a href="<$MTEntryPermalink$>" name="ext<$MTEntryID pad="1"$>" 
onclick="showMore(<$MTEntryID$>,'<$MTEntryPermalink$>', this);return false;">
Continue reading "<$MTEntryTitle$>"... &raquo;</a>
  </div>
  <div id="extText<$MTEntryID$>" style="display: none">
    <$MTEntryMore$>
    <a href="#ext<$MTEntryID pad="1"$>" 
onclick="showMore(<$MTEntryID$>,0, this);return true;">&laquo; All done!</a>
  </div>
  <br />
</MTEntryIfExtended>

What changes I made and why:

In MT's Support Forum, I have seen numerous mentions of a script that allows inline expansion and collapse of extended entry text. I looked at the script a long time ago, but couldn't see exactly how it all was supposed to work so I did not install it. I studied the script in detail last night, and while the core logic behind the code is good, the script and template code still leave quite a bit to be desired.

Original credit for the script goes to Aarondot (I think). I'm not going to even bother listing his code here other than to object to how he wrote it. He used function and variable names that do not convey any sense of what their values represent, not to mention that the names chosen are just plain stupid: ChristIsImmanentInAllThings, youBet, justInCase, thatsFunny, coconutsKillMorePeopleThanSharks, noMoreThankYou, thankYourMother.

Aarondot says, "I hope you don't mind the variable names." I don't mind you using them on your page - if you want to share code with others, how about abiding by minimal programming standards?

ScriptyGoddess took Aarondot's script and got rid of the stupid names, but her script is not much easier to understand. Since this appeared to be the script everyone tries to use, I took this one and tried to fix the worst of its flaws.

Here's the original script from ScriptyGoddess:

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; }
}

...and here's the original template code to implement the script:

<MTEntryIfExtended>
<span id="varP<$MTEntryID$>"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;"><p>read more »</p></a>
</span><div id="varXYZ<$MTEntryID$>" style="display: none"><p><$MTEntryMore$></p><a href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return
true;"><p>« hide more</p></a></div>
</MTEntryIfExtended>

ScriptyGoddess has a tip in her sidebar: "Don't implement code you don't understand." It would be much easier to implement said code if the provider of the code actually took steps to make it easier to understand instead of harder. Two things right off that would help understand what this code does and how it works: 1) Format both the script and the template code so that the structure of the code can be seen, and 2) Replace the variable names with ones that actually mean something (as opposed to names like varA1, varB1, var123, varXYZ, varABC, and varP).

After closely studying the code to figure out what it was doing, I performed the above two steps and came up with the following script code:

function showMore(entryID, entryLink){
  extTextDivID = ('extText' + (entryID));
  extLinkSpanID = ('extLink' + (entryID));
  if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( varB1 != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkSpanID).style.display = "none";
      } else {
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkSpanID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}

...and the following template code:

<MTEntryIfExtended>
  <span id="extLink<$MTEntryID$>">
    <a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" 
onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return 
false;"><p>read more »</p></a>
    <br />
  </span>
  <div id="extText<$MTEntryID$>" style="display: none">
    <p><$MTEntryMore$></p>
    <a href="#<$MTEntryID pad="1"$>" onclick="showMore(<$MTEntryID$>,0);return 
true;"><p>« hide more</p></a>
  </div>
</MTEntryIfExtended>

Upon further examination and testing of the above code, I discovered a number of issues:

1. Weblog pages containing extended entries will not validate. This is because of the code <p>read more »</p> and <p>« hide more</p> are within link (<a href>) tags. Link tags are inline elements, and cannot contain block-level elements such as <p> tags (this is invalid HTML / XHTML). Solution: Remove the <p> and </p> tags from around the text.

Update 01-Jan-2004: <p><$MTEntryMore$></p> does not validate because typically the MTEntryMore text will start with a <p> tag, which means the web page will end up rendering <p><p> when the "Read more" link is clicked. This is also invalid XHTML, and the resolution is the same - remove the <p> and </p> tags from around the MTEntryMore tag.

Update 04-Jan-2004: Cleaned up explanation of the validation errors so that the right explanation is with the right code.

2. There is a design flaw in the script and template code. In the template code, the extended entry "read more" link is enclosed within a <span>, an inline display element. When the "read more" link is clicked, the display style for the "read more" link span is changed to "none", causing it to become invisible. When the "hide more" link is clicked, the "read more" link span's display style is changed to "block" to make it visible again. Setting a span's display style to "block" makes it render like a div (block level element) instead of the ordinary span (inline element) that is displayed when the page is initially loaded.

This can be corrected in one of two ways:

1) Modify the script line& document.getElementById(extLinkSpanID).style.display = "block"; to document.getElementById(extLinkSpanID).style.display = "inline";

2) Change the extended entry link text containing tags from a <span> to a <div>, and change the name of the variable that references it (extLinkSpanID) to reflect that it is a div (extLinkDivID).

I went with #2 - enclosing both the extended link and the extended text in a div seemed to be more consistent.

3. When the "read more" link is clicked in Mozilla Firebird, the mouse wheel would no longer scroll the page unless the mouse was clicked on the page first. I found this to be extremely annoying.

I don't really *know* the cause of this. From the behavior, I assume it is due to the "read more" link retaining focus after it is clicked, but no longer visible on the page. The fix wasn't too hard to implement: Add javascript code to make that element give up focus and return the focus to the document window. A third parameter was added to the onclick() functions in the template code - the keyword "this", which is a reference to the HTML element (link) being clicked on. A matching third parameter was also added to the showMore() function declaration as htmlObj. The statement htmlObj.blur(); was then added to the script to force the clicked-on link to give up focus. (See final code above to see where this statement is inserted.)

4. When the "hide more" link is clicked, the browser window jumps back to the beginning of the post instead of back to the "read more" link.

To make the browser jump back to the "read more" link when the "hide more" link is clicked:

1) I made the "read more" link a bookmark by adding name="ext<$MTEntryID pad="1"$>" to the "read more" <a href> tag.

2) I changed the destination (href) of the "hide more" <a href> tag from "#<$MTEntryID pad="1"$>" to "#ext<$MTEntryID pad="1"$>".

5. Cosmetic changes:

1) I removed the <br /> tag from within the extended entry link div and placed it after both div's (just before the </MTEntryIfExtended> tag), so that each div will have the same spacing afterwards, regardless of which one is currently displayed.

2) I changed the read more » link text to Continue reading "<$MTEntryTitle$>"... » and the « hide more link text to « All done!.

I hope that someone else finds this code and information helpful - this post sure seems like a lot of documentation for just 35 lines of code.

28 TrackBacks

The Tweezer’s Edge v3: Improved Extended Entry Script and Template Code for MT... Read More

Improved extended entry script and MT template code... Read More

Site changes are mostly complete.... for now. If you notice any problems or have any comments, please leave word here.... Read More

Here's a "shout out" (with optional "big ups") to TweezerMan of The Tweezer's Edge for his improved extended entry script and template code for MT--already put to use in yesterday's entry. For those keeping score at home, this version fixed... Read More

The Tweezer's Edge v3: Improved Extended Entry Script and Template Code for MT - an old favourite given a bit... Read More

Another Test from GYT Testblog on December 3, 2003 3:32 PM

Testing to see if the Extended Entry/Collapse function updated by Tweezers' Edge functions correctly.... Read More

For those that utilize MovableType to air out our grey matter The Tweezer's Edge has a new & improved script. It is a version of the Scriptygoddess' Extend/Collapse function. Improvements include a fix for Mozilla Firebird scrolling and most important... Read More

The Tweezer's Edge v3: Improved Extended Entry Script and Template Code for MT... Read More

Updates from Starjewel on December 7, 2003 5:21 PM

Added the modified script to make the "Continue reading" link open inline instead of opening the archive link. Readded the 'listening to section' and am still fighting with the MTAmazon and Netflix History plugins. Also, I broke the archive style... Read More

Extended Entry script... from distant, early morning on December 15, 2003 4:43 PM

I finally took the time to upgrade to Tweezerman's improved Extended Entry Script which allows extended entries to be open in lnline. There's a lot of advantages and it was long overdue for me to upgrade to the improved version,... Read More

Movable Type Resources from elise.com: On the Job on December 20, 2003 7:48 PM

Movable Type (MT) is a powerful web content publishing system, though often difficult for beginners to implement. Here are the links I have found most useful while implementing Movable Type weblogs. This list will grow as I continue to add features to ... Read More

I spent a few hours this afternoon working on a few usability enhancements. Following the updated code here, I revamped the Expanded Entries code and hacked up a new Expanded comments code. Now it should be more correct and validatable, and I now under... Read More

Since publishing my post "Improved Extended Entry Script and Template Code for MT", a couple of complaints have surfaced regarding what I wrote. In an MT Forum thread, LisaJill posted a link to my post.  In response, Girlie (a forum... Read More

Colophon from distant, early morning: static on January 10, 2004 6:43 PM

col�o�phon ( P ) Pronunciation Key (kl-fn, -fn) n. 1. An inscription placed usually at the end of a book, giving facts about its publication. 2. A publisher's emblem or trademark placed usually on the title page of a book.... Read More

Movable Type Resources from Learning Movable Type on January 24, 2004 10:07 PM

Movable Type (MT) is a powerful web content publishing system, though often difficult for beginners to implement. Here are the links I have found most useful while implementing Movable Type weblogs. This list will grow as I continue to add... Read More

i got a comment about a turotial I wrote. in the JavaScript coding was the... Read More

I was asked how i made articles expand. this entry is an example of what... Read More

found this nifty little script that does the trick. go ahead and see it in action.... Read More

Extended Entry Script from [[ VG BOOKMARKS :: Links to Scripts, Tutorials and Stuff for MT ]] [[VG.net ]] on April 20, 2004 2:23 AM

The Tweezer's Edge v3: Improved Extended Entry Script and Template Code for MT... Read More

Movable Type Resources from Learning Movable Type on May 22, 2004 10:05 AM

Movable Type (MT) is a powerful web content publishing system, though often difficult for beginners to implement. Here are the links I have found most useful while implementing Movable Type weblogs. This list will grow as I continue to add features to ... Read More

Expandable Entries from Cranial Cavity on June 2, 2004 3:33 AM

For those that utilize MovableType to air out our grey matter The Tweezer's Edge has a new & improved script. It is a version of the Scriptygoddess' Extend/Collapse function. Improvements include a fix for Mozilla Firebird scrolling and most important... Read More

MT: Extended Entry script from Gwen Harlow resources on June 24, 2004 9:24 AM

MT: Extended Entry script Read More

The Tweezer's Edge v3: Improved Extended Entry Script and Template Code for MT... Read More

Updates from Starjewel on January 23, 2005 3:15 AM

Added the modified script to make the "Continue reading" link open inline instead of opening the archive link. Readded the 'listening to section', Netflix History works again, and am still fighting with the MTAmazon plugin. Also, I broke the individual... Read More

Durl, an RSS feed for del.icio.us URL queries (categories: del.icio.us) Ishbadiddle: Turning a Blog Into a Semantic Web At heart, a blog is just a database. (I am indebted... Read More

Movable Type: Blacklist Stats Del.icio.us Address-barlets Improved Extended Entry Script and Template Code for MT Aufbau und Pflege von Bilddatenbanken Tipps als PDF... Read More

I've used the original script posted by ScriptyGoddess for years. It allows inline expansion and collapse of extended entry text. This improved test is cleaner and validates.... Read More

Welcome to a familiar yet different looking RichardZ.com. I've made some changes where some you'll notice while others you won't (but I will). Here's the low-down (or 611 as they say on the street); Blog software upgrade: I've upgraded my... Read More

20 Comments

I just installed it in my main template but when I click on more it takes me to my permalink :( it's working for you, how'd you do that!

There's a few reasons why this might happen. The most likely cause I can think of is that javascript is not enabled in your browser. If that is not the cause, a look at your weblog would probably tell me what is wrong (provide a link!).

it's enabled, I wonder if my scripts are conflicting with each other...

nevermind! it was a problem with the pasting, thanks again for the script!

Thank you for the detailed explanation. I'm a novice and have been trying to learn from books, trial & error, and experimentation (with existing scripts). The have been using the Aarondot version of this script on my website and it seems to work okay but its hard to decipher.

I liked the variable names AaronDot used, and have received comments from 'view-source'-ers on my site that 'even the source code is funny'. There's alot of highly effective js around, and not much funny highly effective js!

that said, thanks for publishing your rework of the script, as the joke's over for me as when it comes to maintenance it's a headache. Nice improvements in validation and scrollwheel maintenance!

Thanks VERY much for explaining the details of this script. I'd been picking apart the scriptygoddess script and was getting lost. Your details fill in a lot of holes.

(and sorry for the tb ping to my testblog! note to self - gotta turn that off...)

Very nice! Thank you so much for all the education on this script. It has surely helped me and it's fixed a few issues I've been dealing with on my site. Thanks!

I replace your script for scriptygoddess' and it's seems smoother, but I still can't figure out why both scripts made my fonts bigger on my page.

Here is a page without the script:

http://www.joehilldispatch.org/smallaxe

This has your script:
http://www.joehilldispatch.org

The expandable comments are more important to me than the size of the font, but I do like the older, smaller font better.

Thanks for your hard work.

It would help if you followed the instructions: "Here is my modification of the javascript code, which goes between the <head> and </head> tags in your template"

I looked at the HTML source for http://www.joehilldispatch.org - the script is above the DOCTYPE instead of between the <head> and </head> tags in your template. I don't know if that will fix all of your problems, but you definitely need to start there.

I figure that out a little later that night when I ran my site through: http://validator.w3.org/ and that fixed the font size problem. Sorry to waste your time. I'm just getting to the point where this stuff doesn't look like a cloud of nonsense and I'm getting slightly more careful everyday.

As long as I have your attention, I'm having problems with what people seem to think is the peekaboo bug - sections of my text get whited out and chopped in half. I've worked through a few solutions:
http://www.notestips.com/80256B3A007F2692/0/CF15C0C2BB9DE17C80256C90000557D6

and this:

/* begin hide from IE5-Mac \*/
* html .comments-body { height: 1%; }
/* end hide */

but they aren't helping. Any thoughts?

Nevermind, removing the color tags from the .blog and .blogbody did the trick.

Thanks for the expandable comments tag and your time.

I was wondering if you can help me with a problem.

Here is the code for a button:

How can I add another command to count the number of times the button was clicked?
I want to display on the bottom of the page �Total number of calculations: ???�
How can I make it count and display?

Thank you so much,

I just picked this up at blog-fu and thought it fit in here.

Thanks for the scripty info. It was exactly what I was looking for.

Thanks a lot, your work is greatly appreciated.

Thank you! Very helpful

Thank you!! It was a dream to use and did exactly what I was looking for!!

Hello! This was an easy script to implement; many thanks.

I'm just wondering how I can modify the above script to add a "show comments right here" section following my comments after each entry.

Thanks

Thanks so much for the script. It is much better than the default MT one. Very easy to use.