MT Tags in Pull-Down Menus
Comments: 17
I get enough mail from people asking how to make the pull-down menus in the side bar that it’s probably a good idea to write it up. This is for people who are not quite as familiar with HTML and MT tags as they will be after a bit more playing around.
Remember that MT tags are really just portable chunks of functionality that you can place pretty much anywhere throughout your HTML. The tricky part is simply remembering which tags have to appear in container tags and which can work by themselves. (The MT documentation is pretty good at explaining this, so do make a point of reading it when you get a chance.)
Note: The “¬” character means the line has been broken (to fit this page). If you copy any code below, make sure the two lines separated by this character end up on a single line.
The 20-second JavaScript
All of the pull-downs use the same script to work. There are a bunch of ways you can do this, but here’s the one I use (took about 20 seconds in DreamWeaver ;-):
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.¬
selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
Put the script in the head of each page on which you want to include pull-downs. Don’t forget to include the opening and closing script tags:
<script type="text/javascript">
[script goes here]
</script>
… or put it in an external file and link to it:
<script type="text/javascript" src="<$MTBlogURL$>[path to external file]/[filename].js"></script>
Recent Posts
Obviously you should only put a limited number of items in each of these pull-downs (otherwise you’re going to end up with some very long menus as your site grows), so I use the lastn="n" attribute to limit the size of the list. At the end of the menu I place a link to the complete archives so the full list is always within reach. Here’s the recent posts pull-down:
<select name="recentposts" onchange="MM_jumpMenu('parent',this,0)">
<option value="" selected="selected">Recent Posts</option>
<option value="">---</option>
<MTEntries lastn="7">
<option value="<$MTEntryLink$>"><$MTEntryTitle sanitize="1"$></option>
</MTEntries>
<option value="">---</option>
<option value="<$MTBlogRelativeURL$>archives.html">Complete Archives</option>
</select>
By Category
Here’s the Category one. If you add additional categories later, the menu will expand to accommodate them (i.e., you won’t need to change this code).
<select name="byCategory" onchange="MM_jumpMenu('parent',this,0)">
<option value="" selected="selected">By Category</option>
<option value="">---</option>
<MTCategories>
<option value="<$MTCategoryArchiveLink$>">¬
<$MTCategoryLabel$></option>
</MTCategories>
<option value="">---</option>
<option value="<$MTBlogRelativeURL$>archives.html">Complete Archives</option>
</select>
By Month
Again using lastn="n" to specify 12 months of direct links, and then including the link to the complete archives (which, of course, you may or not be interested in using: edit any of this however you see fit).
<select name="byMonth" onchange="MM_jumpMenu('parent',this,0)">
<option value="" selected="selected">By Month</option>
<option value="">---</option>
<MTArchiveList archive_type="Monthly" lastn="12">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$>¬
</option></MTArchiveList>
<option value="">---</option>
<option value="<$MTBlogRelativeURL$>archives.html">Complete Archives</option>
</select>
These are just three ways to wrap MT tags in some common HTML. There are plenty of other things you can do, limited, as they say, only by your imagination. Hope this helps.
•••
Posted to MetaStuff • 2003.05.03 (Sat) • 20:47
Comments
Posted by Jesper 2003.05.04, 01:55
In posts where you’ve sent a trackback, the blank option in the “sent trackbacks” pull-down is displayed last, rendering the first trackback selected first and unable to get info on (as it won’t change as in onChange). I’d place the blank option first (recommended as it won’t look fucked-up when you pull it down) or set selected=”selected” on the blank option.
Posted by jh 2003.05.04, 12:11
Jesper —-
You’re right and I’ve changed it.
The reason it was like that was to provide a visual indication that a ping had been sent. No ping, nothing in the pull-down. But once someone had been pung, a URL would be visible there and you’d know there was actually something to click on.
As for the first item not changing “onChange,” this works in some browsers but not in others (could have sworn I tested this more thoroughly ;-). IMHO, it makes sense for browsers to register a selection of the first item as a change (as Safari and Camino do, for example) but because some browsers aren’t quite this smart, I have to change it (and have done so).
Thanks for bringing my dumbnesses to light!
Posted by Jesper 2003.05.04, 19:08
Oh, more than welcome. :)
Posted by Jesper 2003.05.04, 19:19
The idiocy was in that there was no selected=”selected” (appearently) so that IE would go ahead and select the first one, which happened to be the pinged url, rendering me able just to select the placeholder. Which would then bugger off.
That’s fixed now, though.
Posted by Mr. X 2003.05.05, 04:45
Very cool! I’m about to finally get to designing my blog for real and I was about to investigate how to get that done. I guess I won’t have too! Thanks a lot. Very good timing! ;)
Posted by Blo 2003.05.05, 06:38
That cool your showing how to do that but I am more interested in how you did the options on the search.
Also how come you didn’t email me back?
-Blo
Posted by Jesper 2003.05.05, 07:06
Options on the search are available in the MT help (press the HELP button in the top bar in any page, and look through the contents for “search”) and he’s in Japan so it’s quite possible he hasn’t yet checked his email.
Posted by jh 2003.05.05, 12:16
Blo —- The reason I haven’t written back is because I’m busy, and people who steal from me (40K png) get placed way down towards the bottom of my reply-to list, just above the penis enlargement advertisements.
But I tell you what, seeing as you’ve taken this public now (something I wasn’t going to), let’s see if the readers of this site can’t help you with an answer to your question.
Posted by mike 2003.05.07, 11:56
That works very well. Thanks very much for writing up a how-to for this.
Posted by clemisan 2003.05.10, 22:01
You remindet me to add this feature to my site, like I wanted to do so since I started my weblog. But, why didn’t you mention the ‘noscript’ alternative?!
Posted by Paulie 2003.05.11, 22:21
Thanks a bunch for this code snippet. Saved me at least an hour (likely more) of research and what-not. Being new to CSS, I also snuck a peek at your own configuration so that I could unabashedly steal your funky dotted underlines for links!
Now to go learn enough to be W3C compliant!
Posted by nima 2003.05.15, 16:16
thanks for the code. can you kindly explain how you did this beautiful blog that lists the main article followed by comments and THEN the field to eneter a comment all in one column instead of the ugly default of pop up comments?
nice and clean work
Posted by Michael 2003.06.08, 02:43
Thanks for the code. I was just thinking about how to do something like this, then I stumbled across this page.
Posted by sarah 2003.11.21, 07:36
does anyone know how (or if you can) get a blogroll into a pull down menu?
Posted by viola 2004.09.04, 17:18
JH
I would like to thank you so much for taking the time to assist dummies like me. (I am not ashamed to say) we all need to learn somehow. I am sorry you have to deal with such language and attitude from some folks like Jesper. I very much appreciate your work. And respect your assistance. Many folks want money for this kind of information and are too money hungry to share. As I am a real dummy when it comes to this tech. stuff, I am wondering if you could e-mail me as I have several problems that I am sure you could help with. It is worth paying you for your assistance in a few matters as you see fit. Again, if you have time, I would really appreciate it. Thank you in again. Viola
Posted by contessa 2005.02.24, 23:55
Hello! I was wondering if you could help me out! I copied this code and everything “looks” right however when I select the month, the link doesn’t seem to work. It doesn’t take me anywhere. Am I doing something wrong?
Thanks for your help in advance C
Posted by jh 2005.02.25, 08:33
There are two parts to this: the pull-down menu code and the JavaScript. Make sure the latter is in place (either in the page or linked externally).
And the whole thing requires that JavaScript be turned on in the browser, of course. You might want to make sure it is. Not a very robust means of doing things, I know, but there you are.
Post a comment:
Send This Story to an Enemy
• • •
