New version of my jQuery plugin jGD DropDown is here and it brings several new features, bug fixes and more examples for plugin use. There are more interesting features planned for future versions (including checkboxes for elements), but I don’t have too much time to work on it.
Flags example
New version add several new settings (on plugin documentation page) that allow you to set title for the drop down when it’s displayed for the first time, and option to add additional class for the selected element in the drop down. There is a new option to copy class from selected element to top level selection title element. One of the new examples in displayed on the right, styles changed to add country flags for elements in the drop down.
Also, there are few more changes contributed by Weston Shaw from Avallo Multimedia and Creative Services: using existing class and style from select control to individual elements in the drop down. This will allow you to style SELECT you are converting to drop down and drop down will use it’s styling on own elements. He also proposed some other changes, and once that has been reviewed and cleared it will be included in next release.
New selected class can be used to hide element selected from the main list. Once you select another element, that one will be hidden, and previously hidden will appear. Check out examples to see that in action. For all examples, I added IE specific stylesheet file with some minor styling changes for IE browsers. You might not need that, depending on your own styles.
If you notice any problems with the plugin or you have a suggestion leave a comment here or in the forum.
Homepage:
http://www.dev4press.com/jquery/jgd-dropdown/
Examples:
http://www.dev4press.com/jgd/dropdown/
Yes, please tell us.Waiting for some time now.
Is there a...
will a stable version 2.0 ever be published? really appreciate...
Great article and one of best tutorials I have read...
would version 2 support using a CDN for say the...
Comment Link
One thing that is missing is making the dropdowns hide other open dropdowns (so that they don’t overlap each other. I added this to the click() function to fix it:
$(“dd ul”).not(“#” + $id + ” dd ul”).hide();
Comment Link
Thanks, I will add this to next version.
Comment Link
I also just discovered that it’s completely broken in IE6+7 – the UL containing the dropdown options appears behind any elements after it in the source. You’ve got z-index set in there, but it doesn’t fix it in IE.
Comment Link
I will check it out.
Comment Link
Well, it works fine in all browsers. Problem with my demo page is that I use SyntaxHighlighter plugin that is causing strange behavior that not even bgIFrame can fix. Highlight code is injected into page, that even the IE debugged can’t find it. I have no idea why that happens.
Comment Link
It’s not working on my current project – probably a similar thing, as I’m using another jQuery plugin to adapt dropdowns and labels.
Comment Link
I will add bgIFrame support (even so, it’s not solving problem on my demo with syntax boxes), and will try out to get help for highlighter plugin on their forum.
Comment Link
I have long list (around 200 items). How I can add scroller with 7 countries (as example)?
Comment Link
Using the CSS to limit height of the list.