?
Solved

how to expand select drop down list on focus

Posted on 2009-02-18
6
Medium Priority
?
2,684 Views
Last Modified: 2012-05-06
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
0
Comment
Question by:Pdesignz
  • 4
  • 2
6 Comments
 
LVL 39

Expert Comment

by:abel
ID: 23674673
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
 

Author Comment

by:Pdesignz
ID: 23675176
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
 
LVL 39

Expert Comment

by:abel
ID: 23675877
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:Pdesignz
ID: 23676015
I belive the ajax control toolkit is only for asp.net, I am currently working with classic asp, not asp..net
0
 
LVL 39

Expert Comment

by:abel
ID: 23676566
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
 
LVL 39

Accepted Solution

by:
abel earned 2000 total points
ID: 23679222
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question