0

This question already has an answer here:

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.

marked as duplicate by kraftner, Jacob Peattie, Mayeenul Islam, bosco, Rick Hellewell Dec 2 '18 at 2:49

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1

error 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($);

            });                     
  • if you liked this answer then do vote this answer as useful. – Manjot Nov 17 '18 at 17:08
  • I tried to delete wp_enqueue_script("jquery") and yes its still Works, thank you. Im Im new in wordpress and php build, so I don't know about that – BlesssMe Nov 17 '18 at 18:27
-3

I found this Solution https://stackoverflow.com/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

  • That function should be properly hooked in functions.php, not added to the head directly. – Jacob Peattie Nov 17 '18 at 10:26
  • @JacobPeattie but it is Works, or will there be a bad impact? – BlesssMe Nov 17 '18 at 16:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.