Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hiding table elements in NS 4.7

    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

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    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.
    Last edited by Puffin the Erb; 12-06-2004 at 09:12 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ]
    Last edited by brothercake; 12-07-2004 at 04:02 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Code:
    <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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bet you're wishing you'd never asked now
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #10
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Puffin the Erb
    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.
    *keep it simple (TM)

  • #11
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Be aware that once JavaScript StyleSheets are applied they cannot be dynamically changed either.
    Dynamic functionality is achieved through the layers property.

  • #12
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Puffin the Erb
    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.
    *keep it simple (TM)

  • #13
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    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.

  • #14
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Puffin the Erb
    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):

    PHP Code:
    <style type="text/javascript"

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

    </
    style>

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

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

    Code:
    <image src="&{myimage };" ..>
    see this link for further details: Practical Uses for JS Entities
    *keep it simple (TM)

  • #15
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    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"
    Last edited by Puffin the Erb; 12-16-2004 at 08:27 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •