Javascript function not working based on the version of jquery being included.

My code of my Script is given below.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>       
    <script type="text/javascript" src="scripts/prototype.lite.js"></script>
    <script type="text/javascript" src="scripts/moo.fx.js"></script>
    <script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
    <script type="text/javascript">
    function init(){
        alert('init function called');
        var stretchers = document.getElementsByClassName('box');
        var toggles = document.getElementsByClassName('tab');
        var myAccordion = new fx.Accordion(
            toggles, stretchers, {opacity: false, height: true, duration: 600}
        );
        //hash functions
        var found = false;
        toggles.each(function(h3, i){
            var div = Element.find(h3, 'nextSibling');
                if (window.location.href.indexOf(h3.title) > 0) {
                    myAccordion.showThisHideOpen(div);
                    found = true;
                }
            });
            if (!found) myAccordion.showThisHideOpen(stretchers[0]);
    }
    </script>   

    <script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>
    <script type='text/javascript'> 

      var verticalAdjuster = .30;
      var backgroundSpeed = .15;
      var childrenSpeed = .05;
      var dogSpeed = -.03;
      var ground = -.00;

      jQuery(document).ready( function(){  
        alert('other function called');
        $("#painting").mousemove( function(e){

          var x = 750 - (e.pageX - this.offsetLeft);
          var y = 435 - (e.pageY - this.offsetTop);
          //$("#city").css("background-position", (backgroundSpeed*x) + " " + (backgroundSpeed*verticalAdjuster*y));
          $("#city").css("top", (backgroundSpeed*verticalAdjuster*y));
          $("#city").css("left", (backgroundSpeed*x));
          //$("#city").css("right", (backgroundSpeed*x*(-10)) );
          $("#tree").css("top", (childrenSpeed*verticalAdjuster*y) + "px");
          $("#tree").css("left", (childrenSpeed*x) + "px");
          $("#boyAndBitch").css("top", (dogSpeed*verticalAdjuster*y) + "px");
          $("#boyAndBitch").css("left", (dogSpeed*x) + "px");        
        });
      });

    </script>

The issue is that only the later script is running right now. But if I remove the <script type='text/javascript' src='javascri开发者_运维技巧pts/jquery-1.3.2.min.js'></script> from where it is, and place it on the top, then only the init() function works and not the later.

Can you please explain me how can I solve this issue.

Regards Zeeshan

You're including jQuery up at the very top, then Prototype right after that, then jQuery again at the bottom. The higher of the two script blocks appears to exclusively use Prototype, the lower of the two, exclusively jQuery.

Each of those includes is going to re-define $. By moving the initially-lower jQuery 1.3.2 inclusion to "the top", I assume you're placing it above your Prototype script tag.

So, down in your jQuery(document).ready callback, the $ has been hijacked by Prototype and you get errors because your code is written expecting that $ is jQuery.

What you should do is:

• Only use one version of jQuery on this page. Pick one and go with it.
• Call jQuery.noConflict(). Given the ordering you have now, things may work fine without it, but it's a good idea anyway, and will keep things from breaking if you change the order you include your libraries in.

• Change the beginning of your jQuery code to:

  jQuery(document).ready(function($) {
  

  Adding that $ as a parameter to the ready callback will let you use the $ shortcut within the callback.

Or, if you control all this code, just stick with either Prototype or jQuery, whichever you prefer.

If it is a requirement to use different versions of jQuery and also other javascript frameworks then it is possible using no-conflict mode to distinguish between them and also different the jQuery versions

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
    jq162 = jQuery.noConflict(true);
</script>

<script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>  
<script>
    jq132 = jQuery.noConflict(true);
</script>

Instead of $("#city").css("top", (backgroundSpeed*verticalAdjuster*y));

You should use jq132("#city").css("top", (backgroundSpeed*verticalAdjuster*y));

It seems odd that you are both linking to a google jquery version and local copy. I would recommend only linking to one. Also, you're going to want to do all of your imports before you actually write any scripts in the HTML file, unless you are using a noConflict() jQuery call. In that case you should use noConflict() before you import Prototype.

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  
      <script type='text/javascript' src='javascripts/jquery-1.3.2.min.js'></script>     

These are different versions of jquery. Because the second call is the last one, only that version is being used. I would say that removing that call completely would fix your problem.