...

View Full Version : Hiding table elements in NS 4.7



DaveG
12-06-2004, 07:05 PM
Hi,

I have the following table row definition that is initially hidden.

<tr id="Province" style="display:none">
<td><font face="Arial, Helvetica, sans-serif" size="2">Province:</font></TD>
<td> <select name="Province" size="1">
<OPTION value="" SELECTED>- Please Select-</OPTION>
<OPTION value="Alberta">Alberta</OPTION>
... </select> </TD></TR>

I use document.getElementById("Province").style.display = "block"; to make this row visible. This works fine in IE and NS5+ but doesn't work in NS4.7 as getElementByID isn't supported. Does anyone have any suggestions how to get this working in NS4.7 as well as IE? No matter what I try it doesn't seem to work in NS4.7.

Thanks

Puffin the Erb
12-06-2004, 08:06 PM
The problem is NN4 does not allow dynamic changing of styles created in W3C's CSS. Here's a possible workaround :

<!-- set display of select to none -->
<style type="text/css">

#Province {display:none;}

</style>

<script type="text/javascript">
// are you a W3C friendly browser or Netscape 4?
w3c = document.getElementById?true:false;
nn4 = document.layers?true:false;

// because Netscape 4 cannot dynamically change w3c css reset display to block using
// Netscape 4's JavaScript StyleSheets
if(nn4)
{
document.ids.Province.display='block';
}

function showRow()
{

if(w3c)
{
document.getElementById('Province').style.display='block';
}
if(nn4)
{
//reference Netscape 4's proprietary layers tag which has the visibility property - not to
//be confused with css visibility which uses the value 'visible' not 'show'
document.layers['nnlayer'].visibility='show';
}

}
</script>
</head>

<body>
<layer id="nnlayer" visibility="hide" top="0px">
<form method="get" action="">
<table>
<tr id="Province">
<td><font face="Arial, Helvetica, sans-serif" size="2">Province:</font></td>
<td>
<select name="Province" size="1">
<option value="" selected>- Please Select-</option>
<option value="Alberta">Alberta</option>
</select>
</td>
</tr>
</table>
</form>
</layer>

<layer id="trigger" visibility="show" top="50px">
<form method="get" action="">
<table>
<tr><td><input type="button" onclick="showRow()" value="show"></td></tr>
</table>
</form>
</layer>


To hide a <layer> use visibility='hide';

Note that NN4 will not display form elements unless the <form> tag is present.

DaveG
12-07-2004, 02:26 AM
Thanks for the reply. If I have different rows in the table that I want to hide at different times, can I use the same approach and put an individual table row inside a layer? like:

<form method = "post" action="/processform.cfm">
<table>

<layer id = "row1layer" visibility="hide" top="0px"
<tr id = "row1">
<td><font face="Arial, Helvetica, sans-serif" size="2">Province:</font></td>
<td>
<select name="Province" size="1">
<option value="" selected>- Please Select-</option>
<option value="Alberta">Alberta</option>
</select>
<\td>
<\tr>
<\layer>

<layer id = "row2layer" visibility="hide" top="0px"
<tr id = "row2">
<td><font face="Arial, Helvetica, sans-serif" size="2">Row2:</font></td>
<td>
<select name="Row2" size="1">
<option value="" selected>- Please Select-</option>
<option value="Row2option">Row2Option</option>
</select>
<\td>
<\tr>
<\layer>

<tr>
<td colspan=2 align=center><br> <input type="Submit" name="submit" value="Send Request">
</td>
</tr>
</table>
</form>

I tried this and got wierd results so not sure if I can use layer inside a table definition? If I can't use layers here any other suggestions on how to do this?

Thanks

brothercake
12-07-2004, 02:59 AM
You will get weird results if you do that ... you'll get weird results whatever you do in Netscape 4 ... I can't help but wonder why you're bothering to support it at all.

But whatever ... if you want to hide individual rows you'll probably need to make each one a separate table [which does kinda destroy the semantics of the table].

Note also that each <layer> is a "document" in the layers DOM. So, a reference to your form is no longer "document.forms.formname.inputname" but "document.layers.layername.document.forms.formname.inputname" - a structure which may require a separate <form> inside each <layer> rather than multiple layers inside a single form ... I can't remember exactly, but I think so [this is ancient history mate, I'm a little rusty ;)]

DaveG
12-07-2004, 03:36 AM
I agree - would prefer not to support NS4.7 but apparently there are a lot of Sun/Solaris workstations out there with NS4.7 as the default browser. The website stats show a significant number of people using NS4.7 that can't use our forms as they are written for IE5+ NS6+. Hence the marketing group is asking me to change the forms to work on NS4.7. At this point they don''t want to change the way the form works so I need to find a way to show/hide rows in the table (which contain form input fields). Thanks for the suggestions.

Kor
12-07-2004, 09:28 AM
try using layer inside the rows to hide/show the content of the row, not the row itself

Another posibility, try give the TR an id and give it a position:absolute (but no left top, just position:absolute)

glenngv
12-07-2004, 09:29 AM
It will be hard to submit the form data in NS4 because each field is in a separate form. You will need to make a hidden form where you will transfer the data to and submit that form.

To make your code tidy, make a separate page for NS4 and modern browsers. Then in the main page, include the NS4 page via <ilayer> tag. This is the counterpart of <iframe> tag.


<html>
<head>
<title></title>
</head>
<body>
<ilayer src="ns4form.htm">
<!--anything inside the ilayer tag will be rendered in non-NS4 browsers -->
normal form for non-NS4 here...
</ilayer>
</body>
</html>

Puffin the Erb
12-07-2004, 09:57 AM
You need to be careful about cutting your form elements off from your <form> tags by nesting the <layer> tag incorrectly as orphaned form elements will not display in Netscape 4.
Also, I noticed your code has some incorrectly closed tags:

For example <\td> instead of </td>

Each layer you create should be stand-alone in order for you not to get strange results. For example, don't orphan <tr>s from their <table> by splitting them up using a <layer>.

Avoid using any CSS2 ( for example absolute positioning ). Netscape 4 does not re-apply these instructions when the browser is resized - you would have to force a reload. Also, NN4 cannot change css instructions dynamically, once set that's it.

Instead of setting visibility you may prefer the effect of hidden :

document.layers.row1layer.hidden=false; //or true to display

Always remember that anything thing you do on the client is cosmetic and can aid usability, but cannot be relied upon as a validation technique.

brothercake
12-16-2004, 04:33 AM
Bet you're wishing you'd never asked now :D ;)

jbot
12-16-2004, 11:06 AM
Avoid using any CSS2 ( for example absolute positioning ). Netscape 4 does not re-apply these instructions when the browser is resized - you would have to force a reload. Also, NN4 cannot change css instructions dynamically, once set that's it.

but you can with Javascript Stylesheets (JSS). if, as Glenn has suggested, you create a separate page for NN4.x then I also suggest you seriously consider using JSS to achieve a comparable stylesheet to CSS.

of course, if it's jsut for server browsers then maybe you don't need a stylesheet. use the @import selector and have the page degrade gracefully in NN and everyone's happy.

Puffin the Erb
12-16-2004, 11:42 AM
Be aware that once JavaScript StyleSheets are applied they cannot be dynamically changed either.
Dynamic functionality is achieved through the layers property.

jbot
12-16-2004, 01:42 PM
Be aware that once JavaScript StyleSheets are applied they cannot be dynamically changed either.

yes, they can. they're written in JS so they're naturally dynamic.

Puffin the Erb
12-16-2004, 02:09 PM
If only that were the case.
Once set they are static property values.
You have access to the limited number of properties belonging to <layer> s, these can be changed after being set but that is not CSS or JSSS.
There were plans to allow for dynamic application of styles to any tag (Microsoft brought in the 'all' array to achieve this in their browser) but that was not implemented in version 4 and Navigator ended up being rewritten with support for W3C's approach instead.

jbot
12-16-2004, 02:55 PM
There were plans to allow for dynamic application of styles to any tag (Microsoft brought in the 'all' array to achieve this in their browser) but that was not implemented in version 4 and Navigator ended up being rewritten with support for W3C's approach instead.

no, i still don't agree (or maybe I've just misconstrued the manuals):


<style type="text/javascript">

ids.span1.fontSize = "0.75em";
tags.P.fontSize = "0.5em";

</style>

<p>what is <span id="span1">this</span> all about.</p>



would it also be possible to use entities to set the value of an element dynamically:


<image src="&{myimage };" ..>

see this link for further details: Practical Uses for JS Entities (http://javascriptkit.com/javatutors/entity4.shtml)

Puffin the Erb
12-16-2004, 07:22 PM
What you have there is fine, however, it sets the initial state only.
My point is that no further changes can be made, for example through an event handler. This sort of functionality only applies to the handful of layer properties.
There was once talk of introducing an apply() method that would allow for such dynamic functionality through JSSS but it never happened.

The link you provide actually mentions the fact that NN4 does not support "dynamic manipulation"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum