CODEWITHSUNDEEP
javascripthtmlcssoverlay
Thomas Phan
Thomas Phan

Reputation: 247

Div element is scrolling over instead of underneath another div element

I'm trying to get a list of items to scroll underneath another div element within a board, but right now it is scrolling over it. I've tried using the CSS z-index property, but it is not working for me. I'm not sure if I'm using it correctly since this is my first time trying to position elements on the z-axis.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="update.js"></script>
  <script src="scrollDrag.js"></script>
</head>

<body onload="update()">
  <ul class="board list-group" style="overflow:hidden">
    <div id="lb"></div>
    <div id="sub-lb"></div>
  </ul>
</body>  
</html>

JS: (update.js)

function update() {
  "use strict";

//  setTimeout(function () {update(); }, 10000);

  // List of variables
  var xmlhttp, resultString, unorderedList, listItem, infoText, arrayInfo, info,
    i, temp, span;

  // code for IE7+, Firefox, Chrome, Opera, Safari
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      // Split php response text into an array (contains the top 50 of leaderboard)
      resultString = xmlhttp.responseText;
      arrayInfo = resultString.split(";");

      // Set up the rank, name, total headings
      listItem = document.createElement("li");
      listItem.setAttribute("class", "list-group-item heading");
      listItem.setAttribute("style", "background-color:#0066FF");
      infoText = document.createTextNode("Rank");
      span = document.createElement("span");
      span.setAttribute("style", "margin-left:1%");
      span.appendChild(infoText);
      listItem.appendChild(span);
      infoText = document.createTextNode("Name");
      span = document.createElement("span");
      span.setAttribute("style", "position:absolute; left:35%");
      span.appendChild(infoText);
      listItem.appendChild(span);
      infoText = document.createTextNode("Zenny");
      span = document.createElement("span");
      span.setAttribute("style", "float:right");
      span.appendChild(infoText);
      listItem.appendChild(span);
      document.getElementById("lb").appendChild(listItem);

      // Loop through arrayInfo
      for (i = 0; i < arrayInfo.length - 1; i += 1) {
        // Split content of each index of arrayInfo and store it into a new array
        // Split in form of rank, name, money
        temp = arrayInfo[i];
        info = temp.split(",");

        // Create a new list item element
        listItem = document.createElement("li");
        listItem.setAttribute("class", "list-group-item");
        listItem.setAttribute("style", "width:100%; font-size:150%");

        // Create a new span element for rank 
        infoText = document.createTextNode(info[0]);
        span = document.createElement("span");
        span.setAttribute("style", "margin-left:2%");
        span.appendChild(infoText);
        listItem.appendChild(span);

        // Create a new span element for name
        infoText = document.createTextNode(info[1]);
        span = document.createElement("span");
        span.setAttribute("style", "position:absolute; left:35%");
        span.appendChild(infoText);
        listItem.appendChild(span);

        // Create a new span element for money
        infoText = document.createTextNode(info[2]);
        span = document.createElement("span");
        span.setAttribute("style", "float:right; margin-right:2%");
        span.appendChild(infoText);
        listItem.appendChild(span);

        document.getElementById("sub-lb").appendChild(listItem);
      }
    }
  };

  xmlhttp.open("GET", "update.php", true);
  xmlhttp.send();
  return false;
}

The scrollDrag.js file only specify the element to be scrolled, which is "sub-lb", as well as touch&drag events, so it should not be a cause of the problem.

Repeat of problem: Element "sub-lb" is scrolling over element "lb" currently, and I don't know how to get it to scroll underneath.

Upvotes: 0

Views: 227

Answers (1)

Kaleb Anderson
Kaleb Anderson

Reputation: 188

It looks like you are using stock Bootstrap css. From the code you provided, it doesn't look like the z-index is set anywhere as far as I can tell.

For testing, add style="z-index:xx" to the elements, where xx is some number of your choice, ensuring that the higher index is the one you want on top.

Once you have validated that this works, you should consider including an override css file that contains all of your css customizations, so that you can avoid in-line styling and keep the Bootstrap css as-is.

If you have already tried it this way, please post code, because in my mind this would be the simplest way to take care of this issue.

Upvotes: 1

Related Questions