G
garey
Hi -
I am trying to write some Javascript that will move both buttons
and selects from far left of the viewport into and out of the
viewport. I present a button that moves in another button. The second
button moves in a select.
All of this works in Firefox. Moving the button in and out works
in IE7, but moving in the select does not, despite the exact same code
being used in both cases. The code is below. Note that I added the
"min-height: 0" style statement to the style because I thought that
this might be a Microsoft "layout" problem, but setting min-height
did not affect the problem.
Any help appreciated;
Garey Mills
<html>
<head>
<style type="text/css">
div.extraout { position: absolute; left: -9999em; min-height: 0 }
</style>
<script language="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">
<table>
<tr>
<td><button name="a" value="a" onClick='ucbmoveIn("a");return
false;'>A</button></td>
</tr>
</table>
<button name="less" value="less" onClick='ucbmoveOut("l");return
false;'>Hide</button>
</div>
<div class="extraout" id="a">
<tr><td>As</td><td>
<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>
</td></tr></table>
<button name="hideAs" value="hideAs" onClick='ucbmoveOut("a");return
false;'>Hide</button>
</div>
</body>
</html>
I am trying to write some Javascript that will move both buttons
and selects from far left of the viewport into and out of the
viewport. I present a button that moves in another button. The second
button moves in a select.
All of this works in Firefox. Moving the button in and out works
in IE7, but moving in the select does not, despite the exact same code
being used in both cases. The code is below. Note that I added the
"min-height: 0" style statement to the style because I thought that
this might be a Microsoft "layout" problem, but setting min-height
did not affect the problem.
Any help appreciated;
Garey Mills
<html>
<head>
<style type="text/css">
div.extraout { position: absolute; left: -9999em; min-height: 0 }
</style>
<script language="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">
<table>
<tr>
<td><button name="a" value="a" onClick='ucbmoveIn("a");return
false;'>A</button></td>
</tr>
</table>
<button name="less" value="less" onClick='ucbmoveOut("l");return
false;'>Hide</button>
</div>
<div class="extraout" id="a">
<tr><td>As</td><td>
<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>
</td></tr></table>
<button name="hideAs" value="hideAs" onClick='ucbmoveOut("a");return
false;'>Hide</button>
</div>
</body>
</html>