Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Script works in Firefox and Chrome, but not in IE7 (http://www.velocityreviews.com/forums/t938523-script-works-in-firefox-and-chrome-but-not-in-ie7.html)

garey 04-29-2009 07:00 PM

Script works in Firefox and Chrome, but not in IE7
 
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>


Thomas 'PointedEars' Lahn 04-29-2009 11:10 PM

Re: Script works in Firefox and Chrome, but not in IE7
 
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


All times are GMT. The time now is 03:07 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.