how to expand select drop down list on focus

Hi,

What I would like is to have a drop down list with entries that are no more than 3-4 characters (XYZ), when you put focus on the dropdown, it then expands to display a description or content, when you mouse click  or tab off (loose focus) the drop down then displays the 3-4 characters that was displayed before.

Thanks
PdesignzPPC SpecialistAsked:
Who is Participating?
 
abelCommented:
Maybe this is what you need. I found a ready made function for you that transforms a dropdown list into a beautiful custom dropdown. You can do two things with that, either you use that script, or you use the resulting DHTML. If you use the script you have the benefits of still being able to use a normal dropdown in your code and you don't have to code around it, while still having the beauty of a custom dropdown.

http://www.javascriptkit.com/script/script2/dhtmlcombo.shtml

The elements generated can listen to mouseover events and you can code for them however and whatever you like, to make the list as dynamic as you wish. Hope this is about what you were looking for.

-- Abel --
0
 
abelCommented:
You can do many dynamic things with Javascript and/or CSS+HTML, but the dropdownbox has always been the most handicapped child in the family. What you would need is something to fill the box on the moment somebody clicks on it. This is not possible because that would close the dropdown, making the user clicking again.

A possible solution would be, if it weren't for IE, to use two objects: one to cover the dropdownbox, a simple DIV would do, and when the user click you would show the whole list by making it visible. Unfortunately, MS IE does not allow content on top of a dropdown box (it will always shine through).

Another solution would be to have the list populated already but to make the selected choice unselectable (but you do show it). The other selections would then show in full. This is of course a nasty half breed solution.

Is there nothing you can do? Well, actually there is. Many (ajax/js) libraries contain custom listboxes and dropdown boxes. They mimic the behavior and as such give you a much wider control to it. One such is part of the ajax dotnet library. If you want to go that path, it is more work, but the result gives you more control. It is handy if you have some knowledge of AJAX though.

-- Abel --
0
 
PdesignzPPC SpecialistAuthor Commented:
rather than a drop down then since as you say ie has problems with it. Could this be done with say a text box or any other item that could resemble the functionality of a drop down or maybe even a hidden div, so that wen you click in the text box the div would appear.... or something to that effect.

Thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
abelCommented:
Look up some examples of the DropDownExtender (here's a very simple and not so pretty example: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DropDown/DropDown.aspx). It "extends" the functionality of a panel (or a div or whatever) and a label. These two are used for creating the dropdown functionality. it is really quite easy:

<ajax:DropDownExtender ID="ddeMyDropdownExtender" runat="server"
        TargetControlID="lblMyLabel"
        DropDownControlID="pnlMyPanelWithDropDownData" />

Download the library, it will also give you a lot power in other areas you may have been struggling with currently. It's a joy to work with (apart from some apparent bugs, of course...)
0
 
PdesignzPPC SpecialistAuthor Commented:
I belive the ajax control toolkit is only for asp.net, I am currently working with classic asp, not asp..net
0
 
abelCommented:
Ah, that's a pity, I didn't notice. Yes, you are right. Then we're back at the beginning. You'll need a javascript library then, something like scriptaculous, but I can't remember from the top of my head which of them contained a dropdown object. It does mean that you will have to do quite a bit more yourself, though. I'll look around for something suitable.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.