WordPress.org

1. nysom
   Member
   Posted 1 year ago #
   

   I've added a simple jQuery script that dynamically resizes a div when the browser window changes size. Next, I tried to add a simple fadeIn/fadeOut onclick and it doesn't work.

   It works on a straight html page (I've tried it) but it will not work either on the same WP page with the code, or on a WP page where that's the only code.

   I'm using the CodeLibs plugin.

   Here's the fade code:

   <script type='text/javascript'>
    $(function(){
   
   $('.panel_2').hide();
   
         $('.work').click(function(){
               $('.panel').fadeOut(function(){
               $('.panel_2').fadeIn();
               });
         });
   });
   </script>
   
   <div class="work">
   click
   </div>
   
   <div class="panel">
   words
   </div>
   
   <div class="panel_2">
   another
   </div>

2. Ounziw
   Member
   Posted 1 year ago #
   

   Probably, it is due to WordPress loads in "no conflict" mode.

   http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

   jQuery noConflict wrappers
   Note: The jQuery library included with WordPress loads in "no conflict" mode. This is to prevent compatibility problems with other javascript libraries that WordPress can load.

   In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. For example:

   $(document).ready(function(){
   $(#somefunction) ...
   });
   Becomes:

   jQuery(document).ready(function(){
   jQuery(#somefunction) ...
   });

Topic Closed

This topic has been closed to new replies.