SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation jQuery noConflict mode causes another conflict!

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by amberbam View Post
    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
    });

    Quote Originally Posted by amberbam View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,070
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    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);

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's not good to mix up multiple js libraries using the same dollar symbol. try to use just one of them


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •