Layering div using zIndex

Question

Background:

I am attempting to have a radio buttons set zIndex onclick to bring a div to the foreground.

Each associated div is positioned atop each other, having the same CSS (position: absolute;).

I have attempted to use a global variable to keep incrementing and applying as zIndex to a specific div id when a radio button is clicked. I have also attempted to use a loop to set all zIndex to 1 and the passed div name set to 2. I will have both sets of code in the related section.

Issue:

I am not seeing the zIndex applied, for either incremented or looped functions, when inspecting the elements on the page.

Question:

Any help to get the zIndex to apply would be appreciated. Listing out glaring issues would also be on the table, as I am very much still learning these languages.

Code in Question:

<script type="javascript" src="index_scripts.js">
   var highest_index = 1;
   function getHighestIndex() {
    return ++highest_index;
   }
   function beg1() {
    document.getElementById('beginner1').style.zIndex = getHighestIndex();
   }
   function adt1() {
    document.getElementById('adept1').style.zIndex = getHighestIndex();
   }
   function int1() {
    document.getElementById('intermediate1').style.zIndex = getHighestIndex();
   }
   function adjust_zIndex(ele_id) {
    var i = 0;
    var max_div = document.getElementById('test').getElementsbyTagName('div');
    var z;
    for (i; i < max_div; i++) {
     var div_id = div_id[i];
     if (ele_id === div_id) {
      z = 2;
     } else {
      z = 1;
     }
     document.getElementById('div_id').style.zIndex = z;
    }
   }
  </script>

/* ##########################
   Base objects
   ######################## */
   body {
    background-color: black;
   }
   form {
    font-family: Verdana;
   }
   div {
    position: absolute;
    background-color: lightblue;
   }
   /* ##########################
   Division IDs
   ######################## */
   #top, #btm {
    left: 1%;
    right: 1%;
    font-weight: bold;
    border: 1px solid blue;
   }
   #top {
    top: 1%;
    bottom: 95%;
    vertical-align: top;
   }
   #bdy,#beginner1 , #adept1, #intermediate1 {
    overflow-y: scroll;
    top: 6%;
    height: 89%;
    left: 20%;
    right: 1%;
    border: 1px solid blue;
   }
   #btm {
    top: 96%;
    bottom: 1%;
    font-size: 9px;
    vertical-align: middle;
   }
   #dok {
    overflow-y: scroll;
    top: 6%;
    height: 89%;
    left: 1%;
    right: 81%;
    font-size: 12px;
    border: 1px solid blue;
   }
   /* ##########################
   Items within divisions IDs
   ######################## */
            /* */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta name="WebPartPageExpansion" content="full" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML Testing Site</title>
  
 </head>
 <body>
  <form>
   <!-- 
    TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
   --> 
   <div id="top">
    <table width="100%">
     <tr>
      <td width="50%">Test Site</td>
      <td width="50%" style="text-align: right;">Welcome to the Jungle</td>
     </tr>
    </table>
   </div>
   <div id="btm">
    <p>Mock-Up</p>
   </div>
   <!-- 
    DOCK ON LEFT   
   -->  
   <div id="dok">
    <div style="left: 0; width:100%;">
     <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
      Beginner
     </p>
     <input type="radio" name="div_select" onclick="adjust_zIndex(beginner1)"/>Video<br/>
     <hr/>
     <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
      Adept
     </p>
     <input type="radio" name="div_select" onclick="adjust_zIndex(adept1)"/>Video<br/>
     <hr/>
     <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
      Intermediate
     </p>
     <input type="radio" name="div_select" onclick="int1()"/>Video<br/>
     <hr/>
       </div> 
   </div> 
   <!-- 
    OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK  
   -->  
   <div id="beginner1">
    <table>
     <tr>
      <td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
     </tr>
    </table>
    <hr/>
    <table width="100%">
     <tr>
      <td style="width: 50%;"><ul>
       <li>List Item</li>
      </ul></td>
      <td style="width: 50%;">Second Column</td>
     </tr>
     <tr>
      <td style="height: 1000px; vertical-align: bottom;">End</td>    
     </tr>
    </table>
   </div>
   <div id="adept1">
    <p id="ap"></p>
    <table>
     <tr>
      <td>Adept 1 div intended to test </td>
     </tr>
    </table>
   </div>
   <div id="intermediate1">
    <p id="ap"></p>
    <table>
     <tr>
      <td>Intermediate 1 div intended to test </td>
     </tr>
    </table>
   </div>
   <div id="bdy" style="text-align: center;">
    <p style="font-size: 12px">Please select a radio button.</p>
   </div>
  </form>
 </body>
</html>

I think `if (ele_id = div_id)` is wrong. You should use a triple equals `===` for a comparison. — Tom O' Mara, Sep 23 '19 at 14:51
@TomO'Mara thanks for that; i've implemented that fix (will update post), though that has not corrected the issue of zIndex not being applied. — Cyril, Sep 23 '19 at 14:59
I think you are making things way more complicated than they need to be. Why stacking the divs in the first place? Why not having the active one displayed and the others hidden? Also there are many things wrong in your code, it's hard to know where to even begin... Calling functions with strings instead of a variable (`document.getElementById('div_id')`) and then in other places the exact opposite (`onclick="adjust_zIndex(beginner1)"` - there is no variable `beginner1`, you'd want to pass that as a string). Hard to help you, really, before you get your code and approach sorted. — Constantin Groß, Sep 23 '19 at 15:00
Possible duplicate of [Why does z-index not work?](https://stackoverflow.com/questions/9191803/why-does-z-index-not-work) — random_user_name, Sep 23 '19 at 15:02
@cale_b i was reading through that earlier today and this past Friday. I can't seem to figure out where I'm f'ing this up. I have position set to absolute, which is all I'm noticing is in that post. — Cyril, Sep 23 '19 at 15:03
@ConstantinGroß Will take a bit longer to fix what I can... thanks for pointing that out to me about where I messed up the string/variable issue. — Cyril, Sep 23 '19 at 15:05
Also note that your snippet does not run - it has errors in the console... `SyntaxError: expected expression, got '<'` and `ReferenceError: adjust_zIndex is not defined` - until those are fixed, it's not very easy to help (because you are right - I see now you have `position: absolute` - so maybe these errors are the issue? — random_user_name, Sep 23 '19 at 15:07
@cale_b will be working to fix that and constantin's points too. will tag folks back once i think i've got this in better order. i appreciate your quick review in this and my apologies for any misunderstandings. — Cyril, Sep 23 '19 at 15:12

score 1 · Accepted Answer · answered Sep 23 '19 at 15:35

I corrected your code and simplified it to some extent.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta name="WebPartPageExpansion" content="full" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML Testing Site</title>
     <script>

        function adjust_zIndex(ele_id) {
            var i = 0;
            var max_div = document.getElementsByTagName('div');
            console.log(max_div ,'ele_id', ele_id);
            var z;
            var ids = ['adept1' , 'beginner1' , 'intermediate1'];
            for (i; i < max_div.length; i++) {
                var div_id = max_div[i];
                if (ele_id == div_id.id) {

                console.log('here 2' , div_id.id);
                    document.getElementById(div_id.id).style.zIndex = 3;

                } 

            }
            var index = ids.indexOf(ele_id);
            for(var i=0; i < ids.length;i++)
            {
                if(i == index)
                continue;
                else 
                document.getElementById(ids[i]).style.zIndex =1;
                }

        }
    </script>
    <style type="text/css">
        /*  ##########################
        Base objects
        ########################    */
        body {
            background-color: black;
        }
        form {
            font-family: Verdana;
        }
        div {
            position: absolute;
            background-color: lightblue;
        }
        /*  ##########################
        Division IDs
        ########################    */
        #top, #btm {
            left: 1%;
            right: 1%;
            font-weight: bold;
            border: 1px solid blue;
        }
        #top {
            top: 1%;
            bottom: 95%;
            vertical-align: top;
        }
        #bdy,#beginner1 , #adept1, #intermediate1 {
            overflow-y: scroll;
            top: 6%;
            height: 89%;
            left: 20%;
            right: 1%;
            border: 1px solid blue;
        }
        #btm {
            top: 96%;
            bottom: 1%;
            font-size: 9px;
            vertical-align: middle;
        }
        #dok {
            overflow-y: scroll;
            top: 6%;
            height: 89%;
            left: 1%;
            right: 81%;
            font-size: 12px;
            border: 1px solid blue;
        }
        /*  ##########################
        Items within divisions IDs
        ########################    */
        /* */
    </style>
</head>
<body>
    <form>
        <!-- 
            TOP AND BOTTOM OF PAGE, DOCK AND BODY/OVERLAYS ARE RELATIVE TO THESE POSITIONS
        --> 
        <div id="top">
            <table width="100%">
                <tr>
                    <td width="50%">Test Site</td>
                    <td width="50%" style="text-align: right;">Welcome to the Jungle</td>
                </tr>
            </table>
        </div>
        <div id="btm">
            <p>Mock-Up</p>
        </div>
        <!-- 
            DOCK ON LEFT            
        -->     
        <div id="dok">
            <div style="left: 0; width:100%;">
                <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
                    Beginner
                </p>
                <input type="radio" name="div_select" onclick="adjust_zIndex('beginner1')"/>Video<br/>
                <hr/>
                <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
                    Adept
                </p>
                <input type="radio" name="div_select" onclick="adjust_zIndex('adept1')"/>Video<br/>
                <hr/>
                <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
                    Intermediate
                </p>
                <input type="radio" name="div_select" onclick="int1()"/>Video<br/>
                <hr/>
        </div>  
        <!-- 
            OVERLAY BODY SECTIONS, TO BE IN FOREGROUND WHEN RADIO BUTTON SELECTED FROM DOCK     
        -->     
        <div id="beginner1">
            <table>
                <tr>
                    <td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Beginner 1 div intended to test</td>
                </tr>
            </table>
            <hr/>
            <table width="100%">
                <tr>
                    <td style="width: 50%;"><ul>
                        <li>List Item</li>
                    </ul></td>
                    <td style="width: 50%;">Second Column</td>
                </tr>
                <tr>
                    <td style="height: 1000px; vertical-align: bottom;">End</td>                
                </tr>
            </table>
        </div>
        <div id="adept1">
            <p id="ap"></p>
            <table>
                <tr>
                    <td>Adept 1 div intended to test </td>
                </tr>
            </table>
        </div>
        <div id="intermediate1">
            <p id="ap"></p>
            <table>
                <tr>
                    <td>Intermediate 1 div intended to test </td>
                </tr>
            </table>
        </div>
        <div id="bdy" style="text-align: center;">
            <p style="font-size: 12px">Please select a radio button.</p>
        </div>
    </form>
</body>

Thanks for trying to help! Code-only answers are not very useful. What did you change? Why does it work? Additionally, OP had a runnable snippet, would be preferable if your answer was also a runnable snippet. — random_user_name, Sep 23 '19 at 15:40
I changed the javascript code and removed the extra methods. The logic here is to get the id of the element clicked and set its z index to 2 or 3 and then set the rest of the divs z-index to 1. I shared the whole code just to prove a working example. Agreed, snippet would have been a better way. — Mohammad S. Alam, Sep 23 '19 at 16:10
@MohammadShahnawazAlam what is confusing me (and yes it appears to work) is **how** having `if (ele_id == div_id.id)` 3 `else ` 1 doesn't work, while what you wrote does work. I see that you split out the two aspects of the original if-statement, setting the prefered `ele_id` to 3, but then the else case you use a second loop to check if the indexes are the same, then change those. — Cyril, Sep 23 '19 at 16:20
@MohammadShahnawazAlam your code is working. What i was curious about was how the original if-statement I put in, with `if (ele_id == div_id.id)` set to 3 `else` set to 1, doesn't work, while this does work (noting that you added `.id` into the `div_id.id`). That is really for my understanding, kind *why* you chose to do it this way. In the long run, it would be ideal to not have to maintain `ids` that you have in, but if that's what works, i will do it. — Cyril, Sep 23 '19 at 16:27
No your code is fine too. This line was wrong document.getElementById('div_id').style.zIndex = z; Here this line will aply z-index to the div which has an id named 'div_id' which you dont have anywhere in the code. Thats why it wasnt working. — Mohammad S. Alam, Sep 23 '19 at 16:33
@MohammadShahnawazAlam ...i just realized why none of my javascript was applying... went line by line with your fix and ` — Cyril, Sep 23 '19 at 16:42
So - my point was _update your answer_ to show specifically what you fixed. And create a snippet. You can edit your answer - and you should - that way when someone finds this in the future, it's very clear / useful to them. — random_user_name, Sep 23 '19 at 16:45
Yes there were many errors. Thats why i shared the whole working demonstration of it. Cheers! — Mohammad S. Alam, Sep 23 '19 at 16:45

Layering div using zIndex

1 Answers1