Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Monis247 commented 2 years ago

Do i have to use an alternative way to get this to work or can i make it work with jQuery? Please help thanks.

For HC Off-canvas Nav to work as a jQuery plugin, jQuery has to be a property of global window object, so be careful when using it in combination with Babel/Webpack/Browserify and jQuery.

somewebmedia commented 2 years ago

Can you show me the code of how are you calling it?

Monis247 commented 2 years ago

    <div id="nav-container">
      <nav id="main-nav">

        <ul class="first-nav">
          <li class="cryptocurrency">
            <a href="https://www.google.com/search?q=Crypto" rel="noreferrer" target="_blank">Cryptocurrency</a>
            <ul>
              <li><a href="#">Bitcoin</a></li>
              <li><a href="#">Ethereum</a></li>
              <li class="add">
                <a href="#" data-nav-close="false" data-add="['Litecoin','Dogecoin','Bitcoin Cash','ZCash']">Add Coin</a>
              </li>
            </ul>
          </li>
          <li class="devices">
            <span>Devices</span>
            <ul>
              <li class="mobile">
                <a href="#">Mobile Phones</a>
                <ul>
                  <li><a href="#">Super Smart Phone</a></li>
                  <li><a href="#">Thin Magic Mobile</a></li>
                  <li><a href="#">Performance Crusher</a></li>
                  <li><a href="#">Futuristic Experience</a></li>
                </ul>
              </li>
              <li class="television">
                <a href="#">Televisions</a>
                <div class="subnav-container">
                  <ul>
                    <li><a href="#">Flat Superscreen</a></li>
                    <li><a href="#">Gigantic LED</a></li>
                    <li><a href="#">Power Eater</a></li>
                    <li><a href="#">3D Experience</a></li>
                    <li><a href="#">Classic Comfort</a></li>
                  </ul>
                </div>
              </li>
              <li class="camera">
                <a href="#">Cameras</a>
                <ul>
                  <li><a href="#">Smart Shot</a></li>
                  <li><a href="#">Power Shooter</a></li>
                  <li><a href="#">Easy Photo Maker</a></li>
                  <li><a href="#">Super Pixel</a></li>
                </ul>
              </li>
              <li data-nav-custom-content>
                <div class="custom-message">
                  You can add any custom content to your navigation items. This text is just an example.
                </div>
              </li>
            </ul>
          </li>
          <li class="magazines">
            <a href="#magazines">Magazines</a>
            <ul>
              <li><a href="#">National Geographic</a></li>
              <li><a href="#">Scientific American</a></li>
              <li><a href="#">The Spectator</a></li>
              <li><a href="#">The Rambler</a></li>
              <li><a href="#">Physics World</a></li>
              <li><a href="#">Popular Science</a></li>
              <li><a href="#">Popular Mechanics</a></li>
              <li><a href="#">Sky & Telescope</a></li>
              <li><a href="#">Discover</a></li>
              <li><a href="#">New Scientist</a></li>
              <li><a href="#">Psychology Today</a></li>
              <li><a href="#">Man's Health</a></li>
              <li><a href="#">Wired</a></li>
              <li><a href="#">Vogue</a></li>
              <li><a href="#">Elle</a></li>
              <li><a href="#">Cosmopolitan</a></li>
            </ul>
          </li>
          <li class="store">
            <a href="#">Store</a>
            <ul>
              <li>
                <a href="#">Clothes</a>
                <ul>
                  <li>
                    <a href="#">Women's Clothing</a>
                    <ul>
                      <li><a href="#">Tops</a></li>
                      <li><a href="#">Dresses</a></li>
                      <li><a href="#">Trousers</a></li>
                      <li><a href="#">Shoes</a></li>
                      <li><a href="#">Sale</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Men's Clothing</a>
                    <ul>
                      <li><a href="#">Shirts</a></li>
                      <li><a href="#">Trousers</a></li>
                      <li><a href="#">Shoes</a></li>
                      <li><a href="#">Sale</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#">Jewelry</a></li>
              <li><a href="#">Music</a></li>
              <li>
                <a href="#">Grocery</a>
                <h3>Fruits</h3>
                <ul>
                  <li><a href="#">Citruses and southern fruits</a></li>
                  <li><a href="#">Exotic fruits</a></li>
                  <li><a href="#">Apples and pears</a></li>
                  <li><a href="#">Nuts</a></li>
                </ul>
                <h3>Vegetables</h3>
                <ul>
                  <li><a href="#">Root vegetables</a></li>
                  <li><a href="#">Exotic vegetables</a></li>
                  <li><a href="#">Herbs</a></li>
                  <li><a href="#">Salads</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>

        <h3>Examples</h3>

        <ul class="second-nav">
          <li class="collections"><a href="#collections">Collections <span>3</span></a></li>
          <li class="nolink" data-nav-highlight>No Link</li>
          <li class="disabled"><a href="#" disabled>Disabled Link</a></li>
          <li class="add">
            <a href="#" data-nav-close="false" data-add="['Charts', 'Logs', 'Tests', 'Profile']">Add Item</a>
          </li>
        </ul>

        <ul class="bottom-nav">
          <li class="github">
            <a href="https://github.com/somewebmedia" rel="noreferrer" target="_blank">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
            </a>
          </li>
          <li class="email">
            <a href="mailto:somewebmedia@gmail.com" target="_blank">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
            </a>
          </li>
          <li class="ko-fi">
            <a href="https://ko-fi.com/somewebguy" rel="noreferrer" target="_blank">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
            </a>
          </li>
        </ul>

      </nav>
    </div>

    <script>
      require([
      'jquery'
      ],(function($) {
      'use strict';

      // call our plugin
      var Nav = new hcOffcanvasNav('#main-nav', {
        disableAt: false,
        customToggle: '.toggle-syed-nav',
        levelSpacing: 40,
        navTitle: 'All Categories',
        levelTitles: true,
        levelTitleAsBack: true,
        pushContent: '#nav-container',
        labelClose: false
      });

      // add new items to original nav
      $('#main-nav').find('li.add').children('a').on('click', function() {
        var $this = $(this);
        var $li = $this.parent();
        var items = eval('(' + $this.attr('data-add') + ')');

        $li.before('<li class="new"><a href="#">'+items[0]+'</a></li>');

        items.shift();

        if (!items.length) {
          $li.remove();
        }
        else {
          $this.attr('data-add', JSON.stringify(items));
        }

        Nav.update(true); // update DOM
      });

      // demo settings update

      const update = function(settings) {
        if (Nav.isOpen()) {
          Nav.on('close.once', function() {
            Nav.update(settings);
            Nav.open();
          });

          Nav.close();
        }
        else {
          Nav.update(settings);
        }
      };

      $('.actions').find('a').on('click', function(e) {
        e.preventDefault();

        var $this = $(this).addClass('active');
        var $siblings = $this.parent().siblings().children('a').removeClass('active');
        var settings = eval('(' + $this.data('demo') + ')');

        if ('theme' in settings) {
          $('body').removeClass().addClass('theme-' + settings['theme']);
        }
        else {
          update(settings);
        }
      });

      $('.actions').find('input').on('change', function() {
        var $this = $(this);
        var settings = eval('(' + $this.data('demo') + ')');

        if ($this.is(':checked')) {
          update(settings);
        }
        else {
          var removeData = {};
          $.each(settings, function(index, value) {
            removeData[index] = false;
          });

          update(removeData);
        }
      });
    })(jQuery);
  </script>

Monis247 commented 2 years ago

apologies didn't mean to close!

Monis247 commented 2 years ago

<script>
  require([
  'jquery',
  'hc_offcanvas_nav'
  ], function($) {
  'use strict';

  // call our plugin
  var Nav = new hcOffcanvasNav('#main-nav', {
    disableAt: false,
    customToggle: '.toggle-syed-nav',
    levelSpacing: 40,
    navTitle: 'All Categories',
    levelTitles: true,
    levelTitleAsBack: true,
    pushContent: '#nav-container',
    labelClose: false
  });

  // add new items to original nav
  $('#main-nav').find('li.add').children('a').on('click', function() {
    var $this = $(this);
    var $li = $this.parent();
    var items = eval('(' + $this.attr('data-add') + ')');

    $li.before('<li class="new"><a href="#">'+items[0]+'</a></li>');

    items.shift();

    if (!items.length) {
      $li.remove();
    }
    else {
      $this.attr('data-add', JSON.stringify(items));
    }

    Nav.update(true); // update DOM
  });

  // demo settings update

  const update = function(settings) {
    if (Nav.isOpen()) {
      Nav.on('close.once', function() {
        Nav.update(settings);
        Nav.open();
      });

      Nav.close();
    }
    else {
      Nav.update(settings);
    }
  };

  $('.actions').find('a').on('click', function(e) {
    e.preventDefault();

    var $this = $(this).addClass('active');
    var $siblings = $this.parent().siblings().children('a').removeClass('active');
    var settings = eval('(' + $this.data('demo') + ')');

    if ('theme' in settings) {
      $('body').removeClass().addClass('theme-' + settings['theme']);
    }
    else {
      update(settings);
    }
  });

  $('.actions').find('input').on('change', function() {
    var $this = $(this);
    var settings = eval('(' + $this.data('demo') + ')');

    if ($this.is(':checked')) {
      update(settings);
    }
    else {
      var removeData = {};
      $.each(settings, function(index, value) {
        removeData[index] = false;
      });

      update(removeData);
    }
  });
});

Monis247 commented 2 years ago

sorry for spamming but above is the updated code where i call the js file on line 4

Monis247 commented 2 years ago

hi would love to get this working :)

somewebmedia commented 2 years ago

What does require() refers to, is it requirjs or something else? I would like to re-create this but I have to have full details. Or if you have this somewhere live where I can test it, I would very much appreciate it.

Monis247 commented 2 years ago

hi thanks for reply, yes this is with requirejs. If you would like me to share with you please provide your ip so i can whitelist you on our development site. you can provide to email below.

monis6318@gmail.com

Thanks

ireDave commented 2 years ago

i am having this issue too. If you remove customToggle option when you call the plugin, it works. I hope this helps

somewebmedia / hc-offcanvas-nav

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. #87