Script works in Firefox and Chrome, but not in IE7

Discussion in 'Javascript' started by garey, Apr 29, 2009.

  1. garey

    garey Guest

    Hi - I am trying to present a large number of options in user-friendly
    and accessible way. The options are for languages to try a search in.
    So I conceived of the scheme of moving in or out of the page a set of
    alphabet buttons. Each button moves in a select with the languages in
    that letter. I keep everything absolutely positioned at -9999ems when
    it is off screen, and switch it to static positioning when it is on.
    This allows it to be picked up by readers.

    The scheme works in Firefox and Chrome. In IE7, moving in and out
    the alphabet buttons works, but the buttons don't move in their
    respective select, despite the move in being done by the same code. I
    have tried treating it as a 'layout' problem, but that doesn't seem to
    work. I boiled the problem down and present it below.

    Any help appreciated;

    Garey Mills



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

    <html>
    <head>

    <style type="text/css">
    div.extraout { position: absolute; left: -9999em; }
    </style>

    <!--[if lte IE 6]>
    <style type="text/css">

    div.extraout { position: absolute; left: -9999em; height: 1px; }

    </style>
    <![endif]-->
    <!--[if IE 7]>
    <style type="text/css">

    div.extraout { position: absolute; left: -9999em; zoom: 1; }

    </style>
    <![endif]-->

    <script type="text/javascript">

    function ucbmoveIn(name) {

    var elem = document.getElementById(name);
    elem.style.position = "static";
    }

    function ucbmoveOut(name) {

    var elem = document.getElementById(name);
    elem.style.position = "absolute";
    }

    </script>

    </head>

    <body>

    <button name="more" value="more" onClick='ucbmoveIn("l");return
    false;'>More</button>

    <div class="extraout" id="l">
    <button name="a" value="a" onClick='ucbmoveIn("a");return false;'>A</
    button>
    <button name="less" value="less" onClick='ucbmoveOut("l");return
    false;'>Hide</button>
    </div>

    <div class="extraout" id="a">
    As

    <select name="lA" id="lA" size="10" multiple="multiple">
    <option value="ach">acholi</option>
    <option value="ada">adangme</option>
    <option value="afh">afrihili</option>
    </select>

    <button name="hideAs" value="hideAs" onClick='ucbmoveOut("a");return
    false;'>Hide</button>
    </div>

    </body>
    </html>
     
    garey, Apr 29, 2009
    #1
    1. Advertising

  2. garey wrote:
    > Hi - I am trying to present a large number of options in user-friendly
    > and accessible way. The options are for languages to try a search in.


    This is a textbook example for a `select' control. You don't want or need
    any script here.

    > So I conceived of the scheme of moving in or out of the page a set of
    > alphabet buttons.


    User agents designed with accessibility in mind would provide the user with
    the possibility to simply enter the first character of the item in the list
    in order to select it. Incidentally, that is what Gecko-based, MSHTML-based,
    Opera-based and WebKit-based UAs do (so practically all browsers with a
    relevant market share nowadays). Whereas IIRC all except MSHTML-based
    provide the additional feature of word search, that is, you can enter a
    second, third aso. character in quick succession in order to specify the
    item to be selected.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Apr 30, 2009
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Aidan
    Replies:
    4
    Views:
    520
    Neredbojias
    Jun 7, 2007
  2. APA
    Replies:
    0
    Views:
    1,320
  3. Steve Wright

    AJAX works in IE6 but not IE7 or Firefox

    Steve Wright, Mar 13, 2007, in forum: Javascript
    Replies:
    5
    Views:
    169
    Bart Lateur
    Mar 15, 2007
  4. garey
    Replies:
    19
    Views:
    252
    David Mark
    May 7, 2009
  5. 123Jim
    Replies:
    6
    Views:
    200
    123Jim
    May 8, 2011
Loading...

Share This Page