Javascript is not changing CSS variable

Question

I am trying to manipulate the CSS variable to start the menu from a position relative to the screen size, but it does not change from the value initialized in the beginning of the style section.

My code can be found at https://jsfiddle.net/70qpqg2f/

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="Width=device-Width, initial-scale=1">
  <link href="menu-vertical.css" rel="stylesheet" type="text/css" />
  <style>
     :root {
      --LeftSide: 50;
    }

    #menu-v li,
    #menu-v a {
      zoom: 1;
    }
    /* Hacks for IE6, IE7 */

    #menu-v {
      width: 180px;
      /* Main Menu Item widths */
      border: 1px solid #ccc;
      border-top: none;
      position: relative;
      font-size: 0;
      list-style: none;
      padding: 0;
      display: block;
      margin-left: calc(var(--LeftSide) * 1px);
      margin-top: 40px;
      z-index: 9;
    }

    #menu-v ul {
      width: 180px;
      /* Main Menu Item widths */
      border: 1px solid #ccc;
      border-top: none;
      position: relative;
      font-size: 0;
      list-style: none;
      padding: 0;
      display: block;
      margin: 0;
      z-index: 9;
    }
    /* Top level menu links style
    ---------------------------------------*/

    #menu-v li {
      background: #FFF url(bg.gif) repeat-x 0 2px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    #menu-v li a {
      font: normal 12px Arial;
      border-top: 1px solid #ccc;
      display: block;
      /*overflow: auto; force hasLayout in IE7 */
      color: black;
      text-decoration: none;
      line-height: 26px;
      padding-left: 26px;
    }

    #menu-v ul li a {
      line-height: 30px;
    }

    #menu-v li a.arrow:hover {
      background-image: url(arrowon.gif);
      background-repeat: no-repeat;
      background-position: 97% 50%;
    }
    /*Sub level menu items
    ---------------------------------------*/

    #menu-v li ul {
      position: absolute;
      width: 200px;
      /*Sub Menu Items width */
      visibility: hidden;
    }

    #menu-v a.arrow {
      background-image: url(arrow.gif);
      background-repeat: no-repeat;
      background-position: 97% 50%;
    }

    #menu-v li:hover,
    #menu-v li.onhover {
      background-position: 0 -62px;
    }

    #menu-v ul li {
      background: rgba(255, 255, 255, 0.86);
      background-image: none;
    }

    #menu-v ul li:hover,
    #menu-v ul li.onhover {
      background: #FFF;
      background-image: none;
    }
  </style>
  <SCRIPT TYPE="text/javascript">
    var alignWithMainMenu = false;

    /* Vertical Menu - Developed by http://www.MenuCool.com/vertical/vertical-menu. Retaining this comment is required.*/
    function initmenu() {
      menu - v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
      var e = document.getElementById("menuV2");
      var i = e.offsetHeight;
      var b = e.getElementsByTagName("ul");
      var g = /msie|MSIE 6/.test(navigator.userAgent);
      if (g) {
        for (var h = e.getElementsByTagName("li"), a = 0, j = h.length; a < j; a++) {
          h[a].onmouseover = function () {
            this.className = "onhover";
          };
          h[a].onmouseout = function () {
            this.className = "";
          };
        }
      }


      for (var a = 0; a < b.length; a++) {
        var c = b[a].parentNode;
        c.getElementsByTagName("a")[0].className += " arrow";
        b[a].style.left = c.offsetWidth + "px";
        b[a].style.top = c.offsetTop + "px";

        if (alignWithMainMenu) {
          var d = getParentOffsetRoot(c.parentNode, 0);
          if (b[a].offsetTop + b[a].offsetHeight + d > i) {
            var f;
            if (b[a].offsetHeight > i) {
              f = -d;
            } else {
              f = i - b[a].offsetHeight - d;
              b[a].style.top = f + "px";
            }
          }
        }

        c.onmouseover = function () {
          if (g) {
            this.className = "onhover";
          }
          var a = this.getElementsByTagName("ul")[0];
          if (a) {
            a.style.visibility = "visible";
            a.style.display = "block";
          }

        };

        c.onmouseout = function () {
          if (g) {
            this.className = "";
          }
          this.getElementsByTagName("ul")[0].style.visibility = "hidden";
          this.getElementsByTagName("ul")[0].style.display = "none";
        };

      }

      for (var a = b.length - 1; a > -1; a--) {
        b[a].style.display = "none";
      }
    }

    function getParentOffsetRoot(a, b) {
      if (a.id == "menuV2") {
        return b;
      } else {
        b += a.offsetTop;
        return getParentOffsetRoot(a.parentNode.parentNode, b);
      }
    }

    if (window.addEventListener) {
      window.addEventListener("load", initmenu, false);
    } else {
      window.attachEvent && window.attachEvent("onload", initmenu);
    }

    //          function myfunction() {
    //              document.menu-v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
    //          }

    //          window.onload = myfunction;
  </SCRIPT>
</head>

<body bgcolor="#bfb9b5">
  <ul id="menu-v">
    <li><a href="#">Item 1</a></li>
    <li>
      <a href="#">Item 2</a>
      <ul class="sub">
        <li><a href="vertical-menu#1">Vertical Menu</a></li>
        <li><a href="vertical-menu#2">Vertical Menus</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul class="sub">
        <li><a href="#">Sub Item 3.1</a></li>
        <li><a href="#">Sub Item 3.2</a></li>
        <li><a href="#">Sub Item 3.3</a></li>
        <li><a href="#">Sub Item 3.4</a></li>
        <li><a href="#">Sub Item 3.5</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li>
      <a href="#">Item 5</a>
      <ul class="sub">
        <li><a href="#">Sub Item 5.1</a></li>
        <li>
          <a href="#">Sub Item 5.2</a>
          <ul class="sub">
            <li><a href="#521">Vertical Menu 5.2.1</a></li>
            <li><a href="#522">Vertical Menu 5.2.2</a></li>
            <li><a href="#523">Vertical Menu 5.2.3</a></li>
            <li><a href="#524">Vertical Menu 5.2.4</a></li>
            <li><a href="#525">Vertical Menu 5.2.5</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Sub Item 5.3</a>
          <ul class="sub">
            <li><a href="#">Sub Item 5.3.1</a></li>
            <li><a href="#">Sub Item 5.3.2</a></li>
            <li><a href="#">Sub Item 5.3.3</a></li>
            <li><a href="#">Sub Item 5.3.4</a></li>
            <li><a href="#">Sub Item 5.3.5</a></li>
            <li><a href="#">Sub Item 5.3.6</a></li>
            <li><a href="#537">Vertical Menus 5.3.7</a></li>
            <li><a href="#538">Vertical Menus 5.3.8</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 6</a></li>
  </ul>
</body>

</html>

I tried to put all HTML, CSS and Javascript in one file to make it easier to manipulate. If I separate out each piece of code to individual files it makes no difference.

Jedi · Answer 1 · 2017-06-25T04:25:54.257

0

Firstly, you should separate your HTML, CSS and Javascript, at least in the fiddle.

Secondly, fiddles shouldn't have HTML, META and HEAD tags, and it raises the warning.

Thirdly, when your fiddle is run, it throws this error:

Uncaught ReferenceError: v is not defined

The variable v does not exist when you reference it in myfunction (as v.style):

        function myfunction() {
            document.menu-v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
        }

The dash (-) in your element name (menu-v) causes the problem.

Of course, even if you did rename it, you cannot access and modify a CSS class using document.cssclassname. See this SO post and this one

Simply access it using the id of the div using the javascript method: getElementById() as shown in an update to your fiddle. Note: there are several other invalid accesses in your javascript. Simply debug them by looking at the error in the web console.

edited Jun 25 '17 at 04:25

answered Jun 24 '17 at 18:54

Jedi

3,088
2
28
47

Please go to https://jsfiddle.net/70qpqg2f/3/ and explain why the "LeftSide" variable does not change as it should... – user3590052 Jun 25 '17 at 04:07
Two reasons. 1. JSFiddle's onLoad overrides yours [see here](https://stackoverflow.com/questions/31946528/simple-onload-doesnt-work-in-jsfiddle) and so the method isn''t called. Use the nowrap option. 2. As I mentioned in the answer, you cannot access a CSS class as document.VertMenu. See the SO posts that my answer links to access it. Your code currently throws: `Uncaught TypeError: Cannot read property 'style' of undefined` when accessing `document.VertMenu.style.` – Jedi Jun 25 '17 at 04:16
Can you explain why the submenus are not working, please see submenu working example -- jsfiddle.net/70qpqg2f/2 – user3590052 Jun 25 '17 at 15:10
Sorry I know this example has errors with jsfiddle, but what I don't understand is that the submenus are working. – user3590052 Jun 25 '17 at 15:11
Please don't merge multiple debugging questions in your comments. Ask a separate question. – Jedi Jun 25 '17 at 15:23
Sorry, I was simply trying to understand why example jsfiddle.net/70qpqg2f/5 did not support the sub menu functionality. The original example I found was at http://www.menucool.com/vertical/vertical-menu. All I wanted to do with this code was to modify the left margin to dynamically move according to the size of the screen. – user3590052 Jun 25 '17 at 16:08

Javascript is not changing CSS variable

1 Answers1