SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    malaysia
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using <select><option></option></select>

    if I using <select> in a page... if the text inseide the option:
    <select>
    <option>text</option>
    </select>

    is a lot of word, the size of combo box will be very long. The apperance become very ugly. Can I use other method to do it? Like after I click the combo box then the display value is long but not affect the combo boz first appearance?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try

    style="width:100px;" inthe select tags

    then add an onclick event

    onclick="javascript:this.style.width='200px';"

    onblur="javascript:this.style.width='100px';"

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried it (on Win2k). Opera 7.51 and IE 6.0 both close the Select when its width is changed. On Mozilla 1.7.2 the technique is not needed - it does it itself.

    So I thought I'd put a mouseover (or mousemove) listener on each Option and display its text on the status bar. Opera and IE don't seem to support those events for Option elements - but it did work in Moz.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I was dreaming... now Opera is doing something different. The single-line part of the control which is initially visible does get resized, and the control doesn't close - but the drop-down part does not resize.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried this in IE and Moz
    and it works (needs two clicks to open a double blur to resize down )


    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    </
    head>

    <
    body>
    <
    select name="fred" size="1" style="width:100px;" onclick="this.style.width='200px';" onblur="this.style.width='100px';" >
    <
    option value="dddddd">ddd</option>
    </
    select>
    </
    body>

    </
    html
    but could do better using

    http://www.vicsjavascripts.org.uk/Fa...FakeSelect.htm

    could soon modify to change width as reqd

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa. These:
    onclick="javascript:this.style.width='200px';"

    onblur="javascript:this.style.width='100px';"
    can never be correct. Is that to make sure the browser doesn't read those lines as ASP? PHP? C++? FORTRAN? COBOL?

    eval() and javascript: are rarely, if ever, appropriate.
    Last edited by 7stud; Mar 29, 2005 at 21:43.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    malaysia
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, I found that the result is not so good, can I have a better way? coz when I using the code:
    <select name="fred" size="1" style="width:100px;" onclick="this.style.width='200px';" onblur="this.style.width='100px';" >
    <option value="dddddd">ddd</option>
    </select>
    It cannot run porperly, sometimes can but sometimes cannot be work.

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All I can suggest then is

    http://www.vicsjavascripts.org.uk/Fa...FakeSelect.htm

    I have just updated it for long words but may still need more work as it is quite new

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    malaysia
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The one you suggest is not really I want. The <select> frame still will be bigger when i mouse over it. and it will not a drop-down list. Got any other method? Thank for your Help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •