Question

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='javascripts/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

Answer 1

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.