jQuery noConflict mode causes another conflict!

JavaScript
1

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? :slight_smile:

My Portfolio Website

2

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:


<!-- 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>



// 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
});

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

3

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


(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 http://www.amberbam.com/index.php/graphic-and-web#top 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);
4

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…

5

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