I have a jQuery plugin conflict in Wordpress which I need some help with. On my test page at: http://timbaggaley.co.uk/test/ I have installed the Easy Fancybox plugin for image and video presentation. It worked fine until I installed the jQuery backstretch plugin using code posted into a Javascript adder widget. I'm guessing my problem is the call on multiple libraries and I need to use noConflict. I have amended my code to:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.timbaggaley.co.uk/js-includes/jq_backstretch/jquery.backstretch.js"></script>
<script type="text/javascript">
var $j = $.noConflict();
$j(document).ready(function() {
$j.backstretch("http://timbaggaley.co.uk/backstretch/pic4.jpg", {speed: 150});});
</script>
The backstretch still works but the Fancybox still does not. I am a complete programming novice and I have read as much of the jQery noConflict advice as I can find but cannot figure it out. Can anyone help me with some copy 'n' paste idiot-proof guidance on how to implement the noconflict trick into my website?
Thanks
Tim, London
Well, actually, Easy Fancybox uses jQuery, so this is not an issue of using multiple libraries. Therefore you should not use .noConflict().
First remove "var $j = $.noConflict();" and Try using "jQuery" instead of "$j"
I would normally just called $.noConflict() rather than store it in a variable.
Also, you can avoid conflict all together (normally) by using jQuery(document).ready() instead of $.
Related
Hi I am learning Javascript and am stuck resolving a JS related issue on my project http://www.merekhayaal.com/ I have installed Masonry layout which is conflicting with the rest of JS. I have read this usually has to do with fixing jQuery. I am only asking for pointers here. I need the following code to make the Masonry layout work:
<script src="babezlondon/modernizr-latest.js">
</script>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/shopshark/jquery-1.8.3.min.js"><\/script>')</script>
<script src="babezlondon/jquery.masonry.min.js"></script>
<script src="babezlondon/script.js"></script>
But when I put this in, the rest of JS on the page breaks. If the solution is to implement no-conflict in jQuery, what steps can I take to ensure I do it correctly in my case as there are multiple js files to deal with?
Have you already tried using jQuery noConflict? http://api.jquery.com/jquery.noconflict/
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Just use jQuery in noConflict() mode.
Stick this at the bottom of the jQuery script;
var $jq=jQuery.noConflict();
so now you would have to use $jq instead of $jQuery or $
This way, each script you have for different sliders etc you can change the var $jq to suit.
Hope this helps.
http://api.jquery.com/jQuery.noConflict/
Ok so what worked is when i removed a line of code
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
from the script. It was apparently causing the conflict
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- jQuery and $ now point to 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- jQuery and $ now point to 1.11.0 -->
<script>
$11 = $.noConflict();
// $11 now points to 1.11.0
// $ still points to 1.10.2
</script>
<!-- SB Admin Scripts -->
<script src="js/sb-admin.js"></script>
<!-- carouFredSel -->
<script src="js/jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>
<script src="js/carouFredSel-hookup.js" type="text/javascript"></script>
I have problems getting this right.
The script sb-admin.js doesn't work together with the carouFredSel.js on the same page. The code above shows my attempt to use 2 different jQuery libraries and 2 different variables($ and $11), each of them pointing to one of the libraries.
In the script sb-admin.js I only use the variable $11 and in jquery.carouFredSel.js and carouFredSel-hookup.js only the variable §.
At the moment none of the functions seem to work. What am I doing wrong here?
Any help appreciated.
According to the documentation
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
You didn't provide the true argument. Change it to:
<script>
$11 = $.noConflict(true);
// $11 now points to 1.11.0
// $ still points to 1.10.2
</script>
I have no idea whether this will solve the overall problem of conflicts between the two other libraries. It seems unlikely that it's because they require different versions of jQuery.
I did try you recommendation and set the noConflict to (true),
but it did not help whatsoever.
In the meantime I found a workaround but unfortunately I can't tell why it works now.
I am using another function for about the same menu and this one apparently doesn't conflict with my carousel.
This is the script that conflicted with the carouFredSel script was the menu from here:
http://startbootstrap.com/templates/sb-admin-v2/
And this is the other menu script that works fine with carouFredSel is this:
http://demo.onokumus.com/metisMenu/
Okay, I am trying to add the following jquery in my header.php file for my wordpress website:
<script type="text/javascript">
$(function() {
$( '#co-slider' ).circleslider()
});
</script>
This is copied directly from the html source file I downloaded, ive spent the past 3 hours trying to come to a conclusion for the problem, however I am a nebie when it comes to wordpress. So far all I have been able to gather is that it is possibly because of no conflict mode. I tried reading up on no conflict here http://api.jquery.com/jQuery.noConflict/ along with following instructions I thought were relevant from another question and here is the link for that jquery not working in wordpress . Also I dont think this is the issue but this is how I referenced my javascript.
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/staff_new/js/jquery.circleslider.js"></script><script type="text/javascript" src="<?php bloginfo('template_url'); ?>/staff_new/js/jquery.circleslider.js"></script>
I say i dont think its the issue because this is how I have it for other things as well and they work just fine, but it is also possible im clueless as to what im talking about. I also read here http://codex.wordpress.org/Function_Reference/wp_enqueue_script for referencing I should be using wp enqueue. But I also read that the way I currently have it works just fine. Any help would be greatly appreciated, as i would really love to get this working for the site.
Cheers
it's because by default, wordpress loads jQuery to the jQuery namespace, not $. so you can change the $ to jQuery instead, or, do what I usually do which is to make a reference to jQuery before your jQuery code:
var $ = jQuery;
You can make everything working as
jQuery(function($) {
$( '#co-slider' ).circleslider()
});
In WordPress, the$() syntax is always used by other scripting library,
and causing the conflict issue and fail to call the jQuery function.
You should use jQuery() instead…
Alternatively, you can use noConflict() …
I have setup a test html page to play with bgStretcher before adding it to a custom Wordpress theme. It works fine when I use the jQuery version:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
on , but it stops working when I use the version included in Wordpress:
<script type="text/javascript" src="http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
The only difference I've seen between the two files is that the WP version prevents jQuery conflicts at the end, calling noConflict().
The page (html below) loads the first image, but then the console outputs an error:
Uncaught TypeError: Cannot read property 'fn' of undefined
(anonymous function)
The live version is on: http://pebbl.es/test/test .Any ideas on how to fix this? I can see it is a conflict error, but I can't see where/how to fix it? Many thanks.
<html>
<head><title>Test</title>
<script type='text/javascript' src='http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher.css">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('body').bgStretcher({
images: ['Rochy_Coleccion1.jpg', 'Rochy_Coleccion2.jpg'], imageWidth: 1024, imageHeight: 748
});
});
</script>
</head>
<body>
</body>
</html>
Namespace your jQuery: http://api.jquery.com/jQuery.noConflict/
add this between the two script tags:
var $my_jq = jQuery.noConflict();
after this, you have your 1.6.1 jQuery in no conflict mode.
you will have to call it using your variable name after this, e.g. $my_jq('#content')
UPDATE
this might not work, I see you are not loading 2 different jQuerys, your problem occurs when trying to use bgstretcher with an jQuery that is already in noConflict mode.
I am not a wordpress expert, but you might just change the wordpress jQuery to use your variable name. You can set jQuery in noConflict mode with or without namespacing it to a variable and it looks like your wordpress JQ does it without.
Or you can first load your own jQuery, namespace it and then use this for bgstretch.
The problem is that the noConflict call "frees" the $ variable again for use with different frameworks that also want to make use of it, so your bgstretch gets an error when trying to call $.
Or just try to remove the noConflict completly and see if it has any effect on your wordpress installation (it should not, I guess it is just for the purpose of giving WP users the ability to use different JS frameworks as well).
Hope you work it out.
I required a function to remove URLs from <a> divs found within <div class="rj_insertcode">. Not being familiar with with direction to tackle this, I eventually mustered up the following Jquery code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.rj_insertcode a').each(function() {
$(this).replaceWith($(this).html());
});
});
</script>
</head>
My site uses Joomla CMS and I was able to add the above script to the bottom of the template index.php. It works quite well and removes the links generated between the defined tags.
My problem:
Pages that also include JavaScript do not operate correctly. JavaScript appears to be disabled or not functioning.
What can I change to ensure JavaScript still operates correctly, or is there another method I could adopt?
Have you tried using jQuery(... rather than $(... ? That would be a first place to start. I'm not too familiar with Joomla, but I know many CMS's will put jQuery into noConflict mode, and try to keep things happy with any other javascript libraries that might be included.
Joomla uses Mootools, which does not work with jQuery and would cause your script to break on pages that use Mootools. You can try:
window.addEvent('domready', function(){
$$('div.rj_insertcode a').set('href','');
});
What is the actual problem? Javascript is not being loaded, not executing or not executing correctly? You could use Firebug to get more info and/or paste some page source as it's shown in the browser where the problem is.
Unlike most other modern CMS's such as Expression Engine, Drupal, or WordPress, Joomla loads MooTools in the Joomla head tag rather than jQuery. Using PHP to remove the MooTools can cause third party modules to break.
By default loading jQuery with MooTools causes the page to break. Use MooTools instead and you should be all set.
Cheers,
Christopher