javascript - jQuery Conflicts With Joomla YooTheme WidgetKit -

i developing joomla site customer locally @ moment.

i have jquery conflict doing head in!

i running template yootheme: http://www.yootheme.com/demo/themes/joomla/2013/infinite/

the top slideshow jquery controlled. run yoothemes "widgetkit".

i have simple contact form validated using jquery (for email address etc).

when ever put contact form onto site, top slideshow disappears.

this jquery code:

<script src="********/js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> jquery(document).ready(function() { jquery.noconflict();  function isint(n) { return typeof n === 'number' && n % 1 == 0; }  // form validation jquery(".darkbtn").click(function(e) { e.preventdefault(); var email_check = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$/i; var email = jquery("form.form_contact .email").val();  var zipcheck = /[a-z]{1,2}[0-9r][0-9a-z]? [0-9][abd-hjlnp-uw-z]{2}/i; var zip = jquery("form.form_contact .zipcode").val();  var phonecheck = /^\d+$/; var phone = jquery("form.form_contact .phone").val();  var error = "";  if(!email_check.test(email)) { error = "please give valid email address."  }  if(!zipcheck.test(zip)) { error = "please give valid postcode."; }  if(!phonecheck.test(phone) || phone.length != 11) { error = "please give valid phone number."; }   // no error ? -> submit if(error == "") { jquery(".form_error").hide(); jquery("form#contact_form").submit(); } else { jquery(".form_error").empty().text(error); jquery(".form_error").show(); } }); });  </script> 

a friend of mine knows basic jquery knocked me. however, not know enough solve problem. have no idea when comes jquery.

i done bit of reading , found somewhere said try changing "$" "jquery" in code why has "jquery" instead of "$" sign.

how can these both work together? appreciated.

new code requested in comments below:

<script src="********/js/$.js" type="text/javascript"></script> <script type="text/javascript"> $.noconflict(); $(document).ready(function($) {   function isint(n) { return typeof n === 'number' && n % 1 == 0; }  // form validation $(".darkbtn").click(function(e) { e.preventdefault(); var email_check = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$/i; var email = $("form.form_contact .email").val();  var zipcheck = /[a-z]{1,2}[0-9r][0-9a-z]? [0-9][abd-hjlnp-uw-z]{2}/i; var zip = $("form.form_contact .zipcode").val();  var phonecheck = /^\d+$/; var phone = $("form.form_contact .phone").val();  var error = "";  if(!email_check.test(email)) { error = "please give valid email address."  }  if(!zipcheck.test(zip)) { error = "please give valid postcode."; }  if(!phonecheck.test(phone) || phone.length != 11) { error = "please give valid phone number."; }   // no error ? -> submit if(error == "") { $(".form_error").hide(); $("form#contact_form").submit(); } else { $(".form_error").empty().text(error); $(".form_error").show(); } }); });  </script> 

call jquery.noconflict(); directly after including jquery library onto page. because libraries attempt use $ sign , clash jquery. hands them on global scope.

you can still use $ in jquery code ensuring solely within function's scope (so doesn't affect other libraries) (function($){ ... })(jquery).

jquery.noconflict(); jquery(document).ready(function($) {    ... jquery code here } 

edit: same behaviour can occur when include jquery multiple times onto same page (as op's case).