PDA

View Full Version : Dynamic Width Change of Listbox/Combobox



Zman771
05-08-2006, 05:05 PM
Does anyone know of any javascript code that will allow you to dyamically change the width of a listbox/combobox? I'm really looking for something that will allow me to use the mouse to resize the combobox (i.e. drag the width). Thanks.

jscheuer1
05-09-2006, 08:47 AM
Using this library:

http://www.walterzorn.com/scripts/wz_dragdrop.zip

from:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

With this markup:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<form action="">
<div id="name2" style="width:75px;height:75px;position:absolute;border:7px solid green;"><select style="width:100%;height:100%;" size="2" name="bob">
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
</select></div>
</form>
<script type="text/javascript">
<!--

SET_DHTML("name2"+RESIZABLE+HORIZONTAL+VERTICAL);

//-->
</script>
</body>
</html>

Works fairly well, you need to hit shift, then left click on the border to resize it.

Zman771
05-09-2006, 07:32 PM
This is great except that it is not a combobox/dropdown box. How do I fix this?
thanks.

jscheuer1
05-09-2006, 08:28 PM
What is a combobox/dropdown box? I thought it was a select, so that is what I used. Perhaps you want a different sort of select type, you can remove the size attribute, that will make it more of a drop down but, makes resizing it in the vertical dimension rather pointless. Let me know more specifically and I will see about adapting it.

Zman771
05-10-2006, 03:10 PM
The size fix worked. Thanks.
Is there any way to disable the vertical size chage? Also, can the behavior be changed so that you don't have to hold the shift key to resize?

jscheuer1
05-10-2006, 06:46 PM
To limit the vertical resizing use something like so:


SET_DHTML("name2"+RESIZABLE+HORIZONTAL+VERTICAL+MAXHEIGHT+30+MINHEIGHT+30);

for your call, 30 is the number of pixels. At the same time, set the height of the container division at or slightly below this amount:


<div id="name2" style="width:75px;height:30px;position:absolute;border:7px solid green;">

To eliminate the need for the ctrl or shift keys, edit the external script file. Find this line:


this.modifKey = this.e.modifiers? this.e.modifiers&Event.SHIFT_MASK : (this.e.shiftKey || false);

Change it to:


this.modifKey = true //this.e.modifiers? this.e.modifiers&Event.SHIFT_MASK : (this.e.shiftKey || false);