@johnny:

Do you have an example of a page causing the problem?

just incase it does let me show html code, here it is

<table width=750><form id=idForm name=nameForm method=post action=""><script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./lib/jquery.mcdropdown.js"></script>
<script type="text/javascript" src="./lib/jquery.bgiframe.js"></script>

<!---// load the mcDropdown CSS stylesheet //--->
<link type="text/css" href="./css/jquery.mcdropdown.css" rel="stylesheet" media="all" />

<ul id="categorymenu" class="mcdropdown_menu">
<li rel="1">
Arts &amp; Humanities
<ul>
<li rel="2">
Photography
<ul>
<li rel="3">
3D
</li>
<li rel="4">
Digital
</li>
</ul>
</li>
<li rel="5">
History
</li>
<li rel="6">
Literature
</li>
</ul>
</li>
<li rel="7">
Business &amp; Economy
</li>
<li rel="8">
Computers &amp; Internet
</li>
<li rel="9">
Education
</li>
<li rel="11">
Entertainment
<ul>
<li rel="12">
Movies
</li>
<li rel="13">
TV Shows
</li>
<li rel="14">
Music
</li>
<li rel="15">
Humor
</li>
</ul>
</li>
<li rel="10">
Health
</li>

</ul>

<tr><td align=left>Reason for Ticket</td><td>
<input type="text" name="category" id="category" value="" />
</td></tr>

<script type="text/javascript">
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu");
});
</script>

</form></table>

nice catch, you were right on the money! thanks!!

@Michael,

The "select" option gets invoked when a value is selected (this is either when the user clicks a value or after they've typed a value and the blur event has been triggered.) We're using this internally to fire off events, so it should definitely be working correctly.

Neither the "select" nor the "click" event should fire off initially. Are you sure you're not doing:

{
select: someFunction()
}

That's the only way they'd fire off initiallly (because you're actually executing the functions at runtime--not setting it as an handler.) You need to do either:

{
select: someFunction
}

... or ...

{
select: function (){ someFunction(arg1, arg2); }
}

-Dan

@Andrew:

At the moment, this isn't a need we have. However, you can probably get it working with a few modifications to the $(document).bind("click", ...) behavior that starts on line 93. Right now what is happening is the onclick event is being fired for each mcDropdown. What you'd need to do is cancel that event for any dropdown that's not currently open.

If you come up with a working patch, I'll definitely be willing to add it to the source code.

@Andrew:

Glad the plug-in is working well for you. It's funny, because I've seen some people give negative comments on how this was a poor UI choose. While I don't feel it's perfect, I think it solves a complex UI problem very well.

@dew:

My best advice is some generic advise for figuring out how to alter CSS to accomplish the task you want--and that's to user Firefox w/Firebug. The Firebug addon will allow you to easily change the CSS in a live editing mode--which makes it very easy to figure out what tweaks you need to make. I find the tool invaluable when tweaking my CSS to get the effect I need.

However, for the mcDropdown specifically, you'll want to do a couple of things:

1) Use a <div> instead of an <input> for the control. The <div> element is a read-only version.

2) Change the div.mcdropdown div rule to have a display: none (this should prevent the text from showing up altogether.)

3) Change all the div.mcdropdown a (and div.mcdropdown a:*) rules to match the image you want to use. This is the default dropdown image handler.

You may need to make other tweaks, but all of the tweaks should be within the div.mcdropdown selector.

Dan, nice plugin, I'm sure I'll use it often. I'm looking for an example of how to setup or receive a change event to allow me to use the user selection to hide/show various page elements. I've currently got "$jquery->script('var dd = $(".mcdropdown_menu li").change( function() { alert("here")})');" but it's not being triggered. Thoughts?

Also, it's:

$(".mcdropdown_menu").mcDropdown({
select: function (value, display){
alert("here");
}
});

Please refer to the docs for more options.

Hey, using IE 6, JQuery 1.2.6 and the latest MCDropDown i ran into an issue. when the third level of the dropdown is called the width element seems to have a NaN value, does not load and gives an exception in jquery att: extend, i added an 'try catch --do nothing' to the code it seems to force the error override but minor other issues are evident.

@Junaid:

Are you sure you're running the latest version (v1.2.07?) I know there's no general problem, because most of the menus we have are at least three levels deep.

Is there a code example somewhere I can look?

I'd most likely suspect it's something in your HTML. Even the example on the download page has an example three levels deep that works fine (Arts & Humanities > Photography.)

@Prasad:

I don't really understand what your problem is, but do make sure your running the latest version (v1.2.07.) There have been several fixes to address positioning issues.

Also, I would recommend using a fixed width for the input element--do not use a percentage width.

@Prasad:

Since that's a pretty corner use case, I'd recommend just doing something like:

$(window).bind("resize", function (){
$("#category").mcDropdown().closeMenu();
});

A normal select element will close automatically when the browser resizes, so this would be consistent with how the select element works.