IWETHEY v. 0.3.0 | TODO
1,095 registered users | 0 active users | 0 LpH | Statistics
Login | Create New User
IWETHEY Banner

Welcome to IWETHEY!

New Finding the Select width from JavaScript
I've got a bunch of drop down selection lists that I need to prevent from going off the end of the HTML page. As it stands, I can either let the system set the width based on the option with the maximum string length. Or I can set it to a fixed width. What I really want is to let the system set the width, but not allow it to go beyond a maximum width. Unfortunately, I can't seem to find a way to measure how wide the html lays out the selection gadget. Here's a snippet to demonstrate the problem (the alert returns no length):
<html>
<head><title>Test</title></head>
<body>
<form id='TestForm' name='TestForm'>
<select id='TestList' name='TestList'>
<option value='1'>Test Me #1</option>
<option value='2'>Test Me #2 - a long one</option>
</select>
</form>
</body>
<script>
alert(document.getElementById("TestList").style.width);
</script>
</html>
New Try clientWidth instead
It'll cut off the long item in the drop down, but this seems to work:
(Well, in IE 6.0 it cuts it off. In Firefox .8, it creates the control at 100 wide, but sizes the drop down list to fit the longest item, and clientWidth returns that width, not the set width. So who is right? Ugh.)
\n<html>\n  <head><title>Test</title></head>\n  <body>\n    <form id='TestForm' name='TestForm'>\n      <select id='TestList' name='TestList'>\n        <option value='1'>Test Me #1</option>\n        <option value='2'>Test Me #2 - a long one</option>\n      </select>\n    </form>\n  </body>\n  <script>\n    document.getElementById("TestList").style.width = 100;\n    alert(document.getElementById("TestList").clientWidth);\n  </script>\n</html>\n
--
Chris Altmann
Expand Edited by altmann Feb. 29, 2004, 05:07:44 AM EST
Expand Edited by altmann Feb. 29, 2004, 05:19:56 AM EST
New or currentStyle and GetComputedStyle
And then suddenly it's 3:30 in the morning and you can't let go of the problem and come up with this:
\n<html>\n\t<head>\n\t\t<title>Test</title></head><body>\n\t\t<form id='TestForm' name='TestForm'>\n\t\t\t<select id='TestList' name='TestList'>\n\t\t\t\t<option value='1'>Test Me #1</option>\n\t\t\t\t<option value='2'>Test Me #2 - a long one</option>\n\t\t\t</select>\n\t\t</form>\n\t</body>\n\t<script>\n\t\tfunction displayWidths(desc, tlst) {\n\t\t\tisIE = document.all;\n\t\t\tif(isIE) {\n\t\t\t\ttlst_cs_width = tlst.currentStyle.width;\n\t\t\n\t\t\t} else {\n\t\t\t\ttlst_comp_width = document.defaultView.getComputedStyle(tlst, '').getPropertyValue("width");\n\t\t\t}\n\t\t\t\n\t\t\tresults = desc + "\\n" +\n\t\t\t\t\t"clientWidth = " + tlst.clientWidth + "\\n" +\n\t\t\t\t\t"style.width = " + tlst.style.width + "\\n";\n\t\t\tif(isIE) {\n\t\t\t\tresults += "currentStyle.width = " + tlst_cs_width + "\\n"; \n\t\t\t} else {\n\t\t\t\tresults += "ComputedStyle Width = " + tlst_comp_width + "\\n";\n\t\t\t}\n\t\t\talert(results);\n\t\t\treturn;\n\t\t}\n\t\t\t\t\n\t\ttlst = document.getElementById("TestList");\n\t\tdisplayWidths("Before", tlst);\n    \t        tlst.style.width = 100;\n\t\tdisplayWidths("Set to 100", tlst);\n\t</script>\n</html>\n

Apparently currentStyle (IE) and getComputedStyle (DOM) are the way to get style info that wasn't set inline. I'm not sure why Moz returns a shorter value than IE.

--
Chris Altmann
New Thank ye kind sir
That one's been nagging on me. Appreciate the help!
     Finding the Select width from JavaScript - (ChrisR) - (3)
         Try clientWidth instead - (altmann) - (2)
             or currentStyle and GetComputedStyle - (altmann) - (1)
                 Thank ye kind sir - (ChrisR)

PDF the sucker to me. Prepaid.
77 ms