Not sure how to use jQuery noconflict function

Question

I've been working on this site for the past two weeks and everything has been running smooth until now. I have conflicting javascripts and all though I know what method to use to solve the problem (jquery noconflict), I have no idea how to use it!

In my case, I have:

• a drop menu which uses the prototype js and a custom js
• and a contact form which uses a few jquery files for validation and error notification

The case is classic, they work fine separately but not together. Ive read a gang of websites and most point to the solution of using:

<script>

  jQuery.noConflict();

  // Use jQuery via jQuery(...)
  jQuery(document).ready(function(){
    jQuery("div").hide();
  });

  // Use Prototype with $(...), etc.
  $('someid').hide();

</script>

Im new to javascript, so I dont know what to do with this snippet.

This is my header:

    <script src="js/prototype.js"></script>
    <script src="js/drop-o-matic.js"></script>
    <script>

  jQuery.noConflict();

  // Use jQuery via jQuery(...)
  jQuery(document).ready(function(){
    jQuery("div").hide();
  });

  // Use Prototype with $(...), etc.
  $('someid').hide();

    </script> 

    <!--[if lt IE 9]>

 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

    <!-- <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
 <script src="js/jquery.jigowatt.js"></script> -->


    <script>
    document.createElement("article");  
    document.createElement("footer");  
    document.createElement("header");  
    document.createElement("hgroup");  
    document.createElement("nav");
    document.createElement("aside");
    document.createElement("section");
    document.createElement("menu");
    document.createElement("hgroup");
 </script> 

I only have the prototype & drop-o-matic js in effect and the js files for the form is commented (just after IE comment).

The prototype & drop-o-matic are for a html5 nav (has no id's, just

        <nav>
            <ul>
                <li><a href="index.php" class="home">Home</a></li>
                ...
                ...
                ...
            </ul>
        </nav>

What should I do to make the scripts work together?

Thanks for the help.

Answer 1

First of all, you are calling jQuery.noConflict() before you even include the jQuery library! That definitely will not work. You must include jQuery script tag before calling noConflict...

<script src="js/prototype.js"></script>
<script src="js/drop-o-matic.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script><!-- IMPORTANT -->
<script>
  jQuery.noConflict();
</script>

You can also give jQuery your own alias if you'd like...

var $j = jQuery.noConflict();

$j(document).ready(function() {
  $j("div").hide();
});

For more information, please read the API documentation regarding Using jQuery with Other Libraries