SitePoint Sponsor

User Tag List

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

    JavaScript Overflow?

    Hey,

    I'm not sure if this true but i think i have too much javascript links in my <head> tag.

    I have the following code:-

    PHP Code:
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
       <script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>

            <script src="js/jquery.history_remote.pack.js" type="text/javascript"></script>

            <script src="js/jquery.tabs.pack.js" type="text/javascript"></script>
            <script type="text/javascript">
            
                $(document).ready(function() {
                    $('#container-1').tabs();
                    $('#container-2').tabs(2);
                    $('#container-3').tabs({ fxSlide: true });
                    $('#container-4').tabs({ fxFade: true, fxSpeed: 'fast' });
                    $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
                    $('#container-6').tabs({
                        fxFade: true,
                        fxSpeed: 'fast',
                        onClick: function() {
                            alert('onClick');
                        },
                        onHide: function() {
                            alert('onHide');
                        },
                        onShow: function() {
                            alert('onShow');
                        }
                    });
                    $('#container-7').tabs({ fxAutoHeight: true });
                    $('#container-8').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });
                    $('#container-9').tabs({ remote: true });
                    $('#container-10').tabs();
                    $('#container-11').tabs({ disabled: [3] });

                    $('<p><a href="#">Disable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                        $(this).parents('div').eq(1).disableTab(3);
                        return false;
                    });
                    $('<p><a href="#">Activate third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                        $(this).parents('div').eq(1).triggerTab(3);
                        return false;
                    });
                    $('<p><a href="#">Enable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                        $(this).parents('div').eq(1).enableTab(3);
                        return false;
                    });

                });
            </script> 
    Now the first set of javascript uses lightbox, and the second is sing jQuery UI tabs.

    BUT...

    Only one works. If i leave the code as it is above, the tabs work and lightbox does not. If i put the lightbox after the UI tabs script the lightbox works and vice versa..

    Why is this. I need both to work at the same time. How can i do this?

    Regards

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's probably a conflict between jQuery and prototype. It's stupid to have two different libraries there. They make for more HTTP requests, slower page loads and more potential conflicts. You should simply find a replacement for Lightbox that works with jQuery, like Thickbox. That's my recommendation.

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with what Raffles has said. If you do insist on having more than one library then try wrapping your jQuery code with the following:

    Code JavaScript:
    (function($){
        // Your jQuery code
    })($.noConflict());
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

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

    do you mean like this?

    PHP Code:

    //This is the jQuery for UI tabs

       
    <script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>

            <script src="js/jquery.history_remote.pack.js" type="text/javascript"></script>

            <script src="js/jquery.tabs.pack.js" type="text/javascript"></script>
            <script type="text/javascript">
            
                $(document).ready(function() {
                    $('#container-1').tabs();
                    $('#container-2').tabs(2);
                    $('#container-3').tabs({ fxSlide: true });
                    $('#container-4').tabs({ fxFade: true, fxSpeed: 'fast' });
                    $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
                    $('#container-6').tabs({
                        fxFade: true,
                        fxSpeed: 'fast',
                        onClick: function() {
                            alert('onClick');
                        },
                        onHide: function() {
                            alert('onHide');
                        },
                        onShow: function() {
                            alert('onShow');
                        }
                    });
                    $('#container-7').tabs({ fxAutoHeight: true });
                    $('#container-8').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });
                    $('#container-9').tabs({ remote: true });
                    $('#container-10').tabs();
                    $('#container-11').tabs({ disabled: [3] });

                    $('<p><a href="#">Disable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                        $(this).parents('div').eq(1).disableTab(3);
                        return false;
                    });
                    $('<p><a href="#">Activate third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                        $(this).parents('div').eq(1).triggerTab(3);
                        return false;
                    });
                    $('<p><a href="#">Enable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                        $(this).parents('div').eq(1).enableTab(3);
                        return false;
                    });

                })[B]($.noConflict());[/B]
            </script>   

    // below is the lightbox js

           <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script> 

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, scratch that, just change this line:

    Code JavaScript:
    $(document).ready(function() {

    To this:

    Code JavaScript:
    jQuery.noConflict();
    jQuery(document).ready(function($) {
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Jimmy, you dont know how many problems that has fixed!

    Thanks again.


  7. #7
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    I agree with what Raffles has said. If you do insist on having more than one library then try wrapping your jQuery code with the following:

    Code JavaScript:
    (function($){
        // Your jQuery code
    })($.noConflict());
    What does that exactly do Jimmy? Is it basically like a container?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It just means the $ function is no longer in the global scope and is unavailable, and you have to take the "longer" route of using jQuery().

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    $.noConflict() returns the value of $ (the dollar symbol) to its previous owner (prototype) and it also returns the jQuery wrapper function just for convenience. So, by executing $.noConflict and passing its return value to a self-invoking anonymous function ((function(){...})()), it's possible to regain $ (as jQuery, not prototype) within the context of that function.

    Code JavaScript:
    // $ is jQuery
     
    (function($){
     
        // In here, $ is jQuery
     
    })($.noConflict()/* $ is now prototype */);
     
    // Out here, $ is prototype
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Except, I suspect that instead of $.noConflict() you really mean jQuery.noConflict(), right?
    That way it doesn't matter if prototype is loaded before or after the jquery library.

    Code javascript:
    (function ($) {
        // In here, $ is jQuery
    }(jQuery.noConflict()));
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •