Solved

Are breaks permitted on drop down menus?

Posted on 2002-05-06
5
168 Views
Last Modified: 2010-04-09
can a menu item be on two lines. menu seems to extend to the length of the widest menu element. so that takes up alot of room.. can we break an element on two lines?  if so, then how?
also, can we set a width of the menu so that it doesn't strech out.  only the elements strech out.
0
Comment
Question by:qudoos
5 Comments
 
LVL 33

Accepted Solution

by:
knightEknight earned 75 total points
ID: 6992061
You could create two options with broken text, but with the same "value", so that either one that is selected will result in the same thing.  Like this:

<SELECT>
  <OPTION value='1'>This would be</option>
  <OPTION value='1'>_______the number one</option>
  <OPTION value='2'>This would be</option>
  <OPTION value='2'>_______the number two</option>
</select>

if either the first or second option is selected, the server will see "1"

will also work with text:

  <OPTION value='This would be the number 1'>This would be</option>
  <OPTION value='This would be the number 1'>____the number one</option>

0
 
LVL 19

Expert Comment

by:webwoman
ID: 6992110
knightEknight's way is the only way you can do it that is cross-browser compatible, doesn't require a ton of scripting, specially constructed elements, and lots and lots of layers.

And in my mind, the path of least resistance (and easiest updating later on) is normally the best one. ;-)

Unless you really have some reason for using layers and lots of scripting to accomplish the same thing... sometimes the client requests it, sometimes you just want to see if it can be done. I can understand that. If so, somebody else probably has some tips. But it won't be easy... ;-)
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 6993297
perhaps you could consider using a <select multiple> and then add some javascript that will automatically select both lines if you select 1 of them...

alternativelyas previously suggestes, there are a number of freely downloadable dhtml versions of dropdown boxes.

for example, check out
http://webfx.eae.net

Good luck
S.
0
 
LVL 1

Author Comment

by:qudoos
ID: 6993920
Thank you for your reply.  I had this in mind too but I guess there is no way of highlighting both lines at the same time so that the user doesn't get confused.
Is there any way so that the menu is a fixed width and doesn't strech out to the widest element?

Thank you for your answer and I'll be using it.
q
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7008918
<HTML>
<HEAD>
<SCRIPT language='javascript'>

 function selectAllWIthCurrentValue(theSelect)
 {
   var sValue = theSelect.options[theSelect.selectedIndex].value;

   for ( var i=0,n=theSelect.options.length; i<n; i++ )
     if ( theSelect.options[i].value == sValue )
        theSelect.options[i].selected = true;
 }

</script>
</head>

<BODY>

<FORM name='myform'  >
<SELECT  multiple size='5'  onChange='selectAllWIthCurrentValue(this);'>
 <OPTION value='1'>This would be</option>
 <OPTION value='1'> &nbsp; the number one</option>
 <OPTION value='2'>This would be</option>
 <OPTION value='2'> &nbsp; the number two</option>
 <OPTION value='3'>This would be</option>
 <OPTION value='3'> &nbsp; the number three</option>
 <OPTION value='4'>This would be</option>
 <OPTION value='4'> &nbsp; the number four</option>
 <OPTION value='5'>This would be</option>
 <OPTION value='5'> &nbsp; the number five</option>
</select>
</form>

</body>
</html>
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

785 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