Archived topic
child theme javascript not working
5 replies · Started by Streater on July 18, 2021
Surprisingly I have avoided Javascript until now, when I used it a lot on my DIVI site. Now I need it and I added it to my child theme and it isn't working. Am I missing something with adding Javascript with GeneratePress?
I followed this for enqueueing it:
https://generatepress.com/forums/topic/adding-javascript-in-external-file/
And changed it to this for my file:
<?php
function your_theme_js() {
wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_js' );
?>Any ideas?
Thanks!
Hi there,
Let's clarify things first:
Is this the content of the js file you're pertaining to?
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}If so, I don't think this will work as it's not pointing to any elements on the page. There's no elements with ID myDropdown or classes dropbtn or dropdown-content on the homepage.
Is this for a specific page? Can you link us to that? Let us know. :D
Yes that is the Javascript. (link to the page below):
You should see this code:
.dropbtn {
cursor: pointer;
width: 100%;
height: 100%;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2369ff;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
AND
<div class="columns dropdown">
<ul class="price">
<li onclick="myFunction()" class="dropbtn">Basic</li>
</ul>
<div id="myDropdown" class="dropdown-content">
<ul class="price">
<li class="grey">$ 9.99 / year</li>
<li>10GB Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>1GB Bandwidth</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>
</div>I see.
for this page, the script is actually working as shown here - https://share.getcloudapp.com/QwuAZRB1
The issue is with the CSS.
It's toggling "show" class but I don't see any styling related to show class so it's not doing anything.
I believe you should have something like this:
.dropdown-content.show {
display: inline-block;
}So the content actually shows up when the show class is added to the element.
https://share.getcloudapp.com/rRujYPBA
Ah yes... I realized I didn't paste all my code in... I built it outside the website... and left out:
.show {display: block;}
Thanks for reminding me!
No problem. :)
