How to avoid multiple jqueries clashes

Question

I have a page that uses both Jquery's Fisheye and Bootstrap. Now the Fisheye isn't working whenever Bootstrap is used.I tried using :noConflict();

But it doesn't seem to help.Or maybe Im placing it wrongly? Below is my full page code.Kindly advise.Thanks in advance.

    <!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->

    <html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="stylesheet" href="side_style.css" type="text/css">
        <script src="menuv2.js" type="text/javascript"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />

        <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" />
        <link href="css/bootstrap-modal.css" rel="stylesheet" />



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

        <style>
            .left {
                height: 100%;
                //opacity: 0.5;
                background: rgba(0, 0, 0, 0.3);
                border-top: 3px solid #ccc;
                border-bottom: 3px solid #ccc;
                border-right: 3px solid #ccc;
                position: relative;
                float: left;
                width: 16%;
                color: #fff;
            }
            .right {
                height: 100%;
                background: rgba(0, 0, 0, 0.3);
                border-top: 3px solid #ccc;
                border-bottom: 3px solid #ccc;
                border-left: 3px solid #ccc;
                position: relative;
                float: right;
                width: 16%;
            }
            .middle {
                height: 100%;
                background: rgba(0, 0, 0, 0.3);
                border-top: 3px solid #ccc;
                border-bottom: 3px solid #ccc;
                border-right: 3px solid #ccc;
                border-left: 3px solid #ccc;
                position: relative;
                float: left;
                margin-left: 3em;
                //margin-right: 1em;
                // left:20%;
                width: 60%;
            }
            .ontop {
                position: relative;
                top: 2.7em;
                right: 1.6em;
            }
            .onmiddle {
                position: relative;
                top: 12.7em;
                right: 1.6em;
            }
        </style>

    </head>

    <body style="background-image: url(bg/6.jpg);background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;
    -o-background-size: cover;background-size: cover;" width="100%" height="100%">




        <div class="left">
            <aside>
                <img src="hooha_images/logo_small.png" class="expand">
            </aside>
            <aside style="padding-top: 20%;" class="ontop">
                <?php include ( 'sidebar.php'); ?>



            </aside>
            <aside>

                <aside>

                    <?php include( 'bottom_left.php');?>
                </aside>

        </div>
        <div class="middle">
            <h1>This is the Superstar page </h1>

        </div>
        <div class="right">
            <div class="responsive"> <aside style="position: relative;float: right;">
                <a data-toggle="modal" href="#responsive">Register</a> | <a data-toggle="modal" href="#responsive">Login</a>
                <aside>
                    <div id="responsive" class="modal hide fade" tabindex="-1" data-width="760">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3>Register</h3>
                        </div>
                        <div class="modal-body">
                            <div class="row-fluid">
                                <div class="span6">
                                    <h4>Kindly fill up your details</h4>
                                    <p>Name:
                                        <input type="text" class="span12" />
                                    </p>
                                    <p>Email
                                        <input type="text" class="span12" />
                                    </p>
                                    <p>Password
                                        <input type="text" class="span12" />
                                    </p>

                                </div>
                                <div class="span6">
                                    <h4>More Info</h4>
                                    <p>Detail 1
                                        <input type="text" class="span12" />
                                    </p>
                                    <p>Detail 2
                                        <input type="text" class="span12" />
                                    </p>
                                    <p>Detail 3
                                        <input type="text" class="span12" />
                                    </p>

                                </div>

                            </div>
                        </div>



                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn">Cancel</button>
                            <button type="button" class="btn btn-primary">Submit</button>
                        </div>
                    </div>

            </div>
        </div>

        <script type="text/javascript">
         $.noConflict();
            $(document).ready(
                function () {
                    $('#dock2').Fisheye({
                        maxWidth: 60,
                        items: 'a',
                        itemsText: 'span',
                        container: '.dock-container2',
                        itemWidth: 40,
                        proximity: 80,
                        alignment: 'left',
                        valign: 'bottom',
                        halign: 'center'
                    }); //added semicolon
                }
            );
        </script>

        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
        <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
        <script src="js/bootstrap-modalmanager.js"></script>
        <script src="js/bootstrap-modal.js"></script>
        <script type="text/javascript">
            $(function () {

                $.fn.modalmanager.defaults.resize = true;

                $('[data-source]').each(function () {
                    var $this = $(this),
                        $source = $($this.data('source'));

                    var text = [];
                    $source.each(function () {
                        var $s = $(this);
                        if ($s.attr('type') === 'text/javascript') {
                            text.push($s.html().replace(/(\n)*/, ''));
                        } else {
                            text.push($s.clone().wrap('<div>').parent().html());
                        }
                    });

                    $this.text(text.join('\n\n').replace(/\t/g, '    '));
                });

                prettyPrint();
            });
        </script>
    </body>

    </html>

score 0 · Answer 1 · edited May 23 '17 at 11:56

Error part :
(use same tags....not different scripts)

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

add this right after you add jQuery lib in same script tag

<script type='text/javascript'>
    jQuery.noConflict(); //or $.noConflict();

    jQuery(document).ready(function() {
       //your code
    });
 </script>

When using multiple jquery files using jQuery is a better option than $

Also see : how to use jquery.noConflict property

EDIT

semi-colon missing :)

    <script type="text/javascript"> 
    jQuery.noConflict(); $(document).ready( function() { 
         $('#dock2').Fisheye( { maxWidth: 60, 
        items: 'a', itemsText: 'span', 
        container: '.dock-container2', itemWidth: 40, 
        proximity: 80, alignment : 'left', 
        valign: 'bottom', halign : 'center' } );//added semicolon 
   }); 
    </script>

I tried adding jQuery.noConflict(); inside the same script of Fisheye,but it doesn't make any difference. Where is my mistake? — Kalaivani Nair, Dec 04 '13 at 15:48

score 0 · Answer 2 · edited May 23 '17 at 10:32

Finally I fixed it.

There are 2 ways:

1) I just changed the order of js libs..like placing

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

on top of  
 <script type="text/javascript" src="js/jquery.js"></script>.

-it worked!

2) I didn't change the order so,

 <script type="text/javascript" src="js/jquery.js"></script>
..........
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

then,I added this below the second Jquery lib:

  <script>
    var $old=jQuery.noConflict(true);//must set the value to true else wont work
  </script>

***Key point is to set the parameter to true like above..else wont work..

Credit goes to :How can I use plugins for different versions of jQuery on the same page?

Thanks again for all who answered..appreciated guys!

How to avoid multiple jqueries clashes

2 Answers2