My OperaYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
<element>.style.display = none; shows no effect on opera 4 mac
hi!i wrote an opera widget lately. for switching between different views i'm using <element>.style.display = none/block; with some div-layers. on windows machines that works seamless but on macs its a bit problematic. the strange thing is that sometimes it works and sometimes it doesn't hide the the background layer and just overlays the new layer over the other. i think that is very strange since the layers are not absolute positioned and should be among each other if the display command would fail. could this be a bug in the browser? feels like some kind of race condition.
i recognised the same issue on linux machines too.
one more thing to mention is that the layers are using the opacity style option. they are slightly transparent.
regards, marv
This feature does not work on Opera Mobile 8.65 and on Opera Mobile 9.51 Beta (Build 2723) on Windows Mobile 6 Professional as well. In order to easily check this wrong behaviour you could use the following code:
<!DOCTYPE html>
<html>
<head>
<title>Test style.display</title>
<script type="text/javascript">
function handleDockedMode()
{
document.getElementById("widget").style.display = "none";
document.getElementById("docked").style.display = "block";
}
</script>
</head>
<body onload="javascript:handleDockedMode();">
<div id="container">
<div id="widget">This text should be hidden.</div>
<div id="docked">This text should be visible.</div>
</div>
</body>
</html>
The same code is online at:
http://webcab.de/test/test.style.display.html
<!DOCTYPE html>
<html>
<head>
<title>Test style.display</title>
<script type="text/javascript">
function handleDockedMode()
{
document.getElementById("widget").style.display = "none";
document.getElementById("docked").style.display = "block";
}
</script>
</head>
<body onload="javascript:handleDockedMode();">
<div id="container">
<div id="widget">This text should be hidden.</div>
<div id="docked">This text should be visible.</div>
</div>
</body>
</html>
The same code is online at:
http://webcab.de/test/test.style.display.html
well, I tried <div style='display:none'> and it does not work either, but later I wrote a separate css segment to define its class, and it works! sample code below:
<style type='text/css' media='handheld'>
.detail { display:none; }
</style>
<script type='text/javascript'>
function display(id)
{
document.getElementById(id).style.display="block";
}
</script>
title
<a href='javascript:display("zz")'>Detail</a>
<span id='zz' class='detail'>content here content here</span>
<style type='text/css' media='handheld'>
.detail { display:none; }
</style>
<script type='text/javascript'>
function display(id)
{
document.getElementById(id).style.display="block";
}
</script>
title
<a href='javascript:display("zz")'>Detail</a>
<span id='zz' class='detail'>content here content here</span>