SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery noConflict

    Hey,

    I am having trouble in having both lightbox and a Query tooltip text to work..

    On this page:

    http://freemanholland.com/babies/freebaby/

    You can see a list of products, where the user can click on the image and it will lightbox.

    However at the top of the page, where you can see the "New to Freebaby", you can rollover that and it should bring up a nice red tooltip text effect which it was doing before but is not now..

    I know i need to use jQuery NoConflict but i don't know how and where to use it..

    Can anyone help?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried doing this:

    PHP Code:
         <script type="text/javascript">  
         $.
    noConflict();
         $(
    document).ready(function() {  
    .
    .
    .

    But it does not work, what am i doing wrong?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @billy_111

    I know i need to use jQuery NoConflict but i don't know how and where to use it..
    jQuery.noConflict() serves one single purpose: to revert control of the global "$" variable so that another library (usually either Prototype.js or MooTools) can use it...

    in your demo page, i don't see any other libraries being used. is this correct? if you aren't using another library that claims the "$" variable for itself, you don't need to use jQuery.noConflict()...

    in regards to *how* to use it, here is a quick example:

    Code:
    <script src="path/to/jquery.js"></script>
    <script>
    // At this point, "$" is a shortcut to "jQuery"
    
    // Remove "$" alias (from here on, you need to 
    // use "jQuery" instead of "$"
    jQuery.noConflict();
    
    // OR... you can re-assign it to a new shortcut.
    // NOTE: noConflict() returns the global "jQuery"
    var $j = jQuery.noConflict();
    $j("#someId").css("someStyle", "someValue");
    
    </script>
    hope that helps.

  4. #4
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry,

    If you look at this page now:

    http://freemanholland.com/babies/freebaby/

    And view source, you will notice the Lightbox libraries a the top..

    You will now notice that the Rollover effect works, and the lightbox on the product images does not work..?

    Any ideas?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    If you are using jQuery in the page then your best option for a lightbox is to use one of the JQuery ones that are available rather than one from elsewhere that might conflict.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    I found a jQuery Alternative and it works perfectly.

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  7. #7
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi everyone,

    I have been trying all day making mootools work with jquery. But not successful.

    I have added the 'no conflict' code (
    Code:
    jQuery.noConflict();
    ) but changed my custom code function. Still don't work.

    I have a feeling that my custom code has not been changed properly.
    The original code is this:
    Code:
    <script type="text/javascript">
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 3000 );
    });
    
    
    </script>
    and I have changed it to this:
    Code:
    <script type="text/javascript">
    jQuery(function($) {
    function slideSwitch() {
        var $active = $('#slideshow IMG.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow IMG:first');
    
        // uncomment the 3 lines below to pull the images in random order
        
        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
    
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 3000 );
    })
    
    });
    Can someone verify that I have changed it right way?
    Not very technical and good with javascript.
    please any suggestions?

    thanks


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
  •