We Keep Coding

jQuery conflict between jPanelMenu and TweenMax/superscrollorama

I'm trying to use two(three if consider that the second uses 2 files) different plugins, jPanelMenu.js(to do a google mobile-like menu) and Superscrollorama.js(wich works together TweenMax.js), unfortunately they are conflicting, both works fine when alone, but when I put them both on the page, it all crashes. I already tried to use $.noConflict(); and jQuery.noConflict(); in a lot of different ways, unsucesfully. The best I managed to do is to make scrollorama/tweenmax work.. But, jPanelMenu still crashes.
Here's my code:
<script type="text/javascript" src="public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="public/js/jquery.jpanelmenu.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function () {
var jPM = $.jPanelMenu({
menu: '#menu',
trigger: '.menu-trigger',
easing: 'ease',
duration: 250
});
jPM.close(true);
jPM.on();
jPM.trigger(onClick);
});
</script>
<script type="text/javascript" src="public/js/TweenMax.min.js"></script>
<script type="text/javascript" src="public/js/jquery.superscrollorama.js"></script>
<script>
jQuery(document).ready(function($) {
var controller = jQuery.superscrollorama({
playoutAnimations: true
});
controller.triggerCheckAnim();
controller.addTween('.scroll-trigger',
(new TimelineLite())
.append([
// Scale Logo
TweenMax.fromTo(jQuery('#logo'), 1,
{css:{width: '100%', padding:'15px 0 0 0'}, ease:Strong.easeInOut, immediateRender:true},
{css:{width: '59%', padding:'5px 0 0 0'}, ease:Strong.easeInOut})
]),0,0);
});
</script>
I'll really really really appreciate if someone here could help me with that..

As per the additionnal details that you gave me. Your problem is not a conflict between jQuery and others, but simply that the onClick function was not defined. The trigger function open or closes the menu depending on it's state and takes a boolean argument that specifies if the action will be animated or not.
If you do not want the menu to open when the page load, simply remove the jPM.trigger(...); call.

jQuery conflict with Prototype (noconflict doesnt work)

I use jQuery v1.6.4 http://code.jquery.com/jquery-1.6.4.js
and prototype.
I am trying to use the jQuery Tabs widget and it conflicts with prototype. As a result the upload button of an input isn't working.
I tried this to resolve but it doesn't seem to work.
<script type="text/javascript">
jQuery.noConflict();
_ccsjQ(function() {
_ccsjQ( "#tabs" ).tabs();
});
</script>
The funny thing is that if i press F5 the upload button works and when i refresh, doesnt work.

Easy way (IMHO) is just call jQuery.noConflict() then wrap any jQuery code in an anonymous function:
jQuery.noConflict();
(function($){
// use your standard $(...) in here
})(jQuery);
Alternatively, you need to assign jQuery a new alias if you're not going to use jQuery(...) (e.g. var jq = jQuery.noConflict(); then use jq(...)).
Example of both being used:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript">
var _cssjQ = jQuery.noConflict();
_cssjQ('.foo').css('color','#f0f');
(function($){
$('.bar').css('color','#f0f');
})(jQuery);
</script>
And the fiddle: http://jsfiddle.net/kbWah/1/

1) Define Jquery first
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2) Add script after Jquery and Before prototype
<script>
var pjquery = jQuery.noConflict();//pjquery will represent jquery framework now on-wards
</script>
3) Now define prototype.js
<script type = "text/javascript" src = "js/prototype.js" ></script>
Now where ever jquery is to be called use pjquery instead of $ or Jquery.

Firebug giving jQuery "$ is undefined" error even when jQuery is loaded before the script

OK so I have a WordPress site. It uses quite a few jQuery scripts and jQuery is loaded in the pages' headers. I have a small block of code that should simple add a class to image links. I have placed this at the bottom of the document, just before the </body> tag.
<script type="text/javascript">
$.noConflict();
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>
The script does not work and Firebug is giving me a $ is undefined error. I have checked various similar other question and the answers do not seem to help.
The source page is here: http://sergedenimes.com/2013/01/bruno-bisang-30-years-of-polaroids/
I'm sure it is another plugin causing a conflict but I would appreciate any guidance on how to solve this.
Edit: Wow thanks for the very rapid response. Seems it was an earlier plugin rendering $ undefined. Replacing with jQuery has solved.

You already did jQuery.noConflict(); earlier in your code thereby making $ undefined.
Look at line 79 of your source code.

$.noConflict(); makes the $ symbol go back to it's previous definition before jQuery was loaded. If there were no other libraries using that symbol, then it goes back to undefined. That is its purpose.
If you're going to use that and not define any other symbol as a shortcut for jQuery, then you must use jQuery as the symbol for jQuery functions instead of $.
Do this instead:
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function () {
jQuery('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>
or, if you're only trying to use $ inside the .ready() handler, then you can assign it using a feature of .ready() like this:
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function ($) {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>
or if you have code that isn't just in the .ready() handler that wants to use $, you can redefine $ in a closure which lets other libraries use $ in their own code, but you can use it for jQuery in your jQuery code inside the closure:
<script type="text/javascript">
$.noConflict();
(function($) {
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
$.each(whatever...)
})(jQuery);
</script>
or, you can define a new shortcut symbol for jQuery:
<script type="text/javascript">
var $$ = $.noConflict();
$$(document).ready(function () {
$$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>

Try:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>

jQuery tooltip is not working

I want a tooltip to show when I rollover on particular links. It's not working. The commented out alert is working, so event is not the issue. This is my javascript code:
$(window).load( function() {
$("a").each(function() {
if(this.text==" View image") {
$(this).mouseover(function() {
// alert("blabla");
$(this).tooltip();
});
}
});
});
on my html file the includes are:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript" src="jquery.tooltip.min.js"></script>
<script type="text/javascript" language="javascript" src="mainscript.js"></script>
I'd appreciate some help.
UPDATE: removing mouseover doesn't help

Remove the mouseover function. The plugin doesn't require you to add a custom mouseover function. It's done from the plugin for you.
if(this.text==" View image") {
$(this).tooltip();
}
Hope this helps ^^
Change the main jQuery function to $(document).ready(function(){});
This will probably work now~

Try this:
$("a").each(function() {
if(this.innerHTML == " View image") {
$(this).tooltip();
}
}
Also, there's a space before the View in "View image". I'm not sure if that's intentional or not.

I used jQuery tipsy on my recent projects. Quite easy to understand and integrate.

JQuery Slideshow and MooTools Conflict

I am having a problem with the motools library conflicting with my jQuery library:
Here's the code:
<script language="Javascript" type="text/javascript" src="revamp/js/jquery-1.4.2.js"></script>
<script language="Javascript" type="text/javascript" src="revamp/js/jquery.blinds-0.9.js"></script>
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/_class.viewer.js"></script>
<script type="text/javascript">//<![CDATA[
window.addEvent('domready',function(){
var V5 = new viewer($('boxCont').getChildren(),{
mode: 'alpha',
fxOptions: {duration:500},
interval: 6000
});
V5.play(true);
});
</script>
<script type="text/javascript">
$(window).load(function () {
// start the slideshow
$('.slideshow').blinds();
})
</script>
If I disable mootools, the slideshow work (vice versa with the jQuery). I tried wrapping the jQuery around jQuery.noConflict(); like so:
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
$(window).load(function () {
// start the slideshow
$('.slideshow').blinds();
})
});
</script>
But still the mootools dependent script doesn't work. Please help as I'm not really familiar with jQuery/javascript.
Thanks!

Once you call jQuery.noConflict(), you refer to jQuery via jQuery rather than $. $ is then usable by MooTools or another JavaScript library.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).load(function () {
// start the slideshow
jQuery('.slideshow').blinds();
})
});
</script>
If you want to give jQuery another name, you can do the following:
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq(window).load(function () {
// start the slideshow
jq('.slideshow').blinds();
})
});
</script>

You want jQuery.noConflict().
But you don't really need to, because you are using jQuery for your jQuery alias, and you are passing $ as the argument which maps to the jQuery object.
So long as all your jQuery (and jQuery only) happens inside that jQuery(document).ready(), then you can use $ for jQuery and not worry about about clashes.