...

View Full Version : Layer Positioning Question



joble
09-30-2002, 10:34 AM
Hi All,

I have problem using layer. The program below will
show and hide a combo box using radio button for both IE and NS.

My problem is that combo box shows on a different
position rather than showing. Can you please take
a look ?

Thank you in advance.

Best regards, joble.



<script language="Javascript">
<!--
var IE5up = document.getElementById && document.all;
var NS6up = document.getElementById &&! document.all;
var NS4 = document.layers;
var IE4 = document.all &&! window.print;

function show_and_hide(val) {

if (val=="1")
{
if(IE5up || NS6up)
{
document.getElementById("myLayer1").style.visibility = "hidden";
document.getElementById("myLayer2").style.visibility = "visible";
}

else if(NS4)
{
document.layers["myLayer1"].visibility = "hidden";
document.layers["myLayer2"].visibility = "visible";
}

else if(IE4)
{
document.all["myLayer1"].style.visibility = "hidden";
document.all["myLayer2"].style.visibility = "visible";
}
}

if (val=="2")
{
if(IE5up || NS6up)
{
document.getElementById("myLayer2").style.visibility = "hidden";
document.getElementById("myLayer1").style.visibility = "visible";
}

else if(NS4)
{
document.layers["myLayer2"].visibility = "hidden";
document.layers["myLayer1"].visibility = "visible";
}

else if(IE4)
{
document.all["myLayer2"].style.visibility = "hidden";
document.all["myLayer1"].style.visibility = "visible";
}
}

}

//-->
</script>

<table border=1>

<tr>
<form>
<td><input type="radio" name="dhtml" value="1" onclick="show_and_hide(this.value);">Parent Customer<br/></td>
<td><input type="radio" name="dhtml" value="2" onclick="show_and_hide(this.value);" checked>SBU Customer<br/></td>
</form>
</tr>

<tr>
<td valign="top"><b>Customer:</b></td>
<td valign="top">
<div id="myLayer1" style="position:relative; visibility:visible">
<form>
<select>
<option value="All">SBU Customer </option>
</select>
</form>
</div>

<div id="myLayer2" style="position:relative;visibility:hidden">
<form>
<select>
<option value="All">Parent Customer</option>
</select>
</form>
</div>
</td>
</tr>
</table>

MCookie
09-30-2002, 12:01 PM
Try giving the divs myLayer1 and myLayer2 the same absolute position.
When you use relative positioning with hidden visibility, you can't see the hidden layer, but it still takes up space. So you have to show and hide them on the same place.

joble
09-30-2002, 12:07 PM
Hello,

I've already tried to make the position as absolute but it didn't work for Netscape 4.x.
Also, for IE it overrides the border of the
table.

Any suggestions ? Thanks.

Best regards, joble.

Alekz
09-30-2002, 12:18 PM
Hi, It will not work in NN4, because the code is wrong.
Replace 'hidden' and 'visible' with 'hide' and 'show'

Alex

joble
09-30-2002, 12:40 PM
Hello,

The code is working for NS4.x but if I make the
style=position:absolute it didn't work.

I've also tried your suggestion and make the position as
absolute and didn't work also for NS4.x.

Any suggestions ? Thanks.

Best regards, joble.

MCookie
09-30-2002, 01:43 PM
Looks different, but works fine in NN4, Moz, IE.. on Mac..

<form><p><input type="radio" name="dhtml" value="1" onclick="show_and_hide(this.value);">Parent Customer<br />
<input type="radio" name="dhtml" value="2" onclick="show_and_hide(this.value);" checked="checked">SBU Customer</p></form>
<div id="myLayer1" style="position:absolute;visibility:visible;">
<form><b>Customer:</b> <select><option value="All">Parent Customer</option></select></form></div>
<div id="myLayer2" style="position:absolute;visibility:hidden;">
<form><b>Customer:</b> <select><option value="All">SBU Customer</option></select></form></div>

joble
09-30-2002, 01:54 PM
Hello,

Thanks. I've tried your suggestion but it didn't work ?
Is this the complete code ? Thank you.

Best regards, joble.

MCookie
09-30-2002, 01:59 PM
That is what goes in the body of your page. You need the script from your first post between the <head></head> tags.

joble
09-30-2002, 04:14 PM
Hello,

Thanks. It's working now but how can I put the layers into a <TABLE> so that it would be center and aligned ? because
currently it is left justified.

Any suggestions ? Thanks!

Best regards, joble.

adios
10-01-2002, 04:18 AM
Why we hate Navigator:

<html>
<head>
<title>untitled</title>
<style type="text/css">

#selectLayer1 {
position: absolute;
left: 15px;
top: 20px;
}

#selectLayer2 {
position: absolute;
left: 7px;
top: 20px;
visibility: hidden;
}

body {
margin-top: 100px;
text-align: center;
background: olive;
}

</style>
<script type="text/javascript" language="javascript">

function getElement(id) {
return document.getElementById ? document.getElementById(id) :
document.all ? document.all(id) :
document.layers ? document.NScell.document[id] : null;
}

function hideLayer(id) {
el = getElement(id);
if (el)
if (el.style) el.style.visibility = 'hidden';
else if (typeof el.visibility != 'undefined') el.visibility = 'hide';
}

function showLayer(id) {
el = getElement(id);
if (el)
if (el.style) el.style.visibility = 'visible';
else if (typeof el.visibility != 'undefined') el.visibility = 'show';
}

</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="4" bordercolor="#c0c0c0"
bordercolorlight="#c0c0c0" bordercolordark="#777777">
<tr>
<td>
<table cellspacing="0" cellpadding="5" border="1" bgcolor="pink">
<tr>
<form>
<td><input type="radio" name="dhtml" value="1" checked="checked" style="background:pink;"
onclick="hideLayer('selectLayer2');showLayer('selectLayer1')"> SBU Customer</td></tr><tr>
<td><input type="radio" name="dhtml" value="2" style="background:pink;"
onclick="hideLayer('selectLayer1');showLayer('selectLayer2')">
Parent Customer</td>
</form>
</tr>
</table></td>
<script type="text/javascript" language="javascript">
document.write(
(document.layers)? '<td rowspan="2" bgcolor="tan">' :
'<td id="cell" rowspan="2" style="position:relative;width:140px;" bgcolor="tan">'
);
</script>
<ilayer id="NScell" width="140" height="40">
<div id="selectLayer1">
<form>
<select>
<option value="All">SBU Customer</option>
<option value="some">Some</option>
<option value="one">One</option>
</select>
</form>
</div>
<div id="selectLayer2">
<form>
<select>
<option value="All">Parent Customer</option>
<option value="All">Some Parent</option>
<option value="All">One Parent</option>
</select>
</form>
</div>
</ilayer>
</td></tr></table>
</body>
</html>

Of course - you'll have to reference everything inside the nested NS Layers using that lengthy object path (document.cell.document.whatever) but, hey, gotta help out that 3% of remaining users.....

joble
10-01-2002, 04:36 AM
Hello,

Thanks so much. It's working now for NS4.x but how can I make this work for IE4.x above ? I need to make it work for both IE and Netscape v4.x above since we have these browsers installed in many of our PC's.

Thank you in advance.

Best regards, joble.

adios
10-01-2002, 05:44 AM
Uh-oh...if memory serves, you can't set CSS position dynamically in IE4. I don't have it here now so, let me know if that's what is failing. Otherwise, tested IE 5.5, works fine...

adios


OK, hacked our way around it...re-posted (above)

joble
10-01-2002, 07:56 AM
Hello,

Thanks! I've tried using IE4.x and it didn't work. The combo box
is showing on the upper left of the browser instead of center.

Any suggestions ? Thanks. Appreciate it.

Best regards, joble.

MCookie
10-01-2002, 01:18 PM
Here's another one, not really centered, but adjustable top and left margins to position the divs. You can add borders and colors if you want.


<html>
<head>
<title>Untitled</title>
<script language="Javascript">
<!--
var IE5up = document.getElementById && document.all;
var NS6up = document.getElementById &&! document.all;
var NS4 = document.layers;
var IE4 = document.all &&! window.print;
function show_and_hide(val) {
if (val=="1"){
if(IE5up || NS6up)
{
document.getElementById("myLayer1").style.visibility = "hidden";
document.getElementById("myLayer2").style.visibility = "visible";
}
else if(NS4){
document.layers["myLayer1"].visibility = "hidden";
document.layers["myLayer2"].visibility = "visible";
}
else if(IE4){
document.all["myLayer1"].style.visibility = "hidden";
document.all["myLayer2"].style.visibility = "visible";
}
}
if (val=="2"){
if(IE5up || NS6up){
document.getElementById("myLayer2").style.visibility = "hidden";
document.getElementById("myLayer1").style.visibility = "visible";
}
else if(NS4){
document.layers["myLayer2"].visibility = "hidden";
document.layers["myLayer1"].visibility = "visible";
}
else if(IE4){
document.all["myLayer2"].style.visibility = "hidden";
document.all["myLayer1"].style.visibility = "visible";
}
}
}
//-->
</script>
<style type="text/css">
<!--
body, div, form, p, input, select {
font:10px verdana;
color:#000;
}
#customer {
margin-top:15%;
}
#customer, #myLayer1, #myLayer2 {
width:250px;
margin-left:35%;
}
#myLayer1, #myLayer2 {
position:absolute;
}
form {
margin:0px;
}
-->
</style>
</head>
<body bgcolor="#ffffff">
<div id="customer"><form><p><input type="radio" name="dhtml" value="1" onclick="show_and_hide(this.value);">SBU Customer<br>
<input type="radio" name="dhtml" value="2" onclick="show_and_hide(this.value);" checked="checked">Parent Customer</p></form></div>
<div id="myLayer1" style="visibility:visible;">
<form>Customer: <select><option value="All">Parent Customer</option></select></form></div>
<div id="myLayer2" style="visibility:hidden;">
<form>Customer: <select><option value="All">SBU Customer</option></select></form></div>
</body>
</html>

joble
10-01-2002, 03:01 PM
Hello,

Thanks! but the combo box doesn't position on the center.
It works for NS4.x but not IE4.x. Any suggestions ? Thank you.

Best regards, joble.

MCookie
10-01-2002, 10:06 PM
NN4, IE4?
..changed this script from http://www.javascriptkit.com/script/script2/multicombo.shtml
Not shure, I deleted my ancient browsers a few weeks ago, but this might work in NN3 and IE3 too, lol...


<html>
<head>
<title>Untitled</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<table width="350" bgcolor="#99CCCC" border="1" bordercolor="#000000" cellspacing="0" cellpadding="5">
<tr>
<td width="150">
<form>
<input type="radio" name="customer" value="sbu" onclick="javascript:populate(combo1)" checked="checked">SBU Customer<br>
<input type="radio" name="customer" value="parent" onclick="javascript:populate(combo2)">Parent Customer</form></td>
<td>
<form name="dynamiccombo">
<select name="stage2" size="1">
<option value="#">Place holder</option></select></form>
<script language="JavaScript" type="text/javascript">
<!--
//Dynamic combo box script by javascriptkit.com
var combo1=new Array()
combo1[0]=new Option("SBU Customer")
var combo2=new Array()
combo2[0]=new Option("Parent Customer")
var cacheobj=document.dynamiccombo.stage2
function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true
}
function gothere(){
location=cacheobj.options[cacheobj.selectedIndex].value
}
populate(combo1)
// -->
</script></td></tr></table></center>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum