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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layer Positioning Question

    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>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Location
    Bulgaria
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, It will not work in NN4, because the code is wrong.
    Replace 'hidden' and 'visible' with 'hide' and 'show'

    Alex

  • #5
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #7
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello,

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

    Best regards, joble.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is what goes in the body of your page. You need the script from your first post between the <head></head> tags.

  • #9
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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.....
    Last edited by adios; 10-01-2002 at 05:02 AM.

  • #11
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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

    Edit:
    OK, hacked our way around it...re-posted (above)
    Last edited by adios; 10-01-2002 at 04:56 AM.

  • #13
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #15
    New Coder
    Join Date
    Sep 2002
    Location
    manila
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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