I have the following document which has a sliding bar on the top. It
works good in IE but in Opera the image's position is offset on the
right.
If you have any idea please reply.
<style type="text/css">
.bar {
position:absolute;
top:15px;
left:300px;
height:35px;
width:200px;
}
div.bar {
background:#666;
z-index : 2;
}
span.bar {
font-family:Verdana, Helvetica, sans-serif;
font-size:16pt;
background:transparent;
color: #bcc;
z-index : 4;
text-align:center;
}
#barImg {
background : transparent;
z-index : 3;
height : 35px;
width : 20px;
visibility : hidden;
}
</style>
<script type="text/javascript">
if ( document.getElementById ) {
doc = "document.getElementById(\'";
sty = "\').style";
} else {
if ( document.all ) {
doc = "document.all(\'";
sty = "\').style";
} else
if ( document.layers ) {
doc = "document.layers[\'";
sty = "\']";
}
}
var posLeft = 300;
var loop = false;
var timer1 = null;
function animate( newMsg ) {
if ( !loop ) {
loop = true;
eval(doc + 'barImg' + sty + '.visibility="visible"');
timer1 = setInterval("slideBar()",5);
}
//other statements
}
function slideBar() {
barImgObj = eval(doc + 'barImg' + sty);
if ( posLeft < 480 ) { //is the end reached 300 (left) + 200 (width)
+ 20 (image)
posLeft+=3;
barImgObj.left = posLeft;
} else {
posLeft = 300;
barImgObj.left = posLeft;
loop = false;
clearInterval(timer1);
barImgObj.visibility = 'hidden';
}
}
</script>
<body>
<img class="bar" id="barImg" name="barImg" src="images/bar.gif" alt="">
<div class="bar"></div> <!-- In Netscape 4 this will be transparent -->
<span class="bar" id="m0">msg1</span>
<span class="bar" id="m1">msg2</span>
</body>
View Cart
