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

Good job Dan

But i have one problem in using it,
Can I set width of generated dropdown, i want to display only one column ?

problems with multi column values in FF.

When I click the parent node all is fine, the value is returned correctly. When I click a child node only the child node value is returned. I need the chain parent_value:child_value for processing.

In explorer works nice.

I have the following code :
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mcdropdown.js"></script>
<script type="text/javascript" src="Scripts/jquery.mcdropdown.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.bgiframe.js"></script>
<link type="text/css" href="Scripts/jquery.mcdropdown.min.css" rel="stylesheet" media="all" />
<script>
var strCategory;

function fncCambioCliente()
{
document.getElementById("contenido_portafolio").innerHTML="<div id='ajax_loader'><img src='/images/ajax-loader.gif'></div>";
setTimeout("despachaBusqueda()",1500);

}
function despachaBusqueda()
{
ruta=document.getElementById("category").value;
alert(ruta);
compuesto=ruta.indexOf(":");
if (compuesto > 0)
{
arrRuta=ruta.split(":");
txtCliente=arrRuta[0];
txtMarca=arrRuta[1];
}
else
{
txtCliente=ruta;
txtMarca="";
}
url_carga="portafolio_busqueda.aspx";
url_carga+="?prmCliente=" + txtCliente;
url_carga+="&prmMarca=" + txtMarca;
alert(url_carga);
}
</script>
</head>
<body>
<form name="f1" id="f1">
   <div id="busca_portafolio">
   <input name="category" type="text" id="category" value="Cliente" />
      <ul id="categoryMenu" class="mcdropdown_menu">
         <li rel="cliente 4">cliente 4
            <ul>
               <li rel="marca h">marca h</li>

            </ul>
         </li>
         <li rel="cliente 6">cliente 6
            <ul>
            <li rel="marca j">marca j</li>
            </ul>
         </li>
         <li rel="cliente 8">cliente 8
            <ul>
               <li rel="marca l">marca l</li>
            </ul>
         </li>
         <li rel="cliente 9">cliente 9
            <ul>
               <li rel="marca m">marca m</li>
               <li rel="marca n">marca n</li>
            </ul>
         </li>
         <li rel="cliente 10">cliente 10
            <ul>
               <li rel="marca">marca</li>
            </ul>
         </li>
         <li rel="cliente 11">cliente 11
            <ul>
               <li rel="marca x">marca x</li>
            </ul>
         </li>
      </ul>
   </div>
</form>
<div id="contenido_portafolio"></div>
<script type="text/javascript">
<!--//
// on DOM ready
$(document).ready(function (){
   $("#current_rev").html("v"+$.mcDropdown.version);
   $("#category").mcDropdown("#categoryMenu",{minRows: 25,maxRows: 25,allowParentSelect: true,delim: ":",valueAttr: "rel",select: fncCambioCliente});
});
//-->
</script>
</body>
</html>



thanks for your time.

Ernesto

For naviagtional usage

$("#backend_nav").mcDropdown("#categorymenu" , { select : function() { alert($("#backend_nav").val())} });

I have two remaining issues: One is that when the control is too wide for my table cell it floats over the neighboring cell. Is there a way I can set a max width and just have the contents scroll within the window if necessary?

The other is the same as reported above: Every time I call the .mcDropdown(); function a click event is fired. I defined the function as:

.mcDropdown("#FolderMenu", {allowParentSelect: true, targetColumnSize: 1, select: function(value, display){mcDropdownSelect(this, value, display);}});

Appreciate any feedback. Really like the control.

Thanks,
George

@Dan:

Event fire issue:
Turns out the event was firing correctly. It's not "click" event it's a "select" event and when I create a new instance of the control I call setValue()...

Width issue:
I get that this defeats one of your design goals but I need the width to be predictable and to fit into a limited space. I was able to get a fixed size on the dropdown - without having to modify any of the plug-in code - by setting the width on various elements when I create a new instance:

$(NewRow).find(".mcdropdown").width(150);
$(NewRow).find(".mcdropdown").find("input").width(150);
$(".tdFolderColumn").width(180);

The behavior when you mouse the control looks good - the popup is not limited in width so the user can see what they are selecting. But using keyboard entry you get a popup that is limited and so items may be hidden. Either way once an item is selected it may be too big to fully display in the closed dropdown. What I'd like to do is just try to scroll it to the right so that the final folder node is visible.

I'll try to put together an example page if I can sneak some time in this weekend.

@Bellamy:

If you're using an input element for the input, just specify the input element's "value" attribute.

You could also use the setValue() after initializing the mcDropdown to specify a default value, but using the "value" attribute on the input element is the easiest and best solution.

@Bellamy:

The value should be "1" (whatever the "rel" attribute is.)

@Bellamy:

No problem--it happens to the best of us!

@Richard:

No, I have done no work on this as it's not something I have a current need for and just haven't had time to look at adding the feature.

Dan: Is there a method to reset the dropdown menu back to the original value (the value shown in the original mcdropdown div)? Thanks so much, this has been very helpful!

Thanks Dan. So from what I understood, I created an <li> value whose text was identical to the original state--there wasn't one previously. This original text has the disadvantage of now appearing in the dropdown menu, but I can live with this. Was this the method that you suggest? Thanks!

I had this working very well until I swapped in jQuery 1.3.2 for jQuery 1.2.6. The closeMenu method is throwing an error:
      var dd = $("#style").mcDropdown();
      dd.setValue("clear-style");

From Firebug:
Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "mysite.com/js/jquery-1.3.2.min.js Line: 12"

Error: thismenu.closeMenu is not a function
Source File: mysite.com/js/jquery.mcdropdown.js
Line: 124

Any thoughts? Thanks so much!!

@Harold:

It looks like an issue with jQuery v1.3.1 and v1.3.2, v1.3.0 works fine. From a quick troubleshooting session, it looks like for some reason v1.3.2 is firing an extra document.click event--which looks to be at least part of the culprit.

There doesn't seem to be a quick fix, so I'd recommend sticking with v1.2.6 for this page. I know they're working on a new jQuery update which perhaps will resolve the issue.

We're still on v1.2.6 due to issues we kept running into with v1.3.x.

Yeah, thanks Dan, rolling back to jQuery 1.3 fixes the problem as you had mentioned. I can't use jQuery 1.2.6 for other reasons, so this is an effective solution for now. Thanks again! Harold

I've posted mcDropdown v1.2.10:
http://www.givainc.com/labs/mcdropdown_jquery_plug...

Changes:
* Fixed capability issues with jQuery v1.3.1 and newer
* Fixed some CSS issues and reduced duplicate classes
* Fixed showACOnEmptyFocus behavior
* Fixed IE6 bgIframe behavior with small lists (now uses outerHeight())
* Fixed IE with using the mouse to put focus in the field (cause by input element having a transparent background)

@Hasan:

See this comment and read the next couple:
http://blog.pengoworks.com/index.cfm/2008/6/26/mcD...

You just need to set the value attribute of your form field to the matching rel attribute value.

@Hasan:

I recommend you read this page:
http://www.givainc.com/labs/mcdropdown_jquery_plug...

It will show you how to use the API to set the field via JS.

@Lembit:

Instead of modifying the code, I recommend using the "delim" option to change the character. You could change the delimiter to String.fromCharCode(10) (which is a line feed) and then use CSS to set white-space:pre on the field (so the carriage return shows.)

If you want to modify the source code, you're on your own. I've found it's just too difficult to support people who've modified the source. You're completely in your rights to do it, but you'll need to work out any issues you have on your own.

Hi....

I don't speak englist very well. Please try to understand.


1,
"mcDropdown" When two or more than the same item....
If "mcDropdown" needed a mouse with a multiple choice problem can not be applied properly.

See a test page and I'll explain.

Test link : http://www.anjeuk.com/giva/sample_test.html


By using the keyboard when you select each item will work correctly.
However, using the mouse to select each item, the id = "category_one", id = "category_two" value is the same value that is selected.

When selecting items using the mouse ...
Each item you think about when choosing a keyboard like this has been applied to each of the selected value.



2,
"mcDropdown" finished selecting items, using the mouse or keyboard focus(cursor) is lost.
Using the keyboard(tab key) and then you can not progress.


please help me.

hi.

the latest version of jquery or "jquery-1.3.1" since the operation using the keyboard down arrow does not work correctly.

However, "jquery-1.3.0" is earlier, the normal operation.

Test page please see the link below.

How can you solve this?

please help me.



test1 -> jquery-1.2.6 ~ jquery-1.3.0 => keyboard down arrow Normal Operation

link : http://www.anjeuk.com/giva/jquery-1.3.0.gettingsta...



test2 -> jquery-1.3.1 ~ jquery-1.4.1 => keyboard down arrow Does not work

link : http://www.anjeuk.com/giva/jquery-1.4.1.gettingsta...