G
garey
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>
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>