search

somewebmedia / hc-offcanvas-nav

JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.
https://somewebmedia.github.io/hc-offcanvas-nav/
MIT License
336 stars 82 forks source link

Uncaught TypeError: Cannot read property 'printStyle' of undefined #65

Closed andretux closed 3 years ago

andretux commented 3 years ago

I am trying to implement the nav bar in a Bootstrap 4 project, but I get this error:

jQuery.Deferred exception: Cannot read property 'printStyle' of undefined TypeError: Cannot read property 'printStyle' of undefined at n (http://vitalstatistix/nav_issues/js/hc-offcanvas-nav.js?v=2.0.0:11:1427) at new i (http://vitalstatistix/nav_issues/js/hc-offcanvas-nav.js?v=2.0.0:11:22706) at HTMLElement.<anonymous> (http://vitalstatistix/nav_issues/js/hc-offcanvas-nav.js?v=2.0.0:11:22888) at Function.each (http://vitalstatistix/nav_issues/vendor/jquery/jquery.min.js?v=2.0.0:2:2573) at w.fn.init.each (http://vitalstatistix/nav_issues/vendor/jquery/jquery.min.js?v=2.0.0:2:1240) at w.fn.init.hcOffcanvasNav (http://vitalstatistix/nav_issues/js/hc-offcanvas-nav.js?v=2.0.0:11:22834) at HTMLDocument.<anonymous> (http://vitalstatistix/nav_issues/js/default.js?v=2.0.0:13:18) at l (http://vitalstatistix/nav_issues/vendor/jquery/jquery.min.js?v=2.0.0:2:29375) at c (http://vitalstatistix/nav_issues/vendor/jquery/jquery.min.js?v=2.0.0:2:29677) undefined w.Deferred.exceptionHook @ jquery.min.js?v=2.0.0:2 c @ jquery.min.js?v=2.0.0:2 setTimeout (async) (anonymous) @ jquery.min.js?v=2.0.0:2 u @ jquery.min.js?v=2.0.0:2 fireWith @ jquery.min.js?v=2.0.0:2 fire @ jquery.min.js?v=2.0.0:2 u @ jquery.min.js?v=2.0.0:2 fireWith @ jquery.min.js?v=2.0.0:2 ready @ jquery.min.js?v=2.0.0:2 _ @ jquery.min.js?v=2.0.0:2 jquery.min.js?v=2.0.0:2 Uncaught TypeError: Cannot read property 'printStyle' of undefined at n (VM192 hc-offcanvas-nav.js:11) at new i (VM192 hc-offcanvas-nav.js:11) at HTMLElement.<anonymous> (VM192 hc-offcanvas-nav.js:11) at Function.each (jquery.min.js?v=2.0.0:2) at w.fn.init.each (jquery.min.js?v=2.0.0:2) at w.fn.init.hcOffcanvasNav (VM192 hc-offcanvas-nav.js:11) at HTMLDocument.<anonymous> (default.js?v=2.0.0:13) at l (jquery.min.js?v=2.0.0:2) at c (jquery.min.js?v=2.0.0:2)

It seems that the problem is in this part: n = function(e) { if (e.querySelector("ul") || "UL" === e.tagName) { var g = "hc-nav-" + ++ie , l = R.printStyle("hc-offcanvas-" + ie + "-style") , s = "keydown.hcOffcanvasNav" , c = R.createElement("nav", { role: "navigation" })

The line where the error occurs is : l = R.printStyle("hc-offcanvas-" + ie + "-style")

I followed the basic JQuery initialisation:

$(document).ready(function($) { // Init navbar $('#main-nav').hcOffcanvasNav({ disableAt: 1024, customToggle: $('.toggle'), navTitle: 'All Categories', levelTitles: true, levelTitleAsBack: true });

And at this stage I use the example menu from the README.md

Any idea why it is not working?

Thanks Andre

somewebmedia commented 3 years ago

Are you using the latest version of HC Off-canvas Nav?

somewebmedia commented 3 years ago

How did you include the script into your project?

andretux commented 3 years ago

Yes, I was using the latest version.

I don't have the code anymore as I tried a different menu system.

But I included the CSS in the Header of the file and the javascript at the end of the file

ritikranjan567 commented 3 years ago

Same thing happened to me. If you didn't add this plugin using npm and just downloaded the the whole thing from git. Then you should use the js and css files in 'dist' folder. It works just fine.