hy all, I have streaming site, and want to make a toggle button to switch to Dark/light mode using jQuery. please look to my code, what is wrong with my code, bcz this is not work for me.
in footer.php (above </body>)
<div class="gelap-terang"></div>
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".gelap-terang").hide();
jQuery("#gelap-terang").click(function(){
jQuery(".gelap-terang").toggle();
});
});
</script>
in player.php
...
<div class="player_nav">
<button id="gelap-terang">Change Mode</button>
</div>
...
CSS code
.gelap-terang {
height:100%;
width:100%;
background-color:black;
opacity:.8;
position:fixed;
top:0;left:0;
z-index:1;display:none;}
#player2, .player_nav {
z-index:99;
position:relative;}
the button is perfect look in the below of player video, but the <div class="gelap-terang"> is not appear when I click the button. I tried to delete the "display:none;" in the .gelap-terang CSS code, the <div class="gelap-terang"> is appear and look good, but not switch (hide) when I click the button.
This question already has answers here: How to include jQuery and JavaScript files correctly? (6 answers) Closed 6 years ago.hy all, I have streaming site, and want to make a toggle button to switch to Dark/light mode using jQuery. please look to my code, what is wrong with my code, bcz this is not work for me.
in footer.php (above </body>)
<div class="gelap-terang"></div>
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".gelap-terang").hide();
jQuery("#gelap-terang").click(function(){
jQuery(".gelap-terang").toggle();
});
});
</script>
in player.php
...
<div class="player_nav">
<button id="gelap-terang">Change Mode</button>
</div>
...
CSS code
.gelap-terang {
height:100%;
width:100%;
background-color:black;
opacity:.8;
position:fixed;
top:0;left:0;
z-index:1;display:none;}
#player2, .player_nav {
z-index:99;
position:relative;}
the button is perfect look in the below of player video, but the <div class="gelap-terang"> is not appear when I click the button. I tried to delete the "display:none;" in the .gelap-terang CSS code, the <div class="gelap-terang"> is appear and look good, but not switch (hide) when I click the button.
Share Improve this question asked Nov 17, 2018 at 9:27 BlesssMeBlesssMe 12 bronze badges 02 Answers
Reset to default 1error is coming because of jQuery.noConflict();
You do not need to add jQuery.noConflict(); in wordpress files because by default wordpress supports jQuery but if you want to use $ then you can use this way without using wp_enqueue_script("jquery")
If the script is being loaded in the footer (which you should be doing in the vast majority of cases) you can wrap the code in an anonymous function (technically any IIFE) where you pass in jQuery to be mapped to $.
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
If you absolutely need to load the scripts in the header, you'll probably need to use a document ready function anyway, so you can just pass in $ there.
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
I found this Solution https://stackoverflow/questions/33212905/custom-jquery-is-not-working-in-wordpress I tried to put
<?php wp_enqueue_script("jquery"); ?>
EDIT: into function.php and deleted jQuery.noConflict (); from my jQuery code
it's works fine now