I am using the image uploader Plupload and it is causing errors with the other jquery I have on my page. I have figured out exactly what part is doing it:
function $(id) {
return document.getElementById(id);
}
If I take this out the image uploader no longer works but the jquery does. It is a lot of code to post here, does anyone have another way to call this function so that it works with jquery? Thanks in advance for any help.
use jQuery like this:
jQuery(function($){
//Your jQuery code here
// Use $ alias worry-free of conflicts
alert('You are using jQuery ' + $().jquery );
});
or
(function($){
//Your jQuery code here
})(jQuery);
or
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
or
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Related
I am writing a plugin which can be used in any website where I dont know the exact version of jquery and getting a few issues with the .on() method.
To fix it I have something simple like this but still getting errors in jQuery 1.4.2.
var $myElements = $('.elements'),
myFunction = function(e){
console.log('here');
e.preventDefault();
}
if (typeof jQuery != 'undefined') {
if(jQuery.fn.jquery < 1.4){
$myElements.live('click', myFunction);
} else {
$(document).on('click', $myElements, myFunction);
}
}
Based on the previous answer, you can do this too:
;(function($) {
if(!$.fn.on) {
$.fn.on = $.fn.live;
}
}(window.jQuery || window.Zepto));
Then you can use on in the rest of your code.
You should bundle your own version of jQuery to save yourself a lot of hassle and a lot of redundant code. You can do this using noConflict to ensure that both your code and the code of the source website act independently:
<!-- load your jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var yourjQueryVersion = $.noConflict(true);
(function($) {
// Now you can use $ just like you normally would
// And it will only execute against jquery-1.11.0
$(function() {
var $myElements = $('.elements'),
myFunction = function(e){
console.log('here');
e.preventDefault();
}
$(document).on('click', $myElements, myFunction); // Yay!
});
})(yourjQueryVersion);
</script>
This means that:
You don't need to write extra code for all jQuery version differences
If the target website upgrades to jQuery 2.0 (or similar), none of your code will break.
The source website might even be using a CDN, so there is a good chance only one copy of the jQuery library may be loaded due to caching.
I'm using WordPress 3.8.1. I want to use this function to use sticky header
<script>
$(document).ready(function() {
var $header = $("header"),
$clone = $header.before($header.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
console.log(fromTop);
$("body").toggleClass("down", (fromTop > 200));
});
});
</script>
But it is not working for me and I don't know why. I know that jQuery is shared to my WordPress because Flexslider 2 is now working fine.
Add this:
var j = jQuery.noConflict();
Now you can write your jQuery code like this:
j(document).ready(function(){
j('.class').event(function(){
// your action............
});
});
Just assign the noConflict() function to a variable, and use that variable instead of $ seen in jQuery code.
Late to the party here, but the correct solution to this is:
Understand that in WordPress, jQuery is loaded in no conflict mode. This means that the $ variable is not referencing jQuery.
But, by modifying your script to use a no-conflict-safe document ready, you can use the $ within the function.
Modify your script as follows:
// original code - doesn't work, because $ is not jQuery in WordPress
// $(document).ready(function() {
// shorthand no-conflict-safe document ready:
jQuery(function($) {
// Now $ is safe to use - it references jQuery within this doc ready function
var $header = $("header"),
$clone = $header.before($header.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
console.log(fromTop);
$("body").toggleClass("down", (fromTop > 200));
});
});
Have you tried setting the jquery file in your header (assuming you have the jquery file in your templates folder, but it can be anywhere, as long as you reference it correctly):
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
Example
$(document).ready(function(){
$("#container").alert("blah");
$(".goodshelf_ul li:first").css("border-top: none;");
$(".custom_ul li:first").addClass("first");
$("#footer .frame:last").css("margin: 0;");
$("#footer .frame:last").addClass("last");
});
I use jquery on all my wordpress sites and it works fine
hope this helps.
I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.
This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready
I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.
Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();
Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>
I am using jquery in the master page and javascript in the content page. When Jquery is used alone it works fine. But when I use the javascript(content page) along with jquery(master page) then jquery in master page stops working.
master page script
$(document).ready(function() {
// set up the accordion
$("#accordion>h3").click(function() {
$(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});
// show active menu section
setTimeout('$("#accordion>div.activesec").slideToggle(800)', 100);
});
content page script
$('slideshow').style.display = 'none';
$('wrapper').style.display = 'block';
var slideshow = new TINY.slideshow("slideshow");
window.onload = function () {
slideshow.auto = true;
slideshow.speed = 5;
slideshow.link = "linkhover";
slideshow.info = "information";
slideshow.thumbs = "slider";
slideshow.left = "slideleft";
slideshow.right = "slideright";
slideshow.scrollSpeed = 4;
slideshow.spacing = 5;
slideshow.active = "#fff";
slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
}
I believe the collision is caused by your use of the $ shorthand in the content page. $ is used to represent jQuery. So, jQuery is trying to interpret $('slideshow').style.display , which is not valid jQuery.
Replace your shorthand with document.getElementById, or use jQuery selectors.
Standard JS
document.getElementById.style.display = 'none';
Or jQuery
$('slideshow').css('display', 'none');
Ok, so it looks like the other script uses $, just like jQuery. You need to use $.noConflict() to prevent namespace clashes:
var $j = jQuery.noConflict();
$j(document).ready(function() {
// set up the accordion
$j("#accordion>h3").click(function() {
$j(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});
// show active menu section
setTimeout('$j("#accordion>div.activesec").slideToggle(800)', 100);
If you don't want to use $j instead of $ in all jQuery functions, you can wrap everything (except the content page scripts!) in a function that assigns $ to jQuery:
(function( $ ){
// everything inside works normally with $
})( jQuery );
it looks like your selections are missing "#" or "." depending on weather your trying to access an id or class
$('#slideshow').style.display = 'none';
$('#wrapper').style.display = 'block';
You are passing a string to the setTimeout parameter. Really bad.
$('slideshow').style.display = 'none';
You are trying to find <slideshow> tags with jQuery, maybe you are missing a class or ID selector?
Also, the style method is not a jQuery method asfar as I know, so maybe you will want to call it on a JavaScript object instead of a jQuery one? Or perhaps use the .css method on it?
Did u put ur plane javascript inside the :
$(document).ready(function() {
});
If yes then try to put them outside it.
Best practice would be to put all your Javascript/Jquery code in a .js file. Then import this .js in the page that need it.
This way your HTML will be clean and not cluttered with javascript all over the place.
I know i don't really answer your problem, but working this way you will probably help avoid it.
good luck
I have an application that requires the use of a mootools calendar, however, I use jquery for my main app structure.
As soon as I have mootools in with jquery, neither work, and when I have only one, they work fine. I did some research saying I could use a method called .noconflict, and while i've tried, I have not gotten it to solve my issue. Perhaps someone could better explain to me where to do the actual .noconflict calls, and perhaps help me get this working.
Thanks!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var fixHeight = function () {
var gutter = 50;
var newHeight = $(window).height() - (gutter*2);
$('#container').height(newHeight);
}
$(function(){
fixHeight();
$('ul#nav li.item').each(function(index) {
if ($(this).attr("name") == "media") {
$(this).attr("id","active");
}
});
$('input').focus(function() {
$(this).attr("value","");
}).blur(function() {
$(this).attr("value",$(this).attr("original-value"));
});
$(window).resize(function() {
fixHeight();
}).load(function() {
fixHeight();
});
});
</script>
<script type="text/javascript" src="http://taptouchclick.com/js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var smoothCalendar = new SmoothCalendar("calendar");
});
</script>
yes, the noConflict method should work, but if it doesn't or if you want to do it in another way, you should encapsulate the scripts in self-calling functions with the parameter being set as the main library object:
(function($){
// al your jquery logic here
alert($ instanceof jQuery);
})(jQuery)
after that, you should include the next library(in your case MooTools) and write the script normally , or - to be very sure - you can encapsulate the MooTools logic in a function as well.
You should be fine if you simply call:
jQuery.noConflict();
...before including the Mootools JS file.
You can then use jQuery functions by using jQuery instead of $. Example:
jQuery('.selector').hide(); // instead of $('.selector').hide();
You can also pass $ back in through the DOM-ready event:
$.noConflict();
// Non-jQuery code goes here
jQuery(document).ready(function($) {
// You can now use the dollar sign safely inside of this function
}