Select in Layer tag not appearing properly 2

wood · Jul 31, 2001

I have the following code:

...
<table>
<tr>

<td align="right">
<font face="arial" size="2" color="black"><b>Frequency of Report:</b></font>
</td>

<td align="left">
<select name="RptFreq" onChange="listOptions(this.form)">
<option value="*WEEKLY">Weekly</option>
<option value="*MONTHLY" selected>Monthly</option>
</select>
</td>
</tr>

<tr>
<td align="right">
<font face="arial" size="2" color="black"><b>Scheduled Day:</b></font>
</td>
<td align="left">
<select name="SchDay">
<option value="*MON">Monday</option>
<option value="*TUE">Tuesday</option>
<option value="*WED">Wednesday</option>
<option value="*THU">Thursday</option>
<option value="*FRI">Friday</option>
<option value="*NONE">None</option>
</select>
</td>
</tr>

<tr>
<td align="right">
<font face="arial" size="2" color="black"><b>Relative Day:</b></font>
</td>
<td align="left">
<ilayer name="LastSelect">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</ilayer>
</td>
</tr>
</table>
...

What I am doing is having a layer so that I can make it visible/invisible based on the first select box. The code to make it visible/invisible works fine in both IE and NS.

The problem is that in NS the select doesn't show as a dropdown box. It just displays the text values in the options. It displays: "*LAST 1 2 3 4 5", as text. In IE there is no problem.

Does anyone have any ideas?

jmcpher · Jul 31, 2001

Can you not just do this:

<td align="left" style="display:none;" id=secondSelect>
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>

and change the secondSelect.style.display = 'block' when you want to show what was the layer? "A computer scientist is a person who knows when it is time to hit the computer."

John

johnmc@mvmills.com

wood · Jul 31, 2001

This works great for IE, but how do I reference the display property in NS?

baad · Aug 1, 2001

hie wood, check this:

http://www.dansteinman.com/dynduo/en/forms.html

regards, vic

wood · Aug 1, 2001

Thanks, vituz, but that doesn't really apply. I have checked out the following link, and this didn't work either.

http://www.dansteinman.com/dynduo/en/showhide.html

I get the error, secondSelect not defined. However, I do have a div with the id and name secondSelect.

Any other ideas?

baad · Aug 1, 2001

hie
culd u plz show me ur last code? (with those link's fixes) regards, vic

wood · Aug 1, 2001

Please note that I have added another select box, so it is now called thirdSelect and not secondSelect.

here is the code

function listOptions(formobj){
//Check the browser version.
if (navigator.appName=="Netscape&quot

{
var browser="ns";
}
else {
var browser="ie";
}

var optchosen=document.reports.RptFreq.value
if (optchosen!="*MONTHLY&quot

{
//weekly
//hide the last select box.
if (browser=="ns&quot

{
document.thirdSelect.visibility = 'hide'
}
else{
document.all.thirdSelecttb.style.display = 'none'
}
}
else {
//monthly
//show the last select box.
if (browser=="ns&quot

{
document.thirdSelect.visibility = 'show'
}
else{
document.all.thirdSelecttb.style.display = 'block'
}
}
}

and the select is in a table as so:

...
<td align="left" style="display:block;" id="thirdSelecttb" name="thirdSelecttb">
<div style="display:block;" id="thirdSelect" name="thirdSelect">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</td>
...

baad · Aug 1, 2001

just from the first look i can say what's wrong:
if u'll go 2

http://www.dansteinman.com/dynduo/en/forms.html

& check it out, u'll c that "For Netscape, forms and layers don't work so well together. Again since Netsape layers are essentially a whole different document, a form ..."
& u have the followin:
<div style="display:block;" id="thirdSelect" name="thirdSelect">
<select name="RelDay">
...
wrong for netscape..

now about showin/hidin:
this is a workable syntax, i think:
function show(id) {
if (ns4) document.layers[id].visibility = "show"
else if (ie4) document.all[id].style.visibility = "visible"
}

function hide(id) {
if (ns4) document.layers[id].visibility = "hide"
else if (ie4) document.all[id].style.visibility = "hidden"
}
(from ur link

http://www.dansteinman.com/dynduo/en/showhide.html)

but not urs..

sorry, now i gotta go, may be someone else today will help u; if not - c ya tomorrow.. regards, vic

wood · Aug 1, 2001

I have modified my code to the following and I now get the error "document.layers.thirdSelect has no properties."

function listOptions(formobj){
//Check the browser version.
if (navigator.appName=="Netscape&quot

{
var browser="ns";
}
else {
var browser="ie";
}

var optchosen=document.reports.RptFreq.value
if (optchosen!="*MONTHLY&quot

{
//weekly
//hide the last select box.
if (browser=="ns&quot

{
document.layers["thirdSelect"].visibility = "hide"
}
else{
document.all.thirdSelecttb.style.display = 'none'
}
}
else {
//monthly
//show the last select box.
if (browser=="ns&quot

{
document.layers["thirdSelect"].visibility = 'show'
}
else{
document.all.thirdSelecttb.style.display = 'block'
}
}
}

and the select in the table is now like so (with the form):

...
<td align="left" style="display:block;" id="thirdSelecttb" name="thirdSelecttb">
<div style="display:block;" id="thirdSelect" name="thirdSelect">
<form name="form2">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>
</td>
...

Anyone have other ideas?

I really appreciate your help so far!

baad · Aug 2, 2001

hie woody, u're still here?
sorry, forgot 2 tell u: in netscape u have 2 set position property for layer (absolute or relative) thy means <div style="position:relative; display:block;" id="thirdSelect" name="thirdSelect">

but i am afraid that u also have 2 set layer's width or clip it 2 width u need.. 'coz there is (are) smth in netscrap that prevents us from pleasant coding.. :-(
so, 2 set layers width u'll have 2 define a style for it in ur style tag or in separate css or u culd use <ilayer><layer><div> construction.. if u wont get it 2 work just tell me, i'll write an example for ya
regards, vic

wood · Aug 2, 2001

I tried adding the position relative and absolute and both times the contents of the div disappear.

Here is what I have:

<div style="position:absolute;display:block;width:150;" id="thirdSelect" name="thirdSelect"
<form name="form2">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>

baad · Aug 2, 2001

did u uploaded it somewhere?
if u did, plz give me the url
or else paste here minimal document (complete html document with forms, divs, scripts, i mean with all that is about our subject - i'm just 2 lazy 2 write all of it out myself.. ;-)) i'll c what can i do for u.. regards, vic

mithrilhall · Aug 2, 2001

Try this. It works only in Netscape.

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
function showIt(layerName)
{
document.layers[layerName].visibility = "show";
}
</script>
</HEAD>
<BODY>
<form name="frmTest">
<INPUT type="button" value="Button" id=button1 name=button1 onClick="showIt('thirdSelect')">
</form>
<div style="position:absolute;display:block;width:150;visibility:hidden;" id="thirdSelect" name="thirdSelect">
<form name="form2">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>

</BODY>
</HTML>

wood · Aug 2, 2001

Here is the complete page:

<html>
<head>

<script>

function listOptions(formobj){
//Check the browser version.
if (navigator.appName=="Netscape&quot

{
var browser="ns";
}
else {
var browser="ie";
}

//If Option is Monthly, display the third select box, and remove the option *All from the 2nd select box.

var optchosen=document.reports.RptFreq.value
if (optchosen!="*MONTHLY&quot

{
//weekly
//hide the last select box.
if (browser=="ns&quot

{
document.layers["thirdSelect"].visibility = "hide"
}
else{
document.all.thirdSelecttb.style.display = 'none'
}
}
else {
//monthly
//show the last select box.
if (browser=="ns&quot

{
document.layers["thirdSelect"].visibility = 'show'
}
else{
document.all.thirdSelecttb.style.display = 'block'
}
}
}
</script>

</head>

<body>
<div align="center"><center>

<br>

<form name="reports" method="post" action="scheduler">
<font face="arial" size="2" color="black">
<table>
<tr>
<td align="right">
<font face="arial" size="2" color="black">
<b>Frequency of Report:</b>
</font>
</td>
<td align="left">
<select name="RptFreq" onChange="listOptions(this.form)">
<option value="*WEEKLY">Weekly</option>
<option value="*MONTHLY" selected>Monthly</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<font face="arial" size="2" color="black">
<b>Scheduled Day:</b>
</font>
</td>
<td align="left">
<select name="SchDay">
<option value="*MON">Monday</option>
<option value="*TUE">Tuesday</option>
<option value="*WED">Wednesday</option>
<option value="*THU">Thursday</option>
<option value="*FRI">Friday</option>
<option value="*NONE">None</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<font face="arial" size="2" color="black">
<b>Relative Day:</b>
</font>
</td>
<td align="left" style="display:block;" id="thirdSelecttb" name="thirdSelecttb">
<div style="position:absolute;display:block;width:150" id="thirdSelect" name="thirdSelect">
<form name="form2">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>
</td>
</tr>
</table>
</font>

<input type="hidden" name="RelativeDay" value="">

</form>
</body>
</html>

mithrilhall · Aug 2, 2001

I could be wrong but I think I found your problem. I don't think Netscape likes the use of nested forms but don't quote me on that.

wood · Aug 2, 2001

Mithrihall,

The code you gave hides the layer to start. How do I show the layer when the page is first loaded?

I have tried "visibility:visible", but I don't think that that is the right syntax.

mithrilhall · Aug 2, 2001

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
function showIt(layerName)
{
if (document.getElementById)
document.getElementById(layerName).style.visibility = "hidden";
else
document.layers[layerName].visibility = "hidden";
}
</script>
</HEAD>
<BODY>
<form name="frmTest">
<INPUT type="button" value="Button" id=button1 name=button1 onClick="showIt('thirdSelect')">
</form>
<BR>
<BR>
<div style="position:absolute;display:block;width:150;visibility:visible;" id="thirdSelect" name="thirdSelect">
<form name="form2">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>

</BODY>
</HTML>

wood · Aug 2, 2001

Mithrilhall,

You were right, I did have to get rid of the nested forms. The code now looks like above.

Now Once I have it hidden (that works okay), I need to show it again. Here are the two funtions I have:

function showIt(layerName)
{
if (document.getElementById){
document.getElementById(layerName).style.visibility = "show";}
else {
document.layers[layerName].visibility = "show";}
}

function hideIt(layerName)
{

if (document.getElementById){
document.getElementById(layerName).style.visibility = "hidden";}
else{
document.layers[layerName].visibility = "hidden";}
}

The hideIt function works great, but the showIt function is not working, and I don't get any error messages.

Any ideas?

mithrilhall · Aug 2, 2001

Try this:

function showIt(layerName)
{
if (document.getElementById){
document.getElementById(layerName).style.visibility = "visible";}
else {
document.layers[layerName].visibility = "show";}
}

wood · Aug 2, 2001

Thanks, but that didn't work either. I am including the current code that I have. The hide works okay, but the show doesn't.

<html>
<head>

<script>

function showIt(layerName){
if (document.getElementById){
document.getElementById(layerName).style.visibility = "visible";
}
else {
document.layers[layerName].visibility = "show";
}
}

function hideIt(layerName){
if (document.getElementById){
document.getElementById(layerName).style.visibility = "hidden";
}
else{
document.layers[layerName].visibility = "hidden";
}
}

function listOptions(formobj){
//Check the browser version.
if (navigator.appName=="Netscape&quot

{
var browser="ns";
}
else {
var browser="ie";
}

var optchosen=document.reports.RptFreq.value
if (optchosen!="*MONTHLY&quot

{
//weekly
//hide the last select box.
if (browser=="ns&quot

{
hideIt('thirdSelect')
}
else{
document.all.thirdSelecttb.style.display = 'none'
}
}
else {
//monthly
//show the last select box.
if (browser=="ns&quot

{
showIt('thirdSelect')
}
else{
document.all.thirdSelecttb.style.display = 'block'
}
}
}
</script>

</head>

<body>

<br>

<form name="reports" method="post" action="scheduler">
<font face="arial" size="2" color="black">
<table>
<tr>
<td align="right">
<font face="arial" size="2" color="black">
<b>Frequency of Report:</b>
</font>
</td>
<td align="left">
<select name="RptFreq" onChange="listOptions(this.form)">
<option value="*WEEKLY">Weekly</option>
<option value="*MONTHLY" selected>Monthly</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<font face="arial" size="2" color="black">
<b>Scheduled Day:</b>
</font>
</td>
<td align="left">
<select name="SchDay">
<option value="*MON">Monday</option>
<option value="*TUE">Tuesday</option>
<option value="*WED">Wednesday</option>
<option value="*THU">Thursday</option>
<option value="*FRI">Friday</option>
<option value="*NONE">None</option>
</select>
</td>
</tr>
<input type="hidden" name="RelativeDay" value="">
</form>
<tr>
<td align="right">
<font face="arial" size="2" color="black">
<b>Relative Day:</b>
</font>
</td>
<td align="left" style="display:block;" id="thirdSelecttb" name="thirdSelecttb">
<div style="position:relative;display:block;width:250;visibility:visible" id="thirdSelect" name="thirdSelect">
<form name="form2">
<select name="RelDay">
<option value="*LAST" selected>Last</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>
</td>
</tr>
</table>

</font>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Select in Layer tag not appearing properly 2

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

Similar threads

Log in

Part and Inventory Search

Sponsor