mcDropdown v1.2 released...

Posted by Dan on Jun 26, 2008 @ 10:36 AM

Addressing some more behavior issues being brought up (and adding a few new features,) Giva just released a new version of the mcDropdown plug-in:

  • Added focus() method
  • Fixed autocomplete list from showing dropdown when go back levels in FF3
  • Fixed autocomplete list corruption in when go back levels after using mouse
  • Added tabindex="-1" to the dropdown arrow (so it shouldn't recieve focus on tabbing)
  • Fixed tabbing behavior so hitting [TAB] should go to the next element in the tabindex
  • Autocomplete no longer shows (by default) if the input is empty and recieves focus (use the setting.showACOnEmptyFocus to control this behavior)
  • Added setting.showACOnEmptyFocus (used for controlling whether the autocomplete list shows on focus if list is empty; default = false)
  • Fixed noConflict() bug (where $ wasn't being properly scoped)
Categories: jQuery

89 Comments

  • johnny's Gravatar
    johnny
    nice script!

    i have a dumb question, why is it that <input type="text" name="category" id="category"> does not show up when I use this script in a form? when I select a dropdown selection, it puts it in the text field, but nothing is posted when I submit the form.

    thanks
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @johnny:

    Do you have an example of a page causing the problem?
  • johnny's Gravatar
    johnny
    its not a live page, and i dont think i can paste all the html code, but all I did was copy the example from http://www.givainc.com/labs/mcdropdown_jquery_plug... using v1.2

    essentially, I load the three js scripts, the mcdropdown css, then I have
    <ul id="categorymenu" class="mcdropdown_menu">
    with alot of various ul and li rel=....
    <tr><td align=left>test dropdown menu</td><td>
    <input type="text" name="category" id="category" value="" />
    </td></tr>
    and finally the jquery stuff:
    <script type="text/javascript">
    $(document).ready(function (){
      $("#category").mcDropdown("#categorymenu");

    });
    </script>
  • johnny's Gravatar
    johnny
    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>
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @johnny:

    It's because your form tag is inside the table tag. You need to move the form tag outside of the table tag (i.e. <form><table></table></form>.) It's invalid syntax. Most browsers will work w/the invalid syntax, but as soon as you manipulate the DOM, it breaks in some major browsers (either FF or IE--can't remember which one off hand.)
  • johnny's Gravatar
    johnny
    nice catch, you were right on the money! thanks!!
  • Michael's Gravatar
    Michael
    Hi,

    great plugin. Is there a something like onchange? I need to fire an ajax script when the user selects something.

    I tried the "click" and "select" option, but both fire only once when the drop-down menue is initialized.

    michael
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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 Rimmer's Gravatar
    Andrew Rimmer
    Is there an elegant way of having multiple dropdowns based on the same list?

    The scenario I am thinking of is a product category page, were the admin user can select multiple categories. The list of categories is always the same, but each time the user selects the box a new drop down is created.

    I attempted to do something similar, binding to 2 different input text elements, but updating one updated all of the dropdowns.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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 Rimmer's Gravatar
    Andrew Rimmer
    @Dan

    After a bit of reflection I decided it probably wouldn't be the most elegant solution anyway. Instead of having a list of mdDropDowns, I now have a list of categories with one mcDropdown used to add new product categories. When a categories is selected, a category gets added to the database, and the text for the category is added to the list.

    Thanks for a great control. I have seen a lot of ways to manage hierarchies and categorization and they are usually really clumsy. mcDropdown makes things a lot easier.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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's Gravatar
    dew
    hi. can u help me? i need to change the the psuedo-select box into picture.
    jquery.mcdropdown.css - what to change there?
    thanx a lot
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Sean O's Gravatar
    Sean O
    I second Andrew's request for multiple mcdropdowns pointing at one master list. I can see a few instances where this would be useful. Perhaps as a multiple: true/false option?
  • jeff's Gravatar
    jeff
    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?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Jeff:

    The event is "select", not "change".
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    Also, it's:

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

    Please refer to the docs for more options.
  • mario's Gravatar
    mario
    hello dan!
    i still have the same problem. i have played with menu 4 a while but as newbie i just give up 4 a sake of 1 good question... .-)
    i would like to show/hide some html code in div container..can u please drop some line of code as example? i would really like to use this solution on something im working on for a while...
    thx! :-)
  • Junaid Ali Qureshi's Gravatar
    Junaid Ali Qureshi
    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 Ali Qureshi's Gravatar
    Junaid Ali Qureshi
    Ya and by the way, Nice Work!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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's Gravatar
    Prasad
    H i have a strange problem if i resize my window The drop down is not adjusting with the <input type="text" name="category" id="category" value=""/> i saw in the css the style as the position is also absoulte how can solve this


    Please help[
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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's Gravatar
    Prasad
    HI we have downloaded the latest version but still the problem was not solved on window-resizing can you please look in to that its very urgent for us..

    Problem::
    if We open the drop down and resize the window the position of the drop down is not matching with the input field

    This is the url::
    http://74.86.247.218/dvdplay/index.php?m=movie&...
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Prasad's Gravatar
    Prasad
    Thank you for ur response dan i am keeping the present code how ever i will try to adjust the left margin of the menu to be adjusted according to the window resize,....
  • rohit's Gravatar
    rohit
    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 ?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @rohit:

    Forcing to one column is basically against the original purpose of the plug-in--which core feature is to ensure that all the items show on the screen. However, you can play with the minRows, maxRows and targetColumnSize options to probably achieve what you want. Just set the minRows/maxRows to a high value and the targetColumnSize to 1.
  • Ernesto's Gravatar
    Ernesto
    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
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Ernesto,

    If you need the chain, then I'd recommend just making the value of your rel="" attribute the chain. So instead of just "marca h" you'd return "cliente 4:marca h"

    -Dan
  • Delifisek's Gravatar
    Delifisek
    For naviagtional usage

    $("#backend_nav").mcDropdown("#categorymenu" , { select : function() { alert($("#backend_nav").val())} });
  • George's Gravatar
    George
    Hi Dan,

    Trying out your control. I had the same issue as Andrew Rimmer - I want to dynamically add dropdowns to the page - each using the same source UL. I've got it working by setting an attribute on the UL each time the anchor is clicked so I know which one was clicked. I'd be curious to hear feedback. Basically I added 3 lines:

    in $.mcDropDownMenu I added this.id = el.id;

    in open() I added $($list[0]).attr("OpenedMenuID", thismenu.id);

    in the click event I modified: var $ul = $target.parents().filter(function (){ return (this === $list[0] && $($list[0]).attr("OpenedMenuID") == thismenu.id) || (!!$keylist && $keylist[0] === this); });
  • George's Gravatar
    George
    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 G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @George:

    I really don't understand your table cell isssue. One of the core design concepts of the plug-in was to have it calculate its size to so that it stays within the current viewport. So, limiting it to specific dimensions goes against the core concept.

    Also, on your second issue, once again I'm afraid I don't really understand your issue.

    Is there an live example of your problem I can see?
  • George's Gravatar
    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 Benedetto Budiman's Gravatar
    Bellamy Benedetto Budiman
    I've been looking everywhere but couldn't find anything. I was wondering if we could have a default value on this plugin, so that it doesn't start up as a blank input box. Is this possible? Thanks a lot.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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 Benedetto Budiman's Gravatar
    Bellamy Benedetto Budiman
    @Dan:

    I did and tried that earlier as well but for some reason it doesn't work on my end. I also tried redownloading the plugin and modify it on the sample page (by adding a default value to the input box). It doesn't work as well.

    Here's the code I used to initialize the plugin:

            $(document).ready(function (){
                $("#cuisine").mcDropdown("#cuisinemenu",
                    {
                    targetColumnSize: 3,
                    }
                );
                $("#zone").mcDropdown("#zonemenu",
                    {
                    targetColumnSize: 3,
                    }
                );
            });

    And here's the input box I use to attach the plugin:

    <input type="text" name="cuisine" id="cuisine" value="Any Cuisine" />

    <ul id="cuisinemenu" class="mcdropdown_menu">
        <li rel="1">Any Cuisine</li>
        <li rel="2">American (8)</li>
        <li rel="3">Arabic (40)</li>
    </ul>

    and

    <input type="text" name="zone" id="zone" value="Any Zone" />

    <ul id="zonemenu" class="mcdropdown_menu">
        <li rel="1">Any Zone</li>
        <li rel="2">Airport (22)</li>
    </ul>

    Am I missing something? Thanks.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Bellamy:

    The value should be "1" (whatever the "rel" attribute is.)
  • Bellamy Benedetto Budiman's Gravatar
    Bellamy Benedetto Budiman
    @Dan:

    I can't believe I missed something so obvious :D. Thanks a lot! This sure saves me a lot of headaches.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Bellamy:

    No problem--it happens to the best of us!
  • Richard Patt's Gravatar
    Richard Patt
    Has there been any usage of multiple selects with one list? I have 5 different selects that all need to have a different value.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Bellamy Benedetto Budiman's Gravatar
    Bellamy Benedetto Budiman
    Dan, one more thing that I forgot to ask. If I have two different dropdowns in a page, if I click on one, can I make the other one auto-close? Thanks a bunch.
  • Harold's Gravatar
    Harold
    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!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Harold:

    There's no "reset" method, but you can just use the setValue() method to reset the value back to it's original state.
  • Harold's Gravatar
    Harold
    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!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    Yes, it's the only method (although you can probably hide the item via CSS, but I've never tested that to see if it works.)
  • Harold's Gravatar
    Harold
    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's Gravatar
    Harold
    Oops I meant the setValue method is throwing an error. Actually every method throws these same two errors in this usage. Thanks! Harold
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Brian's Gravatar
    Brian
    It looks like there is something up with the way 1.3.x is handling the data store. In dd = $.data(this, "mcDropdown") in the mcdropdown code in the  $.fn.mcDropdown function (around line 27) dd is always undefined so the mcdropdown object always gets created and returned, even if the user is working with an already created object.  I haven't been able to look at it much further that that.
  • Harold's Gravatar
    Harold
    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
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    UPDATE: I finally found the root cause. I was using $(":hidden") to find the hidden input element. Of course this broke as soon as ":hidden" started returning elements not visible in the DOM.

    This can be fixed by changing the line:
    var $hidden = $divInput.find(":hidden");

    to:
    var $hidden = $divInput.find(":input");

    I'll be releasing an update to this today.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    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's Gravatar
    Hasan
    Great Support Dan!
    how can i set a value in the mcDropDown field as page loads. I have its value like "menu:submenu" in session and when document is ready want to assign it to the field
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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's Gravatar
    Hasan
    Thnx! i missed that portion in the thread. Now there's a problem setting value through javascript as:

    $("#category").attr("value","1");
    $("#category").mcDropdown("#list");

    it doesn't work for me that way but if i do it in through input tag like

    <input type="text" name="category" id="category" value="1"/>
    It worked.

    What m i missing?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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's Gravatar
    Lembit
    I need to enhance the delimiter in the display string with some html by inserting in line 228 of jquery.mcdropdown.js and modifying the css so that it does not confine to one line
    <code>
    name=name.replace(/:/, "\<br \>");
    </code>
    but it is escaping the < & > to &lt; and &gt;

    How can I stop it doing that escaping?
    Thank you
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Harold Kyle's Gravatar
    Harold Kyle
    I was banging my head on a wall trying to get the arrows in my dropdown menus to appear earlier. Then I realized that they're CSS sprites and these background images only load after ALL other images on the page are loaded. On my page, with 200 thumbnails, this took a long time. Instead, I'm inserting images with jQuery at $(document).ready(), which is often several seconds before the page fully loads. I understand that CSS sprites are preferable in most situations, but I wanted to share this in case anyone else needs to make the dropdown menus accessible before the page loads fully. Here's the code that I put in the $(document).ready() function to insert the down arrow sooner and allow for an image swap hover event:
        $(".mcdropdown a").append('<img src="'/images/down.gif"/>').hover(function(){
            $(this).children().attr("src","/images/down-hover.gif");
        },function() {
            $(this).children().attr("src","/images/down.gif");
        });
    I removed the background images from the mcdropdown css, too, of course. I hope this saves someone time!
  • Matt Damon's Gravatar
    Matt Damon
    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.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Matt:

    You can't map the same UL list to multiple inputs. You need a 1-to-1 relationship.
  • Matt Damon's Gravatar
    Matt Damon
    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...
  • Jeremy Isett's Gravatar
    Jeremy Isett
    Responding to this post from a while back:

    Dan, one more thing that I forgot to ask. If I have two different dropdowns in a page, if I click on one, can I make the other one auto-close? Thanks a bunch.
    Bellamy Benedetto Budiman - May 11, 2009

    I came up with the code below to close other instances of the dropdown.

    notes:

    This runs inside a PHP script so the $dom_id is a number that changes with each instance of a dropdown being displayed.

    I use the dropdowns like a jump menu

    view this code in-action: http://newroutes.org/blog

    I welcome any advice on improving the code; I'm a novice at javascript.

    $(function(){
     //first create the dropdown
     $('#taxonomy-dropdown-" . $dom_id . "').mcDropdown('.view-dom-id-" . $dom_id ." ul', {
      maxRows: 50,
      click: function(e){window.location=$(this).attr('rel')},
      select: function(e, t){
       var selected = mc" . $dom_id . ".getValue();
       window.location=selected[0];
      }
     });
     var mc" . $dom_id . " = $('#taxonomy-dropdown-" . $dom_id . "').mcDropdown();
     //for each click on the dropdown arrow close other opened menus
     $('.view-dom-id-" . $dom_id ." a').click(function (e){
      $('.mcdropdown-open:not(#taxonomy-dropdown-" . $dom_id . ")').each(function() {
        var openedMenuID = $(this).attr('id').split('-');
        var openmc = $('#taxonomy-dropdown-'+openedMenuID[2]).mcDropdown();
        openmc.closeMenu();
        $('#taxonomy-dropdown-'+openedMenuID[2]).removeClass('mcdropdown-open');
        delete openedMenuID;
        delete openmc;
      })
      //add class to detect the open menu
      $('#taxonomy-dropdown-" . $dom_id . "').addClass('mcdropdown-open');
     });
    });
  • David Wainwright's Gravatar
    David Wainwright
    Thanks for creating this plugin - it's excellent. I've found a strange bug in the drop down though. If you enclose the input in a span or div with float:left as a style, when you click on it, it disappears.
  • MB34's Gravatar
    MB34
    Was wiondering if anyone is moitoring the jQuery forums? I have posted several questions concerning this plugin and nobody has replied.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @MB34:

    I used to monitor the mailing lists, but since moving to their forums I found it just took too much time. So, I rarely look at the forums anymore.
  • Asad Kamran's Gravatar
    Asad Kamran
    I am using this plug in, its awesome, but in right to left(rtl) languages, like Arabic, Hebrew etc, 2nd column overlap first column.

    I can show only image, as actual page need authentication.

    http://www.emaratia.com/mcDrpdownProblem.bmp

    In red marked area, 2 <li> are at the same position,

    I tried to fix this issue using css,

    i specify direction:rtl in css, also, try to fix by editing js file, where position is calculated, but unable to resolve,

    Thanks in advance!
  • Matt's Gravatar
    Matt
    Dan,

    Just wanted to let you know that it would really be handy if we could have support for multiple dropdowns utilizing the same menu. I know this has come up a few times already in this thread of comments, but just throwing it out there.

    In my specific application, the purpose is for configuring multiple categories for a product feed whose new values come from the same source (same menu). The page, however, takes a serious performance hit iterating unique ID-ed menus for each category that utilizes the mcdropdown.

    Dumping the same list in the source code 50-100 times is very inefficient and I'm no jQuery expert to begin to know where to start in patching your script.

    +1 for the multiple dropdown same menu feature request
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Matt:

    Sorry for the delay in responding.

    At this point, I don't see this feature being anything we work on any time soon. This isn't something we currently need and the overhead of adding support to the current code base is prohibitive of us adding it in.

    The only way to add this to the current implementation would be to clone the original list, however in my testing the cloning adding significant overhead for our needs. It was adding 300-500ms (sometimes more) to the initialization in many of our use cases and it just wasn't worth the overhead for something we didn't need. (NOTE: This testing was done during original development, which was at the time of jQuery 1.2.)

    So, since we don't actually need the feature and the most important factor to us was quick initialization, unless we re-write the plug-in this will most likely not make it into the current source code.

    I know it's not what you wanted to hear, but wanted to give you some feedback on the request. I'm not saying it won't ever have it, but I don't forsee it being added anytime soon.
  • Matt's Gravatar
    Matt
    Disregard, I think I found an alternate RIA solution. Thanks anyways.
  • Jeff's Gravatar
    Jeff
    Kudo's to George (above) for his 3 line multiple dropdown, single unordered list suggested changes. They work like a champ!
  • Bruce Sauls's Gravatar
    Bruce Sauls
    Dan: I have an implementation of McDropdown where everything works fine except that if you hit the back button after a submit, the value (number) shows in the text box rather than the string of the list item. If I refresh the page, the string displays correctly. The html code for the text input is
    <input type="text" name="genre_id" id="genre_id" class="lft" tabindex="0" value="<?php echo set_value('genre_id',$res_app->genre_id); ?>" />

    the javascript is:
        $(document).ready(function (){
            $("#current_rev").html("v"+$.mcDropdown.version);
            $("#genre_id").mcDropdown("#genre_list",{valueAttr: "title", allowParentSelect:true});
    });

    on initial page load and on selection the display is fine. Can you suggest a solution?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Bruce:

    1) Are you using the most recent version?

    2) What text shows when the back button is pressed, the original value or last selected value?

    3) What version of jQuery are you using?

    If you set up an example showing the problem I'll gladly take a look at it.

    NOTE: You can use a site like http://jsfiddle.net/ for setting up an example use case.
  • mccico's Gravatar
    mccico
    I would like to ask: i need change categories to differents categories but i don`t refresh page. I want change it using select box. I need something like destroy mcdropDonwn object and create another with different categories, but i don1t know how to do it.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @mccico:

    There's currently no method for destroying an instance of the plug-in or changing the options. I'd like to eventually re-write the plug-in for v2 and will add functionality like destroy, changing the options, ect. I have no idea when this re-write might take place.

    For now, you'll have to roll out your own solution.
  • Agel's Gravatar
    Agel
    Hello
    I want to use Ajax to send "rel" parameter as post query for PHP file. but i can't activate .change() on jquery for the hidden field, which store this parameter "rel"
    Please, help!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    You can use the "select" callback to trigger your AJAX action. That callback option is triggered every time a user selects a menu option in your dropdown.
  • Bhavesh's Gravatar
    Bhavesh
    First of all I think this an excellent UI. I just have one issue and have no idea how to handle it. It's most likely not an issue with mcdropdown, but my lack of JS knowledge. Any help is appreciated.

    This is how I am making a call to mcDropDown to create the menu

    <script type="text/javascript">
        $(document).ready(function () {
          $("#current_rev").html("v" + $.mcDropdown.version);
          $("#category").mcDropdown("#categorymenu",{
            select: function (value, name) {
              if ($("[rel=" + value + "]").attr("rel") != "undefined") {
              window.location = "default.aspx?id=" + $("[rel=" + value + "]").attr("rel");
              }
            }
          });
        });
      </script>

    What I am doing is if someone clicks on a menu item, they are redirected to to default.aspx?id=xxx xxx is rel value

    When the page is loaded, I would like mcDropdown to start with have the selected value to be whats id= from the previous redirect.

    Any ideas.

    Thanks in advance
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Bhavesh:

    See the previous comments about the default value:
    http://blog.pengoworks.com/index.cfm/2008/6/26/mcD...
  • Francesco's Gravatar
    Francesco
    Hi! i've started using this beautiful plugin, however i've noticed a problem regarding JQuery >= 1.6 and Chrome

    When i go in a item list with a sub-menu, If the height of the submenu is higher than the main list, the last part of sub-menu is not visible (it seems hidden after the main widget)

    This happends only with Chrome and using JQuery >= 1.6

    I think it could be a bug because if i try to change the JQ library in "gettingstarted.html" from 1.2 to 1.6, with 1.2 all works correcty, with 1.6 no.

    you can see the problem in the Example at mid-page when you select "Entertainment" (a part of sub-menu is hidden)

    Any idea on how i could solve the problem? Thanks!
  • BSwitzer's Gravatar
    BSwitzer
    I am currently looking at using your plugin to replace a cascading drop down control I built in .NET. I like your control, because the user only needs one click and it doesn't have to keep going back to the server.  The hierarchies I use frequently have "Other" options on them. A corresponding text box is provided with the Other option. I was looking into incorporating that with your plugin, but I am stuck where I could insert it. I also thought about keeping it separate and only showing it if an Other option is clicked from McDropdown.  Any information is appreciated.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @BSwitzer:

    You could certain look at adding an "Other" option and then use the "select" callback to show/hide an additional field for user input.

    However, I'd probably just look into using something like the Select2 jQuery plug-in instead--which is an autocomplete plugin and just let the users type in their options.

    PS - Nice last name by the way! ;)
  • BSwitzer's Gravatar
    BSwitzer
    Thanks for the info Dan. I looked at Select2 in my process of replacing the cascading drop down, but the data hierarchies can sometimes go several layers down(its currently at 7 for one selection), so I wasn't sure it would look great. I will look at the select callback to see how it works.

    @PS - You too. Curious, do you pronounce yours like Sw-it-zer or like Sw -eye-tzer? Mine is like Sw-it-zer, just like the Oklahoma coach Barry (no relation).
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @BSwitzer:

    I pronounced it the same way you do (like Switzerland and Barry Switzer.) Not like "Schweitzer".
  • fawad's Gravatar
    fawad
    Respected Sir,
      my mcdropdown shows all the items perfectly but the method dd.setValue() or getValue() doesnot working.means while i run the page it show dd.setValue() is not a function in Firebug..

    Note :I have added all the libraries that is required but still getting error in firebug with dd.setValue is not a function

Comments for this entry have been disabled.