I'm issues getting JQuery to work with Mootools, and I've tried just about every thing I've found on resolving the conflict, so I'm thinking I'm just doing it wrong, and not realizing it.
Here's the code without the libraries listed:
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
})(jQuery);
<script type="text/javascript">
(function($){
window.addEvent('domready', function() {
var status = {
'true': 'HIDE',
'false': ''
};
var myVerticalSlide = new Fx.Slide('vertical_slide').hide();
$('v_toggle').addEvent('click', function(event){
event.stop();
myVerticalSlide.toggle();
});
myVerticalSlide.addEvent('complete', function() {
$('vertical_status').set('text', status[myVerticalSlide.open]);
});
});
})(document.id);
Use jQuery instead of $
jQuery('.slideShow')
$ is a reference to jQuery so they're interchangeable
I don't know anything about mootools but they both use the $ identifider. I believe you need to reassign the $ to one of them.
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
</script>
So now when you want to use jQuery you do
$j('selector').show();
And you use the same syntax as before for Mootools.
Related
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've got this 2 codes returning "script error alert" to me on Internet Explorer 8. What is wrong please (or missing)?
<script>
$(".alert").alert('close');
</script>
<script type="text/javascript">
var $j = jQuery.noConflict()
$j(function(){
SyntaxHighlighter.all();
});
$j(window).load(function(){
$j('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
The second I know that is because of this (but I dont know why?):
SyntaxHighlighter.all();
and this:
$('body').removeClass('loading');
If SyntaxHighlighter.all(); is causing a problem then you've probably forgotten to load the JavaScript that defines SyntaxHighlighter or perhaps the case is different than you're trying to use.
This:
$('body').removeClass('loading');
will be a problem because you've called noConflict and that will return $ to whatever it was before jQuery tried to take it over. You should use the $j that noConflict gave you:
$j('body').removeClass('loading');
i am not sure if this is the issue but you don't have a semi-colon at the end of the following line:
var $j = jQuery.noConflict()
Ok Guys please forgive my ignorance. I'm new to javascript so all help is well received. I've been trying to implement these solutions but it's not working. This is what I have on my revised code:
<script type="text/javascript">
jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`
$(document).ready(function(){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
})(jQuery)
</script>
When i do this it makes all of the above stop working.
Also, I still have the other statement
function $(id) {
return document.getElementById(id);
}
Which Im not sure if I understand what to do with it since if I take it off the element that goes with it stops working (it's a dual slider)
Thanks Again
I'm a javascript novice so my apologies :0)
I'm using this javascript on a website:
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
$('a.fancybox').fancybox();
$('textarea, select').uniform();
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'});
});
</script>
There is another script that contains this at the beginning which is making everything else to stop working. As soon as I delete it everything works again. Is there a way to unite these? or do they need to stay separate?
function $(id) {
return document.getElementById(id);
}
Thanks in advance...
Use noConflict to release $ and the use jQuery() instead of $() for jQuery operations:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Now $('x') uses the custom $ function.
</script>
The problem is you have declared a function called $ which now overwrites the jquery reference that is created by jquery.
thus when you do $('#slider1').tinycarousel(); you are now expecting a method tinycarousel defined on the object returned by your function.
if you still want to continue using jquery and your function you will have to use
jQuery("something").tinycarousel()
It's good practice to "shield" your code from this kind of problem by never using the $ function directly, instead create a new scope where you explicitly define $ = jQuery:
jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`
$(document).ready(function(){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
})(jQuery)
Alternatively, jQuery passes itself to the DOMReady short form:
jQuery.noConflict()
jQuery(function($){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
Make this a standard practice and you'll avoid the issue in the future.
You should probably remove the second script because jQuery itself contains ID selector which will select elements from dom using id as requirement.
Remove this
function $(id) {
return document.getElementById(id);
}
Do this from now to select with ID
$(document).ready(function(){
$("#myCarousel").fadeIn();
});
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
}
I use
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
to load jquery and then load an external script that contains these :
var jkpanel={
controltext: 'menu',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)
and also use a mootools plugin of course.
MY QUESTION IS THAT how should I use var $j = jQuery.noConflict(); in the above script to prevent conflicting
Wrap all the JavaScript that relies on jQuery in a closure to prevent namespace conflicts, like so:
// Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
It looks weird, but the syntax is right (yes, the first line starts with a semicolon). This automatically substitutes jQuery for the $ object, which both jQuery and mootools make use of. Since you're using both, you should wrap all of your jQuery code in a closure like this (one for each .js file or script tag).
If the problem is just, you load MooTools, and then you load jQuery, and then MooTools doesn't work because jQuery has taken over the dollar function, then you probably just need code like this:
<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
That should get jQuery to relinquish $(). The code you have in your question already does the other handy thing, which is use the parameter to the ready event handler as a way to locally use a shorter name for the jQuery object.
I'd strongly recommend reading the jQuery page on working with other libraries and maybe the documentation for the noConflict() function.