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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show/hide layer based on selected field value

    I am trying the fieldlayer to be visible when list options are selected (value 1) and I want to show forgroundlayer (initially visible) when no selection been made. I know my Javascript is messed up. Please help!

    <html>
    <head>
    <title>Untitled Document</title>
    <script language="JavaScript">
    <!--
    function checkValue() {
    if field select="1" {
    document.all.fieldlayer.style.visibility = "visible"
    } else {
    document.all.forgroundlayer.style.visibility = "hidden"
    }
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body bgcolor="#FFFFFF" text="#000000">

    <div id="forgroundlayer" style="position:absolute; left:180px; top:285px; width:111px; height:27px; z-index:10; visibility: visible; background-color: #0099FF; layer-background-color: #0099FF; border: 1px none #000000" onMouseDown="checkValue()" >
    </div>

    <div id="fieldlayer" style="position:absolute; left:180px; top:285px; width:138px; height:32px; z-index:9; visibility: hidden" onMouseDown="checkValue()">
    <select name="select" >
    <option value="0"></option>
    <option value="1">red apples</option>
    <option value="1">green grapes</option>
    <option value="1">watermelons</option>
    </select>
    </div>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Feb 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just did some very similar script.
    If you want to be fully compliant for most browsers you need to do something like this:

    // JavaScript Document
    <script language="JavaScript" type="text/javascript">
    <!--
    <!-- script to show or hide the flash movie or non-flash div -->
    function showOrHide(value) {
    alert("showOrHide func called: " + value);

    if (document.layers) {
    ////
    /// Proprietary Navigator 4.x code

    //---
    myMenu=document.layers[value]; // these are the three ways you can
    //myMenu=document.myElement; // access an element with N4.x
    //myMenu=document.layers[0];
    //---


    ////
    /// accessing the Layer object properties....
    //
    myMenu.visibility='show';
    }
    else if (document.all && !document.getElementById) {
    ////
    /// Proprietary IE4
    //

    //---
    //myMenu=document.all["myElement"]; // these are the three ways you can
    //myMenu=document.all.myElement; // access an element with IE4+

    /// accessing the element style object properties...
    //
    value.style.visibility='visible';
    }
    else if (document.getElementById && document.body.style) {
    /////
    ////
    /// The Standards Compliant Way .. recommended.
    //

    myMenu=document.getElementById(value);

    // using DOM HTML to set style properties.
    myMenu.style.visibility="visible";

    }
    }
    // -->
    </script>


    hope this helps.


  •  

    Posting Permissions

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