I love Movable Type! Could you guess? I have had a few people email me about my Recent Articles drop down menus. They are not using PHP, just a JavaScript (JS) that MT generates. I developed this with the help of Brian Woodward. Most the credit to the thing goes to him, I just supplyed the needed MT coding and the idea (well I also bitched about all the errors that IE was generating, Jake bitched about as much as me too). The script would be in version 3 if we were versioning it. Brian just last night fixed the PC/IE issue where you would get an error icon in the lower left of the browser. This is, to my knowledge, the last error in the script. So it is Netscape (Mozilla, yada, yada) and IE friendly.
We have decided to open source the script, so I will be putting together a tutorial about using it here. Brian just prettied it up a bit for the mass market. And let me tell you that boy can comment a script!
Continue reading for step by step instructions.
Step #1: Copy this script.
Step #2: Create a new Index Template in MT. Type in the Output File location. For example mine is: /home/breaking/public_html/blog/recent.js. Make sure the Rebuild this template check box is checked! Now paste in that script into the Template Body.
Step #3: Add this code to your all templates that will use this script.
<script language="javascript" type="text/javascript" src="/path/to/where/you/have/mt/write/this/file/recent.js"></script>
For example I use:
<script language="javascript" type="text/javascript" src="/blog/recent.js"></script>
Step #4: Now you need to add the HTML to your web page. It looks like this (please note this I took out the page layout CSS):
Recent Articles<br />
<form name="DForm">
<select name="S1" onChange="change_list()" style="width:200px;">
<option value="-1" selected>By Category...</option>
<option value="">---</option>
<MTCategories>
<option value="<$MTCategoryID$>"><$MTCategoryLabel$></option>
</MTCategories>
</select>
<br><br>
<select name="S2" onChange="GotoPage()" style="width:200px;">
</select>
</form>
That should do it! Please email me (ken[at]meancode[dot]com) if you have any questions. I am using CSS to make the SELECT menus 200 px. Change that as desired. As with the veriable used in the MT tags we have used the name lastn as the variable to determine how many entries are shown in the SELECT menu. I use 10, change it as desired. If you have any problems with this script please let me know.
If you use this please email Brian and I, we would like to hear from you. I will place a list of the sites that use this script at the end of this post.
This script is free for you to steal and abuse as you see fit. If you modify it in any way we only ask that you share with us your modifications.
<form name="DForm">
<select name="S1" onChange="change_list()" style="width:200px;">
<option value="-1" selected>By Category...</option>
<option value="">---</option>
<MTCategories>
<option value="<$MTCategoryID$>"><$MTCategoryLabel$></option>
</MTCategories>
</select>
<br><br>
<select name="S2" onChange="GotoPage()" style="width:200px;">
</select>
</form>
Comments (6)
While this is cool, it's not an entirely new idea (as I've seen other sites with menus of this type), but here's an MT Support Forum Post that has somebody doing this a while back:
">">http://www.movabletype.org/support/?act=ST&f=14&t=5173>
But thanks for sharing, just the same! :)
Posted by Jake Ortman | July 2, 2003 9:04 PM
Posted on July 2, 2003 21:04
Jake,
The jump part of the drop downs are basically the same idea. However, the script I created populates the second drop down based on what is selected in the first drop down without refreshing the page. That was the tricky part for me, but now that I have done it, it's really not that difficult. I'm sure other people with more extensive javascript knowledge find this to be a piece of cake.
Brian
Posted by Woodwardb | July 3, 2003 7:13 AM
Posted on July 3, 2003 07:13
One more thing, I have seen this on other sites too, but I wanted to create it using MT tags.
Posted by Woodwardb | July 3, 2003 7:14 AM
Posted on July 3, 2003 07:14
Yeah, double/dynamic population of the two menus is tricky, and I had forgotten that was a part of. Your code is cleaner, too, and I wasn't trying to crap, by any means.
Just be glad you never had to do three-way menus -- that's a pain in the ass, but can be done (just see the mess my buddy and I did at the Emerald's site: http://www.dailyemerald.com/archive/ -- it's clean code, but a LOT of it).
Posted by Jake Ortman | July 3, 2003 8:08 PM
Posted on July 3, 2003 20:08
Cool idea. It doesn't work in Opera 7.23, however. The second dropdown list is not populated with the list of entries. Ah well. :-/
Posted by sarah | April 11, 2004 12:28 AM
Posted on April 11, 2004 00:28
Ah well, no Opera. Who uses Opera anywho? he he.
Posted by Ken Edwards | April 11, 2004 2:10 AM
Posted on April 11, 2004 02:10