Uncaught TypeError: Cannot read property 'clientWidth' of null
Solution 1
I would say use $(window).width();
from jquery. It returns width of browser viewport Which is equivalent or I would say better alternative for traditional javascript.
Your code will look something like this. Check if it works.
var ww = $(window).width();
$(document).ready(function() {
adjustMenu();
$(".cat").click(function(e) { // cat class
e.preventDefault();
$(this).toggleClass("active");
$(".sf-menu").toggle();
});
});
function adjustMenu() {
if (ww <= 740) { //change this to your breakpoint
$('.sf-menu').hide();
$(".cat").show();
if (!$(".cat").hasClass("active")) {
$(".sf-menu").hide();
} else {
$(".sf-menu").show();
}
} else {
$('.sf-menu').show();
$(".cat").hide();
}
}
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
function adjustMenu() {
if (ww <= 740) { //change this to your breakpoint
$('.sf-menu').hide();
$(".cat").show();
if (!$(".cat").hasClass("active")) {
$(".sf-menu").hide();
} else {
$(".sf-menu").show();
}
} else {
$('.sf-menu').show();
$(".cat").hide();
}
}
$(window).bind('resize orientationchange', function() {
ww = $(window).width();
adjustMenu();
});
Solution 2
try adding your script at the end of the document. The reason is that, a the beginning your document width is zero, because you content is not loaded yet, so there's nothing to display and so, you width is zero
user2257001
Updated on July 09, 2022Comments
-
user2257001 almost 2 years
I have a responsive wordpress theme. The menu is coded to hide when the screen size is bellow 740. However it only does this correctly on the home page. If I go to any other page the menu collapses but it fails to hide and I get this error: "Uncaught TypeError: Cannot read property 'clientWidth' of null"
Here's the code, I have it being called in the header.php file of the theme:
var ww = document.body.clientWidth; $(document).ready(function() { adjustMenu(); $(".cat").click(function(e) { // cat class e.preventDefault(); $(this).toggleClass("active"); $(".sf-menu").toggle(); }); }); function adjustMenu() { if (ww <= 740) { //change this to your breakpoint $('.sf-menu').hide(); $(".cat").show(); if (!$(".cat").hasClass("active")) { $(".sf-menu").hide(); } else { $(".sf-menu").show(); } } else { $('.sf-menu').show(); $(".cat").hide(); } } $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); });