jQuery noConflict mode causes another conflict!

**amberbam** · Jun 5, 2012 12:31

Hello,
I'm creating my design portfolio website with Joomla (Still a jQuery problem, don't run away!) and I have come across a problem. The template seems to have problems with the lightbox I am using. The lightbox will not show in IE or Safari, it just opens the image in a new blank white page. After a little bit of research I thought I'd try the no conflict mode. Bear in mind I know almost NOTHING about javascript and jQuery. So I added this:

<script type="text/javascript">
jQuery.noConflict();
</script>

to my index page just after:
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-1.7.2.js"></script> etc. etc.

and before <head>

I thought.. that can't be it, but then I tested and voila! The lightboxes were working in Safari and IE. That was awesome.. until I realized that line of code screwed up my menu. It made it so that the menu on the Design and Contact page would only show the right hand side of the background image, and the background no longer showed up on hover - only when active, and incorrectly.

So can anyone help a complete js/jquery noob out here? Please?

My Portfolio Website

**paul_wilkins** · Jun 5, 2012 16:35

Originally Posted by amberbam

I thought.. that can't be it, but then I tested and voila! The lightboxes were working in Safari and IE. That was awesome..

noConflict is used when there are multiple scripting libraries competing for the $() object, such as Prototype and jQuery. noConflict tells jQuery to release its hold on the $() object, allowing it to be used by whichever other library was wanting to use it.

It also means that any jQuery references afterwards to $() must be changed to jQuery instead, but once inside a jQuery context you can use a $ parameter to allow you to continue to use $ inside of that context.

So:

HTML Code:

<!-- Some other scripting library such as Prototype may be using $ for itself up here -->
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<!-- Now jQuery has taken over the $ object, which means that Prototype code cannot work at this point here -->
<script type="text/javascript" src="js/script.js"></script>

Code javascript:

// Now we tell jQuery to remove its hold on the $ object, reverting it back to what it was before jQuery was loaded
// This means that Prototype (or whatever else was using $) now regains use of the $ object for itself
jQuery().noConflict();
 
// Now we use the jQuery object as a wrapper our jQuery code
jQuery(function ($) {
    // and thanks to that $ in the parameter of the function,
    // all of the code inside of here can now safely use the jQuery $ object for itself again
});

Originally Posted by amberbam

So can anyone help a complete js/jquery noob out here? Please?

The notes above should help you to understand what is happening and why.

**cpradio** · Jun 5, 2012 16:38

It is your plugin for topLink that is breaking it, because you stated to use jQuery as no-conflict, it isn't associating jQuery with $. So you have to tell it out to.

The below should resolve the topLink plugin

Code javascript:

(function($) {
$.fn.topLink = function(settings) {
		settings = jQuery.extend({
			min: 1,
			fadeSpeed: 200,
			ieOffset: 50
		}, settings);
		return this.each(function() {
			//listen for scroll
			var el = $(this);
			el.css('display','none'); //in case the user forgot
Uncaught TypeError: Object [url]http://www.amberbam.com/index.php/graphic-and-web#top[/url] has no method 'css'
			$(window).scroll(function() {
				//stupid IE hack
				if(!jQuery.support.hrefNormalized) {
					el.css({
						'position': 'absolute',
						'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
					});
				}
				if($(window).scrollTop() >= settings.min)
				{
					el.fadeIn(settings.fadeSpeed);
				}
				else
				{
					el.fadeOut(settings.fadeSpeed);
				}
			});
		});
	};
})(jQuery);

**amberbam** · Jun 6, 2012 16:50

Cpradio - Thanks so much, that did the trick. I actually just got rid of the top link because I'm perfectly fine without it. I never in a million years would have guessed a lightbox/menu issue was caused by a top link. Sooo much to learn...

**aless78** · Jun 15, 2012 07:17

it's not good to mix up multiple js libraries using the same dollar symbol. try to use just one of them

User Tag List

Thread: jQuery noConflict mode causes another conflict!

Thread Tools

Display

jQuery noConflict mode causes another conflict!

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions