jQuery conflict, possible bootstrap issue?

Question

i'm having an issue with some jQuery i'm trying to run. I am attempting to implement this into my bootstrap application:

http://jsfiddle.net/YG6k6/

However, when i try to implement this into my bootstrap application, i get a range of error such as:

Uncaught TypeError: Cannot call method 'fadeIn' of null index.php:108
Uncaught TypeError: Cannot call method 'animate' of null index.php:109

I have tried several things to fix this with no luck. I'm using jquery/1.10.1/ if that's any help.

Edit:

Here is the code i have in my footer:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('#iphone-img').mouseover(function(){
                $('.main-content-box').fadeIn(600).show(); //on mouse enter show div
            });
                $('#iphone-img').mouseleave(function(){
                    $('.main-content-box').animate({opacity: 'toggle'}, 'slow'); 
                });
        });
    </script>
    <script src="js/bootstrap.js"></script>
    <script type='text/javascript' src='js/lib/prototype.js'></script>
    <script type='text/javascript' src='js/lib/raphael.js'></script>
    <script type='text/javascript' src='js/lib/highlight.js'></script>
    <script type='text/javascript' src='js/analytics.js'></script>
    <script type="text/javascript">
        $(function () {
            $('#info-tabs').tab('show');
        });

        $(function(){
            $('#pop-info').tooltip('hide');
        });

        $(function(){
            $('#videoModal').modal('hide');
        });
    </script>
    <script type='text/javascript'>
        function onLoad(){
            Element.observe(window,'load', function(){
            var w = 840;
            var h1 = Raphael('beautiful-line-chart1', w, 250);
            var h2 = Raphael('beautiful-line-chart2', w, 250);
            //var h3 = Raphael('beautiful-line-chart3', w, 250);
            //var h4 = Raphael('beautiful-line-chart4', w, 250);

            /* Line Chart 2; table_id:e3 tbody-class: line_e3 table_id:e33 */
            drawLine({
                holder: h1,
                data_holder: 'd2',
                mastercolor: '#01A8F0',
                spewidth: w,
                showarea: true,
                mousecoords: 'circle',
                nodot: true
            });
            drawLine({
                holder: h1,
                data_holder: 'd1',
                mastercolor: '#666',
                spewidth: w,
                showarea: true,
                mousecoords: 'circle',
            });
            drawLine({
                holder: h2,
                data_holder: 'e3',
                mastercolor: '#555',
                spewidth: w,
                showarea: false,
                mousecoords: 'circle',
                gridcolor: '#333333',
                nodot: true
            });
            drawLine({
                holder: h2,
                data_holder: 'e3',
                mastercolor: '#8dd916',
                spewidth: w,
                showarea: true,
                mousecoords: 'circle',
                gridcolor: '#333333',
                dotcolor: '#333333'
            });
            drawLine({
                holder: h3,
                data_holder: 'd2',
                mastercolor: '#d90000',
                spewidth: w,
                showarea: false,
                mousecoords: 'rect'
            });
            drawLine({
                holder: h4,
                data_holder: 'd2',
                mastercolor: '#ccc',
                spewidth: w,
                showarea: false,
                nodot: true // hide dots
            });
            drawLine({
                holder: h4,
                data_holder: 'd1',
                mastercolor: '#eb2682',
                spewidth: w,
                showarea: true,
                nodot: true // hide dots
            });
        });

        // Just used in the code highlighter

        hljs.tabReplace = '   ';
        hljs.initHighlightingOnLoad();
        }

        onLoad();
    </script>
    <script type="text/javascript">
        $('#myCarousel').carousel({
          interval: 2000
        });
    </script>
</body>

I should add as well when i wrap my code in a function such as:

$(function(){});

It still doesn't work.

Answer 1

it is the problem with prototype library overriding the $ reference of jQuery, ie in your code $ is referencing protorype library not jQuery.

you need to use jQuery.noConflit() to resolve this or use jQuery to reference jQuery library instead of $

jQuery(function($){
    $('#info-tabs').tab('show');
     $('#pop-info').tooltip('hide');
    $('#videoModal').modal('hide');
})