1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:18 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Centring a Layer In Netscape & Opera?

Is the problem with the layer or the javascript?

         

soquinn

5:29 pm on Dec 17, 2003 (gmt 0)

10+ Year Member



I'm not that familiar with this type of coding and I'm trying to have a layer containing an image map popup on-click and be centred… it’s messy and seems to work in IE but does not seem to do anything in Netscape or Opera?

Any suggestions on cleaning it up or will it never work in those browsers?

Sample code:
----------------------------

<HTML>
<HEAD>
<TITLE>Centered Layer</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>

<script language=Javascript>
<!--
canOff=new Image();
canOff.src='images/myimage.gif';
canOn=new Image();
canOn.src='images/myimage.gif';

function SetInternational(type){

if(type=='on'){
document.all.international_sites.style.visibility="visible";
}else {
document.all.international_sites.style.visibility="hidden";
}

return false;
}

function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla')!= -1) &&
(agent.indexOf('spoofer') == -1) &&
(agent.indexOf('compatible') == -1) &&
(agent.indexOf('opera') == -1) &&
(agent.indexOf('webtv') == -1));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major >= 4));
this.ie5 = (this.ie && (this.major == 4) &&
(agent.indexOf("msie 5.0")!= -1));
this.ieX = (this.ie &&!this.ie3 &&!this.ie4);
}

var is = new Is();

function layerObject(id,left,top) {
if (is.ie5¦¦is.ns6){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
return this.obj;
} else if(is.ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
this.obj.top = top;
return this.obj;
} else if(is.ns4) {
this.obj = document.layers[id];
this.obj.left = left;
this.obj.top = top;
return this.obj;
}
}

function layerSetup() {
centerLyr = new layerObject('centerLayer', available_width/2-170,available_height/2-65);

}
//-->

</SCRIPT>

</HEAD>

<body onLoad="
if(is.ns4 ¦¦is.ns6) {
available_width=innerWidth;
available_height=innerHeight;
layerSetup();
} else if(is.ie4 ¦¦ is.ie5) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();
}"
onResize="
if(is.ns4 ¦¦is.ns6¦¦is.ie4¦¦is.ie5) {
history.go(0);
}"
>

<DIV id=centerLayer style="HEIGHT: 130px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 340px; Z-INDEX: 6; visibility: hidden">
<div id="international_sites">
<table width="400" border="0" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF"> <font color="#000000" face="Arial, Helvetica, sans-serif" size="4"><b>Links:</b></font>
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td bgcolor="#FFFFFF">
<div align="center"><a href="#" onMouseOver="SetInternational('on'); document.can.src=canOn.src;" onMouseOut="SetInternational('off'); document.can.src=canOff.src;">
<img src="images/myimage.gif" usemap="#Map" border="1" name=can width="340" height="130"></a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</DIV>
</DIV>

<a href="#"><img src="myimage.gif" width="135" height="9" border="1" hspace="2" onClick="SetInternational('on')"></a>

<map name="Map">
<area shape="rect" coords="134,65,198,80" href="http://mysite.com" target="_parent">
<area shape="rect" coords="134,45,198,60" href="http://mysite.com" target="_parent">
<area shape="rect" coords="134,26,198,41" href="http://mysite.com" target="_parent">
</map>

</BODY>
</HTML>

----------------------------

Thanks in advance.

soquinn

5:02 pm on Dec 18, 2003 (gmt 0)

10+ Year Member



Anyone have comments for me on this issue?

Should I have posted under HTML and Browsers?

Thanks.

DrDoc

5:38 pm on Dec 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



All you want to do is center the layer, right?
Then, why not consider a CSS solution instead?
It's much more reliable...

soquinn

6:46 pm on Dec 18, 2003 (gmt 0)

10+ Year Member



Hi DrDoc, if you paste the html code from my original post and view it in a browser (like IE - as it does not work in Opera or Netscape – that’s was my original problem) you will see it is a hidden layer containing an image map that pops up centred on the click of another image link.

I figured it was the javascript or layers that prevented this from working properly in Opera and Netscape?

Can that be replicated in CSS?

DrDoc

7:20 pm on Dec 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The centering of the element, yes.
Showing and hiding the element? You can still use JavaScript for that... And we can come back to that once the element is centered using CSS :)

Basically, you just need to use document.getElementById to access (and toggle) the layer visibility.

soquinn

8:48 pm on Dec 18, 2003 (gmt 0)

10+ Year Member



Thanks DrDoc, when you have a chance can you show me some example code of what you are suggesting? I assume it will work in Netscape and Opera too?

DrDoc

9:30 pm on Dec 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Basically...

if(document.getElementById) {
//This works in DOM compliant browsers (including later versions of IE)
document.getElementById(variable_holding_the_ID).style.display = "none";
}
else if(document.all) {
//This will work in older IE
document.all[variable_holding_the_ID].style.display = "none";
}

So, just set display to "none" to hide the element, and set it to "block" to make the element visible. That would make your JavaScript a lot shorter ;)

soquinn

4:29 pm on Dec 20, 2003 (gmt 0)

10+ Year Member



Thank you DrDoc this seemed to do the trick...


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#Layer1 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -65px;
margin-left: -170px;
display: none;
}
</style>
<script type="text/javascript">
currentState = new Array();
currentState['Layer1'] = "none";
function toggleLayer(which) {
currentState[which] = (currentState[which]=="block"?"none":"block");
if(document.getElementById) {
//This works in DOM compliant browsers (including later versions of IE)
document.getElementById(which).style.display = currentState[which];
}
else if(document.all) {
//This will work in older IE
document.all[which].style.display = currentState[which];
}
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="Layer1"><img src="images/myimage.gif" usemap="#Map" border="1" name=can width="340" height="130"></div>

<a href="#"><img src="myimage.gif" width="135" height="9" border="1" hspace="2" onClick="toggleLayer('Layer1')"></a>

<map name="Map">
<area shape="rect" coords="134,65,198,80" href="http://mysite.com" target="_parent">
<area shape="rect" coords="134,45,198,60" href="http://mysite.com" target="_parent">
<area shape="rect" coords="134,26,198,41" href="http://mysite.com" target="_parent">
</map>
</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:18 pm May 13, 2026