SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Drop down form menu ideas help

    I have your average basic drop down menu.

    I have two questions:

    1. Every drop down menu shows the first option on top and when clicked reveals the other options. Well, I don't like the old ugly box that is shown for a drop down menu. In the web program I am developing I need it to only display the text and not the box with the arrow. Does anyone know how this is possible?

    I have already used a script that takes the opacity to 0 and doesn't show anything. The only problem is that I need it to show the text or something atleast for the people to see to click. In my case I just want the text and have that text able to pull down the drop down menu.

    2. I actually want them to be able to mouseover the the specified text and have it bring up the drop down menu. So instead of click, I want mouseover.

    I will GREATLY appreciate any help or direction with these 2 simple html form ideas.

    Thank you!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,677
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The select element has an attribute called multiple, that shows the entire contents as a listbox instead of as a single line dropdown list.

    Code html4strict:
    <select name="mySelect" multiple="multiple">
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>

    Anything else isn't supported by HTML for select elements and would require a custom script that generates the list of options for you.

    How about if you start with a normal select box (for people without javascript) then use javascript to convert it to a single line, reverting to the multiple select on mouseover.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Location
    Utah
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much! This will help a bit with the mouseover.

    Quote Originally Posted by pmw57 View Post
    How about if you start with a normal select box (for people without javascript) then use javascript to convert it to a single line, reverting to the multiple select on mouseover.
    Do you have an example of a script that would change between the two?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,677
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    What I have is quite rough and needs some tweaking, but the basic idea is there.

    Code javascript:
    var form = document.getElementById('myForm');
    var select = form.elements.myElement;
    var input = document.createElement('input');
    input.value = select.options[0].value;
    input.name = select.name;
    input.select = select;
    input.onmouseover = showSelect;
    select.name = null;
    select.className = 'hidden';
    select.input = input;
    select.onmouseout = hideSelect;
    select.parentNode.insertBefore(input, select);
    function showSelect() {
        var input = this;
        var select = input.select;
        select.multiple = 'multiple';
        input.className = 'hidden';
        select.className = '';
    }
    function hideSelect() {
        var select = this;
        var input = select.input;
        select.className = 'hidden';
        input.className = '';
    }

    Hopefully I'll be able to get back to this at some time tomorrow
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •