Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow prototype.js and jquery.js conflict problems? (Lightbox and Thickbox) simple?

    I will try to be as specific as possible in describing the issue.

    I am running both lightbox (which uses prototype and scriptalicious) and thickbox (which uses jquery.js) on my site.

    lightbox 2 works fine.
    Lightbox 2:
    huddletogether.com/projects/lightbox2/

    thickbox is installed but works fine.
    Thickbox:
    jquery.com/demo/thickbox/

    Implementation instructions are on the sites above (respectively). I have double checked they are both installed correctly, I think they are!

    None of the scripts work when both are installed together, however this fix is supposed to make them work together without conflict.

    http://docs.jquery.com/Using_jQuery_...ther_Libraries

    From the official jquery site.

    I have implemented the first fix.

    [QUOTE}The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, "global" objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

    That said, there is one caveat: By default, jQuery uses "$" as a shortcut for "jQuery"
    However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

    Code:
    <html>
     <head>
       <script src="prototype.js"></script>
       <script src="jquery.js"></script>
       <script>
         jQuery.noConflict();
         
         // Use jQuery via jQuery(...)
         jQuery(document).ready(function(){
           jQuery("div").hide();
         });
         
         // Use Prototype with $(...), etc.
         $('someid').style.display = 'none';
       </script>
     </head>
     <body></body>
     </html>
    This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.[/QUOTE]

    I am wandering If I have implemented this fix rignt, simply by adding that script above int he head section of my site.

    You may view the source of my site to see if I am going wrong as far as implementing this fix goes, and to find a solution as to how I can go about fixing this.

    Section removed by WA as user requested

    The problem lines are:

    advertising.php (line 55)
    $("someid") has no properties
    [Break on this error] $('someid').style.display = 'none';
    And
    thickbox.js line 21
    $(domChunk) has no properties
    tb_init("a.thickbox, area.thickbox, input.thickbox")thickbox.js (line 21)
    (no name)()thickbox.js (line 14)
    to the wait list jQuery.readyList.push()jquery.js (line 1534)
    (no name)()jquery.js (line 1558)
    each([function(), function()], function(), undefined)jquery.js (line 339)
    ready()jquery.js (line 1557)
    [Break on this error] $(domChunk).click(function(){
    I know Lightbox and Thickbox can work together - im just not sure how Im a complete javascript novice as you may have guessed!

    Thank you in advance for your help and suggestions,

    Kind Regards
    Last edited by WA; 07-19-2008 at 09:09 PM.

  • #2
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I managed to fix this, I Replaced all $ in thickbox.js with jQuery and removed the example code below noConflict call.

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    could you post your fix? I am trying to use the scrollpane.js which uses jQuery and slimbox which uses prototype.js

    can't seem to get them to coexist....

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thickbox & Lightbox Compatibility Solution

    Step 1. In your html file put:

    <script type="text/javascript" src="path-to/prototype.js"></script>
    <script type="text/javascript" src="path-to/scriptaculous.js"></script>
    <script type="text/javascript" src="path-to/jquery.js" charset="utf-8"></script>
    <script>jQuery.noConflict();</script>


    (followed by your Thickbox & Lightbox javascript includes...)



    Step 2. In the thickbox.js add the following lines of code...

    At the top, add the following red text line:

    var tb_pathToImage = "path-to-images/loadingAnimation.gif";

    /*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/

    (function($) { //* hide the namespace




    ......And then at the very bottom (end of file) add:

    })(jQuery); //* hide the namespace



    That should work... This fix seems to allow the '$' dollar sign to be exchanged for 'jQuery' in the thickbox.js and so avoids conflicts with the prototype javascript library.

    NB. I was using the uncompressed version of Thickbox.
    Versions I tested and got working are:
    Thickbox 3.1
    Lightbox 2.03.3
    Prototype 1.6.0
    JQuery 1.2.2

    Hope that helps!

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    All I can say is I hope you are using the compressed versions of all the libraries because that is a lot of JavaScript code that has to be downloaded to the client!

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Confirmed. jQuery thickbox 'fix' works on the compressed version too!

    Just tried it on the compressed version of thickbox.js - and it works!

    ... Funnily enough its even easier to paste the code 'fix' into the compressed version, as everything else is on 1 big line of code!

    (function($) {
    eval(function(p,a,c,k,e,r).............
    })(jQuery);

  • #7
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had same problem when includes both Lightbox and Yshout5 (Ajax shoutbox using Yshout.js + Jquery.js ) in one page
    None of the scripts work when both are installed together.
    Can anyone fix this for me?
    Thank you very much

  • #8
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    still cant get this to work - any help please !

    I have a query.js and a lightbox.js javascripts running on the same page and they are conflicting. They both work great separately but when combined the scripts stop working.


    I've reference'd this solution:



    <script>
    jQuery.noConflict();

    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
    jQuery("div").hide();
    });

    // Use Prototype with $(...), etc.
    $('someid').hide();
    </script>




    However, I am unsure of what to do with it. The forum referenced changing the name of the 'someid' but I don't know what to change it to.



    Here are my conflicting codes:



    <script src="scripts/prototype.js" type="text/javascript"></script>
    <script src="scripts/lightbox.js" type="text/javascript"></script>



    <script>
    jQuery.noConflict();

    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
    jQuery("div").hide();
    });

    // Use Prototype with $(...), etc.
    $('someid').hide();
    </script>




    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('.boxgrid.caption').hover(function(){
    jQuery(".cover", this).stop().animate({top:'50px'},{queue:false,duration:160});
    }, function() {
    jQuery(".cover", this).stop().animate({top:'300px'},{queue:false,duration:160});
    });
    });
    </script>

    Thanks for any help I'm so lost

  • #9
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    If that's indeed the order you are using:

    You can't make any calls to jQuery before actually including it.

  • #10
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was able to move the jQuery above like this:


    <script type="text/javascript" src="scripts/prototype.js"></script>
    <script type="text/javascript" src="scripts/lightbox.js"></script>

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

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

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('.boxgrid.caption').hover(function(){
    jQuery(".cover", this).stop().animate({top:'50px'},{queue:false,duration:160});
    }, function() {
    jQuery(".cover", this).stop().animate({top:'300px'},{queue:false,duration:160});
    });
    });

    </script>


    Still not getting the jQuery to function, however the lightbox script does work now. ... Ideas ?

  • #11
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Can you show this on an example site?

  • #12
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #13
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Hm, I don't see your code in there. I actually meant an example site with your code not working properly, so we can debug it.

    And please describe in detail what you expect it do do, and what it's actually doing.

  • #14
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery and Lightbox conflict

    Hello,

    I'm new to JQuery but have an issue when using JQuery script with Lightbox.
    Slider.js works fine until I add lightbox script. I'm not sure what I need to do to get these to work together. Thank you.
    - Dave



    current sample site (with conflict):
    http://davidkwhittemore.com/default04.php

    slider.js works (without lightbox script)
    http://davidkwhittemore.com/default04_noLightbox.php


  •  

    Posting Permissions

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