0

I just want to once and for all get some clarity on jQuery within Wordpress as I can never remember from one project to the next how things should be done.

The particular example I am talking about is for flexslider. On the site I am working on now I have tried:

jQuery(document).ready(function($) {
  $('.flexslider').flexslider({
    slideshow: true,
    animationSpeed: 400,
    initDelay: 100,
    animation: "slide",
    animationLoop: true,
    itemWidth: 258,
    itemMargin: 26
  });
});

This works in Opera but not Firefox, and have tried:

jQuery(document).ready(function($) {
  jQuery('.flexslider').flexslider({
    slideshow: true,
    animationSpeed: 400,
    initDelay: 100,
    animation: "slide",
    animationLoop: true,
    itemWidth: 258,
    itemMargin: 26
  });
});

This works in Firefox but not Opera, other browsers not yet tested.

What is the correct way to do this to work in all browsers?

Thanks

  • Have you checked errors in console? – Robert hue Jul 2 '15 at 9:10
  • Yes, when using the one that works in Firefox, opera says jQuery('.flexslider... is not a function, and likewise in Firefox for the one that works in Opera – Adrian Jul 2 '15 at 9:14
  • How are you including Flexslider? – Howdy_McGee Jul 2 '15 at 13:59
  • After the HTML markup, I have the following: <script defer src="<?php bloginfo('template_url'); ?>/jquery.flexslider.js"></script> <script type="text/javascript"> (function($){ "use strict"; $(document).ready(function(){ $('.flexslider').flexslider({ slideshow: true, animationSpeed: 400, initDelay: 100, animation: "slide", animationLoop: true, itemWidth: 258, itemMargin: 26 }); }); })(this.jQuery); </script> – Adrian Jul 2 '15 at 14:01
  • Please do not post big code blocks in comments, use the "edit" link underneath your question and add your code there. It's very hard to read as a comment. – Howdy_McGee Jul 2 '15 at 14:52
1

I prefer this:

(function($){
    "use strict";
    $(document).ready(function(){
      $('.flexslider').flexslider({
         slideshow: true,
         animationSpeed: 400,
         initDelay: 100,
         animation: "slide",
         animationLoop: true,
         itemWidth: 258,
         itemMargin: 26
      });
    });
})(this.jQuery);
| improve this answer | |
  • This did not work in Firefox – Adrian Jul 2 '15 at 10:07
0

To make jQuery work in noconflict mode you need to wrap all the functions in your js-file like this:

jQuery(window).ready(function( $ ) { Your functions here });

You can now use the $ selector as usual:

$(window).load(function(){ Stuff here });

or

$(document).ready(function(){ Stuff here });

I usually use the former, because document.ready sometimes conflicts with the Wordpress theme modifier (no idea why).

| improve this answer | |
  • tried this and again it works in Opera but not Firefox :-( jQuery(window).ready(function( $ ) { $(window).load(function(){ $('.flexslider').flexslider({ slideshow: true, animationSpeed: 400, initDelay: 100, animation: "slide", animationLoop: true, itemWidth: 258, itemMargin: 26 }); }); }); – Adrian Jul 2 '15 at 10:05
  • Maybe the problem is with flexslider? There seem to be some browser related issues with this plugin. Maybe you should try another plugin and see if that works. If so, the problem is not in the way you queue jquery, but in flexslider. – cjbj Jul 4 '15 at 12:49
-1

To answer this question, it is more about how you call jQuery rather than how you call the function.

I have just changed my direct link to jQuery to the following:

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}

This is taken frmo CSS Tricks and posted in functions.php, this now makes the following work on all browsers:

jQuery(document).ready(function($) {
  $('.flexslider').flexslider({
    slideshow: true,
    animationSpeed: 400,
    initDelay: 100,
    animation: "slide",
    animationLoop: true,
    itemWidth: 258,
    itemMargin: 26
  });
});
| improve this answer | |
  • This is just replacing one version of jQuery with another (which actually works in a lot less browsers). – bonger Jul 2 '15 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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