Home/ Questions/Q 6847669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:46:23+00:00

I am trying to create a hovering menu, but it doesn’t work. I create

  • 0

I am trying to create a hovering menu, but it doesn’t work. I create a menu and set it with a high z-index value. I then generate a table using javascript, but then I scroll down the table goes in front of my menu buttons.

Edit:

I am just trying to get this to work for FF8.

Edit 2:

This code will actually work. In order to make my buttons appear on top I just set my table z-index to -1; 

    #blackHead 
    {
        width:100%;
        background-color:White;
    }
    #table
    {
        position:relative;
        width: 40%;
        left: 30%;
        z-index: -1;
    }



    #header
    {
        position: fixed;
        top:3%;
        left:30%;
        width:40%;
        z-index: 100;

    }
    .inv 
    {
        visibility:hidden;
        width:30px;
    }
    .headerButton
    {
        text-decoration:none;
        position:relative;
        font-family:Arial;
        font-weight:bold;
        color:White;
        border: solid 1px  black;
        background-color: Black;
        border-radius: 5px;
        padding: 5px;
        z-index: 101;
    }
    .headerButton:hover
    {
        background-color: White;
        color: Black;
    }
    #myTable {
        position: absolute;
        top:10%;
    }

    #button1
    {
        position: absolute;
        top:0%;
        left:0%;

    }   
    #button2
    {
        position: absolute;
        top:0%;
        right:0%;
    }

    #button3
    {
        position: absolute;
        top:0%;
        left:50%;
    }
    #button4
    {
        position: absolute;
        top:10%;
        left:50%;
    }
    #button5
    {
        position: absolute;
        top:10%;
        right:0%;
    }
</style>




<html>

<head>
<title>Table</title>    

</head>

<body>
<div id="header" class="headerBar">
    <a href=# id="create_table" class="headerButton" onclick="create_table()">Create Table</a>
    <span class="inv">" "</span>
    <a href=# id="update_table" class="headerButton" onclick="update_table()">Update Table</a>
    <span class="inv">" "</span>
    <a href=# id="quit" class="headerButton" onclick="quit()">Quit</a>
    <span class="inv">" "</span>
    <a href=# id="Send_Json" class="headerButton" onclick="send_json()">Send Json</a>
    <span class="inv">" "</span>
    <a href=# id="A1" class="headerButton" onclick="start_timer()">Start Timer</a>
    <span class="inv">" "</span>
    <a href=# id="A2" class="headerButton" onclick="stop_timer()">Stop Timer</a>
</div>



</body>


</html>
<script type="text/javascript">
   function create_table() {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");
        tbl.id = "table";
        var tblBody = document.createElement("tbody");
        tbl.style.zIndex = -1;
        // creating all cells
        var xmlDoc = getXML();
        var x = xmlDoc.getElementsByTagName("Registers");

        for (var i = 0; i < x.length; i++) {
            // creates a table row
            var row = document.createElement("tr");

            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var name = document.createElement("td");
            name.style.width = "80%";
            var nameText = document.createTextNode(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
            name.appendChild(nameText);
            row.appendChild(name);

            var number = document.createElement("td");
            number.style.width = "10%";
            var numberText = document.createTextNode(x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue);
            number.appendChild(numberText);
            row.appendChild(number);

            var value = document.createElement("td");
            value.style.width = "10%";
            var valueText = document.createTextNode(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
            value.appendChild(valueText);
            row.appendChild(value);

            row.addEventListener("dblclick", modify_value, false);

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
        tbl.style.position = "absolute";
        tbl.style.top = "30%";

    }

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    myTable has position: absolute; – that will always go over something with position: static;

    z-index will work, but both elements (the table and the menu have to both have z-index and position: absolute;

    • 0