Jquery conflict

Question

I'm new here and I have a big problem that I can't solve

I have two scripts that don't work with one another

Here's the code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>


<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true);
});
</script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/jquery.skripta_1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#slider1').skripta_1();  
    });
</script>

Now, when this code is included this part

<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true);
    });
</script>

doesn't work

But when I remove this part

  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

the first part mentioned does work, but this one

<script type="text/javascript" src="js/jquery.skripta_1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#slider1').skripta_1();  
        });
    </script>

does not

I've already tried everything that involves noConflict and renaming $ with jQuery, but nothing helps

Answer 1

In fact,here is what I have figured out

this is the code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript" src="../js/jquery.tinycarousel.min.js"></script>

and the part that is in conflict is this one

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

<script>
    (function ($) {
        $('#slider1').tinycarousel();
        $("#featured > ul").tabs({
            fx: {
                opacity: "toggle"
            }
        }).tabs("rotate", 0, true);
    })(jQuery);
</script>

when removed the part

$('#slider1').tinycarousel();

doesn't work, and without removing it the part

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true);

doesn't work,but the first one does

Answer 2

So, to give you more code, it looks like this

the javascripts

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#slider1').tinycarousel();   
        });
    </script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true);
    });
</script>

and the HTML for this javascript

<script type="text/javascript">
        $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true);
        });
    </script>

is

<div id="featured" >
  <ul class="ui-tabs-nav">

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
            <a href="#fragment-1"><span>
             <div id="movie_thumb"><img src="image.png" width="80" height="60" border="0" /></div>
              </span></a>
        </li>

    <li class="ui-tabs-nav-item" id="nav-fragment-2">
              <a href="#fragment-2"><span>
      <div id="movie_thumb"><img src="image2.png" width="80" height="60" border="0" /></div>
              </span></a>
        </li>

             <li class="ui-tabs-nav-item" id="nav-fragment-3">
              <a href="#fragment-3"><span>
                <div id="movie_thumb"><img src="image3.png" width="80" height="60" border="0" /></div>
                             </span></a>
        </li>

             <li class="ui-tabs-nav-item" id="nav-fragment-4">
              <a href="#fragment-4"><span>
            <div id="movie_thumb"><img src="image4.png" width="80" height="60" border="0" /></div>
              </span></a>
            </li>

             <li class="ui-tabs-nav-item" id="nav-fragment-5">
              <a href="#fragment-5"><span>
              <div id="movie_thumb"><img src="image5.png" width="80" height="60" border="0" /></div>
              </span></a>
            </li>

      </ul>

and the HTML for this javascript

<script type="text/javascript">
            $(document).ready(function(){
                $('#slider1').tinycarousel();   
            });
        </script>

is

<div id="slider1">
   <ul class="onemo">
      <li> MANY THINGS GO HERE</li>
      <li> MANY THINGS GO HERE</li>
      <li> MANY THINGS GO HERE</li>
      <li> MANY THINGS GO HERE</li>
   </ul>
</div>

does this maybe help?

Answer 3

You should only ever include jQuery once. Including two scripts to two different versions of jQuery will absolutely cause your pages to break. Pick the highest version one, and stick with that.

In your case, using the 1.4.2 version, and removing the googleapis one. Or switch to a more recent version from Google.

Here's what I would recommend for your final code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript" src="js/jquery.skripta_1.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true);
    $('#slider1').skripta_1();  
});
</script>

Answer 4

You're loading mini's of jQuery 1.3.2 and 1.4.2. Just load 1.4.2.