tips and tricks for movable type
collapsing entries and comments
July 04, 2002
Here's the Scripty Goddess version of Aarondot's trick to expand and collapse the display of your MORE text and comments inline.
This function code should be placed in the Javascript section at the top of your page:
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; }
}
function showMoreComments(varA12, varB12){
var1232 = ('varXYZ2' + (varA12));
varABC2 = ('varP2' + (varA12));
if( document.getElementById ) {
if( document.getElementById(var1232).style.display ) {
if( varB12 != 0 ) {
document.getElementById(var1232).style.display = "block";
document.getElementById(varABC2).style.display = "none";
} else { document.getElementById(var1232).style.display = "none";
document.getElementById(varABC2).style.display = "block"; }
} else { location.href = varB12;
return true; }
} else { location.href = varB12;
return true; }
}
This code is placed where you want the expandable link for your extended text to appear:
<span id="varP<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="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>
And this code is placed where you want the expandable link for your comments to appear:
<span id="varP2<MTEntryID>" class="extended"><a href="<MTEntryLink>#<MTEntryID pad="1">" onclick="showMoreComments(<MTEntryID>,'<MTEntryLink>#<MTEntryID pad="1">');return false;"><p>show comments right here »</p></a><br /></span><div id="varXYZ2<MTEntryID>" style="display: none"> <MTComments> <MTCommentBody> <p>Posted by <MTCommentAuthorLink> at <MTCommentDate></p><br /><br /> </MTComments> <a href="#<MTEntryID pad="1">" onclick="showMoreComments(<MTEntryID>,0);return true;"><p>« hide comments</p></a></div>
</MTEntryIfAllowComments>
(I've removed the dollar signs from the MT tags because I generally prefer not to use them!)
TrackBack: 7
(URL: http://www.thegirliematters.com/sf/mt-track.cgi/40)
» Show / Hide entries and comments
Excerpt: Thanks to one of girlie's tricks, I know have a show/hide comment thingy working. :)
Weblog: blue sky day
Tracked: 02.09.03 10:35 PM
» New Feature!
Excerpt: Changed my layout code such that I can now use the "Additional Entry Text" and have all my text still
Weblog: All of the Above
Tracked: 02.16.03 03:26 PM
» Javascript Entry Expansion and other Site Changes
Excerpt: While randomly searching for Movabletype extensions I came upon a site called [the girlie matters] which is one huge colelction of javascript, csss, html, movabletype,.... tricks. I found a great script that makes it possible to expand and collapse ent...
Weblog: Can's Awesome Weblog
Tracked: 06.20.03 07:47 AM
» Umbau II
Excerpt: Bevor ich es vergesse, die credits: Eric Costello für die Layoutidee. Eric A. Meyer für das CSS-Menü. Jens Scholz für die Farbauswahl. monoklon für die Idee mit den direkt unter dem Artikel angezeigten Kommentaren. Todo: CSS-Me...
Weblog: wurch.log
Tracked: 06.24.03 04:05 PM
» EXTENDED ENTRIES
Excerpt: Just doing a bit of testing. Don't bother commenting on this post. It'll get deleted. Thanks. Alright, the extended entries now work so that "more" it opens up and "less"...
Weblog: Spokey Dokey
Tracked: 08.14.03 10:17 PM
» Movable Type Enhancements
Excerpt: In trying to determine whether Movable Type (MT) was a feasible backend for OK/Cancel, I found a variety of sites and discovered just how big the MT community really was. If there's a function you can think of (and many...
Weblog: my:dentity
Tracked: 09.28.03 11:34 AM
» Extended entry script...
Excerpt: One of the features that Radio was missing that Movable Type has is extended entries. That means that if I write a really long entry, it doesn't necessary have to take up the entire page. However, previously, clicking 'more' would...
Weblog: distant, early morning
Tracked: 10.13.03 05:35 PM
Comments
I've removed the dollar signs from the MT tags because I generally prefer not to use them!
Are the dollar signs unnecessary for the MT tags? Oh, something new... and I love this idea, but I just hadn't gotten around to using it. Thanks for the unintentional reminder! :)
Yes, the dollar signs are optional - used to quickly distinguish MT tags from other HTML tags - but since they all start with "MT" anyway, I never have a problem with them standing out! =)
This is a popular technique, isn't it? I partially wish I'd come across it before implementing it myself; then again, I think that my version is better anyway :-)
But I'm still trying to decide whether to do inline comments. Having them show/hide in the page would make it easier, but it'd be a nightmare for the poor old Lynx users...
Kudos on the site, by the way. Fascinating. Even if I don't like your dashed borders around textboxes ;-)
How would I go about having a non pop up comments template and instead having it show the entry on top and the comment underneath?
or
I guess that would be the comment's link would go to the archived entry instead of popping up but it would still generate the number of comments...
How would I go about doing that?
I already wrote an entry on this: No pop-up comments =)
Yes I always know you know what I am "talking" about :-D
I went to the form first but I.E. keep freezing every time I clicked the link so since I saw your name by all the replies I figured just go straight to the source then :-)
Love this - thanks! :)
ahhhh ty ty ty! =)
Hi.
Would you know what would happen if this is applied to a browser that has its Javascripting turned-off?
Would the readers would still be able to see the extended entries?
Thanks.
It looks to me like the links are constructed in such a way that a browser with Javascript turned off would just take the user to the archive page for that entry, rather than displaying the extended entry inline on the page.
The only way to know for sure is to turn off JS in your own browser and test it out. =)
Yes, you are correct. Thanks.
I discovered a problem if one uses Opera 7.0. Once the extended entry has been displayed inline and an attempt was made to "close it up", the browser just crashes. I tried it on a handful of well-known blogs out there that uses this trick (including this "Tips" blog, just to check if the problem is not localized on my test site) and the same problem occurs.
However, it works like a charm in IE, no problem there.
I thought that you may want to know the Opera issue. I haven't tried it yet on lower or higher versions.
Thanks, Girlie. =)
thank you thank you thank you - this is a wonderful and easy trick. thanks again!!
i was reconstructing my site, and since i use (and love) this enhancement, i started to think if i could use it to apply to other portions of my site. ie - expandable archives and link lists.
i'm only a beginning-mid level programmer, so i might be able to goop around in the script to get it to work, but i was wondering if there's already a trick made?
I can almost always find what I need here. I used this on my extended entry link since I rarely extend the entry and it works like a charm. thanks again :-)
YAY! I just added this code to my blog and it worked like a charm! Thanks!
It works!!!! So easy! Thank you very much for sharing :))
I was looking for how to do this - but unfortunately I am not using movabletype - I just switched to WordPress from Grey Matter (I could never get MT to work for me).
Anyway, I just wanted to ask - is there a way I can use this script if not using MT? I love to open the comments on the same page.
Thanks for any help :)
You may have already posted this somewhere, but if I wanted to do this for my navigation bar, how would I go about doing this? thnx
I revised the expand/hide method to be compliant with XHTML 1.0 Transitional standards and simplified its integration.
My method is on my blog.
I also think it works better too (no screen jerking, just expand/contract) -- thanks for your awesome script for the past year though girlie - it rocks :)
Ryan(/girlie), I'm very interested to know how you got the script to work so that the page doesn't keep jumping back to the top of the entry/page. But I can't find that on your website.
Also, how does this one differ, and how might we get comments to *slide* down from beneath the entry (and back)? ;)
Thanks
Oh, and also... it would be cool to have the comment *form* on the extended HTML.
I use the following on my archives (can see it in action at besmirched.org, click on archives)
if (document.getElementById(element).style.display == 'block') {
document.getElementById(element).style.display = 'none';
} else {
document.getElementById(element).style.display = 'block';
} }
the template i use is
<a name="<$MTArchiveTitle dirify="1"$>">
<p class="dropDownLink"><a onclick="toggleDropDown('<$MTArchiveTitle dirify="1"$>')"
href="#<$MTArchiveTitle dirify="1"$>"
title="<$MTArchiveCount$> entr<$MTArchiveCount plural="ies:y:ies"$>"><$MTArchiveTitle lower_case="1"$></a><br /><font style="font-size:7pt;"><$MTArchiveCount$>
entr<$MTArchiveCount plural="ies:y:ies"$></font></p>
<p><span class="dropDownDrop" id="<$MTArchiveTitle dirify="1"$>"><MTEntries> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries></span></p>
</MTArchiveList>
sorry it's such a mess. but it works wonderfully. :) much less javascript to worry about. have tested it on ie6, firebird, mozilla, and safari.
oh, and make sure your 'dropDownDrop' class has 'display: none;' in it if you want to initially hide it.
When I writ e more than, say, 200 words my whole layout becomes squashed together. It's crazy. What have i done? is there some sorta extended entry setting i could have changed?
after putting this script in my MT 2.661, I noticed that the mouse cursor changes to a text-over cursor instead of the link-over cursor (i.e: straight-light text cursor versus the hand cursor)
Is there a fix for that?
I absolutely love the show/hide and I put in in my blog and it worked great the first time - yay! My question is...
I tried to wrap the "posted class around the show/hide bit so my font would be the same as the line where it says what time I posted at (smaller than the post) but for some reason the "show comments right here" but appears in the same font as my post. Here's what I have...
<p class="posted"><br>
<MTEntryIfAllowComments><br>
.<br>
.<br>
</MTEntryIfAllowComments><br>
</p><br>
I was wondering if you might be able to point me in the right direction so I can make the font the same as for the posted line?
I'm having some problems with this code. I had it working at one point. Then I changed my site to all CSS design and the inline mtextended entry breaks my site. Not only do the columns not show up in the right place, but the text for "more" and "hide" both show up under the entries. Here is a page where you can see the problem:
http://www.americanidle.org/main_backup.php
Any idea what's going on?
thanks,
Andrew