Recent Articles MT JavaScript

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.

TrackBack

Listed below are links to weblogs that reference Recent Articles MT JavaScript:

» Discount Cruises from Cruises
TITLE: Discount Cruises URL: http://123.xmix.net/ IP: 200.21.45.4 BLOG NAME: Cruises DATE: 04/09/2005 05:40:42 PM TITLE: Discount Cruises URL: http://123.xmix.net/ IP: 200.21.45.4 BLOG NAME: Cruises DATE: 04/09/2005 05:40:42 PM [Read More]

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! :)

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

One more thing, I have seen this on other sites too, but I wanted to create it using MT tags.

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).

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. :-/

Ah well, no Opera. Who uses Opera anywho? he he.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


Warning: include(/home/meancode/public_html/breakingwindows/footer.php): failed to open stream: Permission denied in /home/breaking/public_html/2003/07/recent_articles_mt_javascript.php on line 381

Warning: include(): Failed opening '/home/meancode/public_html/breakingwindows/footer.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/breaking/public_html/2003/07/recent_articles_mt_javascript.php on line 381

Blogcritics Magazine

Social Networking

Mac Headlines

Read up-to-date headlines on everything Mac.

Content provided by prMac.

ESRB Search

Creative Commons License
This weblog is licensed under a Creative Commons License.
Enhanced with Snapshots