SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML drop down menu

    Hi there,

    Hope all is well.

    I've create the following drop down menu. It works fine, except some of the items are quite long and are not displaying in full, when the menu is dropped down. The problem is that, the bit that is initially displayed before you drop down the menu can not be enlargened, because it is a finite area. What I am effectively looking to do is to ensure that the item is fully displayed.

    Thanks

    <form name="formone" >
    <p>
    <select id="jump-button">
    <option selected="selected">Item 1</option>
    <option value="link">Item ABCDEF GHIJKLM</option>
    <option value="link">Item ABCDEF GHIJKLM</option>
    <option value="link">Item ABCDEF GHIJKLM</option>
    <option value="link">Item ABCDEF GHIJKLM</option>
    <option value="link">Item ABCDEF GHIJKLM</option>
    <option value="link">Item ABCDEF GHIJKLM</option>
    <option value="link">Item ABCDEF GHIJKLM</option>
    </select>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you'll have to use javascript for this. Something like this:
    Code:
    window.onload = function () {
      document.getElementById('jump-button').onchange = function() {
          if (this.option.value === 'link') {
            this.style.width = '5em';
         }
      }
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Raffles,

    How are you ? Hope you are well.

    Does this solution make the button inaccessible. I've create a a go button, which directs the person to the relevant link, so that the button is accessible.

    Thanks

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, it should push the go button towards the right, unless you're using absolute positioning.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Raffles,

    thanks for the response, I am not using absolute positioning. But what I meant was, doesn't extra javascript make a webpage inaccessible.

    Cheers

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you do it properly, it's equally accessible but less pretty. In this case, accessibility-wise you should allow the select box to be as wide as the widest option and not play about with its width. However, what you can do is make it wide and then make it shorter with javascript and then when it's clicked, it gets wider again. People with JS turned off will just see the wide select box all the time.
    Code:
    window.onload = function () {
      document.getElementById('jump-button').style.width = '3em';
      document.getElementById('jump-button').onchange = function() {
          if (this.option.value === 'link') {
            this.style.width = '5em';
         }
      }
    }
    In your CSS, you make the select box have a width of 5em. When the page has loaded, your javascript makes it shorter (to 3em). When it's clicked, it goes back to 5em.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks raffles - really appreciate your help. Hope you have a merry xmas and a happy new year


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
  •