SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with jQuery noConflict

    Hi there

    I'm working on a WordPress theme / site for a client of ours. Long story short, it appears that a premium plugin I purchased is interfering with my jquery scripts.

    I've tried putting my jquery into noConflict mode, but I'm not sure that I have the syntax correct, given that it's not working...

    When I remove the reference to the plugin from my footer, the jquery works. But I just want to be sure I've protected my js as best as possible.

    HTML Code:
    jQuery.noConflict();
    (function($) {
    	$(function() {
    	
    		// easy frontend framework
    		$.easy.tooltip();
    		$.easy.popup();
    		$.easy.external();
    		$.easy.rotate();
    		$.easy.cycle();
    		$.easy.forms();
    		$.easy.showhide();
    		$.easy.jump();
    		$.easy.tabs();
    		$.easy.accordion();
    	
    		// add classes to certain elements (for styling)
    		$('section.downloads article ul li:nth-child(2n)').addClass('alt');
    });	
    
    })(jQuery);
    You'll see from the script, that I'm also making use of Alen Grakelic's Easy Front End framework, which is referenced in another file.

    Any help would be appreciated.

    Thanks in advance.
    Jon

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would replace the $'s with jQuery. Even though you're passing jQuery to the anonymous function at the beginning, $ is still most likely a global variable that you're overwriting (otherwise there isn't really a reason for noConflict). As a general rule, when you use noConflict, your jQuery code shouldn't have any $'s in them.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey

    Thanks for the reply. By your answer, do you mean doing this?:

    HTML Code:
    jQuery.noConflict();
    (function(jQuery) {
    	jQuery(function() {
    	
    		// easy frontend framework
    		jQuery.easy.tooltip();
    		jQuery.easy.popup();
    		jQuery.easy.external();
    		jQuery.easy.rotate();
    		jQuery.easy.cycle();
    		jQuery.easy.forms();
    		jQuery.easy.showhide();
    		jQuery.easy.jump();
    		jQuery.easy.tabs();
    		jQuery.easy.accordion();
    	
    		// add classes to certain elements (for styling)
    		jQuery('section.downloads article ul li:nth-child(2n)').addClass('alt');
    });	
    
    })(jQuery);
    How does this affect the Easy Frontend Framework js though? Should that also be put into noConflict mode with 'jQuery' instead of the '$' alias?

    Thanks in advance.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jon Edwards View Post
    How does this affect the Easy Frontend Framework js though? Should that also be put into noConflict mode with 'jQuery' instead of the '$' alias?
    The only thing that the noConflict thing does, is to stop jQuery using $, so that the $ symbol can return back to being used by the other library that needs it.

    You can continue to use $ within your jQuery code, but only if you pass it in as a parameter on the jQuery callback.

    There is a post in the tips and techniques thread all about the how to use jQuery conflict.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •