More is less

Another Script Entry is long overdue. It is time to show you how to hide and show bits of stuff on your blog pages, using only Javascript. You know - "Show comments here", or "more", for an extended entry.

Other bloggers use php to accomplish this, but if you don't have access to php, or if you don't want to learn php, then you can do it with just Javascript. Strictly speaking, if you can use php or some other server-side scripting language, it is probably better, because if you get lots of comments, your index or archive pages can become quite large using the Javascript method, because *all* of your comments for all entries are on the page, you just can't see them unless you open them. With php, you can prevent them from being sent to the browser at all, until you request them.

Much of the code is adapted from php code found at ScriptyGoddess. If you have php, and want to use it, go there for loads of php Scripty Goodness™!

Please note, this is a loooong entry:

First, you need the javascript routine to show and hide. Rightclick and download blogtricks.js and copy it to your server. Please do not connect to the copy on our server, as this will strain our bandwidth, and is a serious breach of etiquette. In your header block, insert this line:

<script src="http://yourserver/path/blogtricks.js" type="text/javascript"></script>

To show extended entries in your blog, replace your <MTEntryIfExtended></MTEntryIfExtended> pair with:

<MTEntryIfExtended>
<span class="extended">
<span id="click<MTEntryID>"><a href="#jsenabled=no"
onclick="showMoreAnything(<MTEntryID>,'#?jsenabled=no');return false;">
<b>more...</b><!-- replace this with whatever text you want -->
</a><br /></span>
<div id="hide<MTEntryID>" style="display: none" >
<$MTEntryMore$><!-- this is the actual extended entry -->
<a href="#" onclick="showMoreAnything(<MTEntryID>,0);return false;">
<b>less...</b><!-- replace this with whatever text you want -->
</a><br />
</div>
<br />
</span>
</MTEntryIfExtended>

The <MTEntryIfExtended> tag is important. If you don't put this around this code, then you'll have "more" and "less" controls even on entries that do not have extended entries.

If you don't use Movable Type, simply replace the Movable Type tags with the appropriate tags for your content management system.

To show your comments on the page, the code is as follows:

<MTEntryIfAllowComments>
| <a href="<$MTCGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a><br />
<MTEntryIfComments>

<span id="click<MTEntryID>.1"><a href="#jsenabled=no" onclick="showMoreAnything(<MTEntryID>.1,'#?jsenabled=no');return false;">

<script type="text/javascript">
<!--
// this prevents a link for opening, if there are no comments
if (<$MTEntryCommentCount$> > 0) {
document.write("<b>Show comments here...</b>"); //replace with appropriate text for you
}
//-->
</script>

</a><br />
</span>

<div id="hide<MTEntryID>.1" style="display: none" >

<!-- ********* start of actual comment display ********* -->
<MTComments>
<div class="comments-body">
<$MTCommentBody$>
<span class="comments-post">Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$></span>
</div>
</MTComments>
<!-- ********* end of actual comment display ********* -->

<a href="#" onclick="showMoreAnything(<MTEntryID>.1,0);return false;">

<b>Hide comments...</b> <!-- replace with appropriate text -->

</a><br />
</div>
<br>

</MTEntryIfComments>
</MTEntryIfAllowComments>

You can do the same for any block of text you want to be able to hide and show:

<span id="clickArchives">
<div class="sidetitle">
Archives <a href="#jsenabled=no" onclick="showMoreAnything('Archives','#?jsenabled=no');return false;"><b>(show)</b></a></div>
</span>
<div id="hideArchives" style="display: none" >
<div class="sidetitle">
Archives <a href="#" onclick="showMoreAnything('Archives',0);return false;"><b>(hide)</b></a>
</div>
<div class="side">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>
</div>
</div>

This is a slight variation on the previous examples, in that it puts the both "(show)" and "(hide)" controls at the top of the section. Simply replace the word "Archives" everywhere with a unique word that identifies that block of text. I have used this basic technique for showing and hiding archives, categories, and recent entries, in the column at right.

NOTE: whenever you play around, save your old code before embarking on significant change. You can always put back your old (working) code if you need to.

As always, please let me know if this is helpful, and if you have problems, feel free to ask, either in comments or by emailing me at squiddy AT programmer DOT net.

And please, ping my trackback, or leave a comment if you use this!

Have fun!

And the hits go on...

It's amazing what mention on a popular blog will do to traffic rates: robyn over at www.tampatantrum.com mentioned and linked to my Javascript Skinning Tutorial.

Since then, my hits have skyrocketed.

Lisa over at hey.ripthebag.com has also linked the tutorial. Oh, happy day! :)

Thank you to both of you!

How to skin using JavaScript

[note: this is incomplete - some of the javascript / css files need to be reconstituted. Once this is done, this note will be removed. Thank you]

Many of the sites out there are "skinable", meaning you can choose an alternate look, which will be your default as
long as the cookie they set in your browser remains intact. Most of these, such as the one ScriptyGoddess has on her
site require PHP or some other server side scripting language.

Not everyone has access to PHP, so for those of you who do not, we present a purely Javascript solution.

install skins.js on your server. Place the following in your block:

<script LANGUAGE = "JavaScript" SRC="skins.js" type="text/javascript"></script>

make sure you have the correct path to skins.js - you may have to put the full URL. Then place this just after it:

<script language="javascript" type="text/javascript">
<!--
CSSCookieName="michaelTest";
defaultCSS="";
whichCSS();
document.write("<link rel='stylesheet' href='"+whichCSSFile+"' type='text/css' />");
//-->
</script>

(replace "michaelTest" with the name of your blog, for example) then place a block like this in your page, wherever
you want to have the skins changed:

<a href='javascript:jump("");'>0</a> |
<a href='javascript:jump("1");'>1</a> |
<a href='javascript:jump("2");'>2</a> |
<a href='javascript:jump("3");'>3</a>

Place alternate stylesheets in your main blog directory, calling the main one "styles.css", and in this case the
others will be "styles1.css", "styles2.css" and "styles3.css". You can have as many different skins as you like -
just name it "styles" + whatever you place in the quotes in the jump("") call.

When someone clicks one of the links, it will set a cookie in their browser containing the information to select the
appropriate version of your stylesheet. I have implemented a very simple demonstration of this on my site - all it
does is change the background colour for the page, but my wife has just implemented full-featured skinning using
this technique on her site: Waiting for Godel.

And voila, you have skins! If you use this, please leave a comment with a link to your site, or a trackback ping.
This way, if there's a problem, I can let people know. Enjoy!

UPDATE 2003 07 23
Please, do not link directly to skins.js on our server. Right-click the link, and select Save As, and save it to
your computer, then place it on your own website, with the correct links. Thank you.

Also, you should modify the code above like this:

<script language="javascript" type="text/javascript">
<!--
CSSCookieName="michaelTest";
defaultCSS="";
whichCSS();
document.write("<link rel='stylesheet' href='"+whichCSSFile+"' type='text/css' />");
//-->
</script>
<noscript>
<link rel='stylesheet' href='styles.css' type='text/css'>
</noscript>

This change will use your default stylesheet even if the visitor has javascript turned off.

UPDATE 2003 07 29:
It seems not all browsers like to work with the implementation above:

<a href='javascript:jump("");'>0</a> |

will not work in Opera, for example. To get it to work with>everything<, like the implementation on this site does,
try using a clickable image, like this:

<img src="/squidblog/clearsquare.gif" width="10" height="10" alt="default" border="0" onClick='javascript:jump
("");'>

This would give a 10pixel by 10pixel turquoise square like the one in the top right corner of this page, that is
clickable, and would set the skin back to the default value.

You, of course, can use any image you want. Or use a button.

Hope this helps.