ansaurus

Question

Set Default Visible Div in Dropdown Menu

Answer 1

A:

I don't like that script but...

<head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Untitled Page</title>
    <script type="text/javascript"><!--
        var lastDiv = "one";
        function showDiv(divName) {
            // hide last div
            if (lastDiv) {
                document.getElementById(lastDiv).className = "hiddenDiv";
            }
            //if value of the box is not nothing and an object with that name exists, then change the class
            if (divName && document.getElementById(divName)) {
                document.getElementById(divName).className = "visibleDiv";
                lastDiv = divName;
            }
        }
        //-->
    </script>
    <style type="text/css" media="screen"><!--
        .hiddenDiv {
            display: none;
            position: absolute;
            top: 100px;
        }
        .visibleDiv {
            display: block;
            border: 1px grey solid;
            position: absolute;
            top: 100px;
        }

        --></style>
</head>

<body bgcolor="#ffffff">
    <form id="FormName" action="blah.php" method="get" name="FormName">
        <select name="selectName" size="1" onchange="showDiv(this.value);">
            <option value="">Choose One...</option>
            <option value="one">first</option>
            <option value="two">second</option>
            <option value="three">third</option>
        </select>
    </form>
    <p id="one" class="visibleDiv">This is paragraph 1.</p>
    <p id="two" class="hiddenDiv">This is paragraph 2.</p>
    <p id="three" class="hiddenDiv">This is paragraph 3.</p>
</body>

Pedro Gil 2010-09-21 15:43:39

Thanks, Pedro. That works great. It seems like a clean, efficient way to do it.

Beau 2010-09-21 17:09:10

One other question: I want to use this script multiple times on the same page. How can I set the default visible div by changing "var lastDiv = "one";" to "var lastDiv = div with class name visibleDiv" since I can't give every default div an id of "one." Thanks.

Beau 2010-09-22 16:11:49

Answer 2

A:

Here's what I think is the simplest way to do what I'm trying to do. It uses z-index to stack the divs rather than showing/hiding them.

<html>
<head>
<style type="text/css" media="screen"><!--
p {
    color: #FFF; 
    position: absolute;
}
#one {
    background-color: #699;
    z-index: 1;
}
#two {
    background-color: #039;
}
#three {
    background-color: #909;
}
#four {
    background-color: #F00;
}
--></style>
<script type="text/javascript">
var z = 10;
function ShowHide(id) {
document.getElementById(id).style.display = "block";
document.getElementById(id).style.zIndex = z++;
}
</script>
</head>
<body>
    <form action="" method="post" name="session">
    <select name="name" size="1" onchange="ShowHide(this.value);">
    <option value="one" selected="selected">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    </select>
    </form>
    <p id="one">This is paragraph 1.</p>
    <p id="two">This is paragraph 2.</p>
    <p id="three">This is paragraph 3.</p>
    <p id="four">This is paragraph 4.</p> 
</body>
</html>

Beau 2010-09-22 20:20:36

ansaurus

tags:

views:

answers:

Set Default Visible Div in Dropdown Menu

related questions