I'm trying to achieve blur effect with JS on "site-inner" class after the event of expanding the mobile dropdown menu in genesis sample theme by clicking the mobile menu button.
The button has aria-expanded attribute and I decided to use it as a trigger.
The HTML element that is being created by responsive-menus.js within Genesis Framework:
<button class="menu-toggle dashicons-before dashicons-menu activated" aria-expanded="true" aria-pressed="true" id="genesis-mobile-nav-primary"></button>
Below is the code I'm using:
window.onload = blurFunction();
function blurFunction() {
var x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");
if (x == "true")
{
document.getElementById("site-inner").style.webkitFilter = "blur(8px)";
}
}
Console returns the following:
Uncaught TypeError:
Cannot read property 'getAttribute' of null.
Uncaught TypeError:
Cannot set property 'webkitFilter' of undefined
EDIT:
After removing the brackets function actually executes - but - I've added an else statement ant thats the only part that actually works. The function runs, checks the aria-expanded attribute and adds the else condition to the site-inner element to which I've added an id="st-pusher".
Here's the code:
window.onload = blurFunction;
function blurFunction() {
let x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");
if (x == 'true') {
document.getElementById("st-pusher").style.webkitFilter = "blur(8px)";
} else {
document.getElementById("st-pusher").style.webkitFilter = "blur(0px)";
};
}
Turned out that beside the brackets used for the function the main problem was the event handler that I used. Everything works fine now after i changed it to .onclick event since the element triggering the function is a mobile-menu button. Thanks everyone for helping along :)
window.onclick = blurFunction;
function blurFunction() {
var x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");
if (x == "true") {
document.getElementById("st-pusher").style.webkitFilter = "blur(8px)";
} else {
document.getElementById("st-pusher").style.webkitFilter = "blur(0px)";
};
}