Y
Yauw
Can someone figure out how I can get the background color to not stop short
at the bottom of the page when an image longer than the viewable screen is
displayed?! Woks great if the image is small though (in Firefox anyway).
Thanks
<html>
<head>
<style type="text/css">
..translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(213, 200, 156);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
z-index: 10001;
}
</style>
<script>
<!-- Begin
function toggle(id)
{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';
if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);
}
}
}
// End -->
</script>
</head>
<body>
<center>
<a href="#" onclick="toggle('blockUI');toggle('logo');">Click to
enlarge</a>
<div id = "logo" style="display:none; position: absolute; left: 200px;
top: 100px; z-index: 55000">
<a id="btnClose" href="#" onclick="toggle('blockUI'); toggle('logo');
"><img src="/images/close.gif" border="0" /></a>
<img src="/images/400x650.jpg" border=0 alt="" />
</div>
<div id="blockUI" class="translucent" style="display: none;
width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
z-index: 50000;"
onclick="return false" onmousedown="return false"
onmousemove="return false"
onmouseup="return false" ondblclick="return false">
</div>
</center>
</body>
</html>
at the bottom of the page when an image longer than the viewable screen is
displayed?! Woks great if the image is small though (in Firefox anyway).
Thanks
<html>
<head>
<style type="text/css">
..translucent
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(213, 200, 156);
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
z-index: 10001;
}
</style>
<script>
<!-- Begin
function toggle(id)
{
if ( document.getElementById)
{
var layer = document.getElementById(id);
layer.style.display = (layer.style.display == 'none') ? 'block' : 'none';
if (id=='logo')
{
var b= document.getElementById('btnClose');
b.style.position = "absolute";
b.style.top=0;
b.style.left=parseInt(b.offsetParent.offsetWidth) -
parseInt(b.offsetWidth);
}
}
}
// End -->
</script>
</head>
<body>
<center>
<a href="#" onclick="toggle('blockUI');toggle('logo');">Click to
enlarge</a>
<div id = "logo" style="display:none; position: absolute; left: 200px;
top: 100px; z-index: 55000">
<a id="btnClose" href="#" onclick="toggle('blockUI'); toggle('logo');
"><img src="/images/close.gif" border="0" /></a>
<img src="/images/400x650.jpg" border=0 alt="" />
</div>
<div id="blockUI" class="translucent" style="display: none;
width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
z-index: 50000;"
onclick="return false" onmousedown="return false"
onmousemove="return false"
onmouseup="return false" ondblclick="return false">
</div>
</center>
</body>
</html>