title: jQuery Conflicts With Joomla YooTheme WidgetKit
body: <p>I am developing a Joomla site for a customer locally at the moment.</p>
  
  <p>I have a jQuery conflict which is doing my head in!</p>
  
  <p>I am running this template from YooTheme:
  <a href="http://www.yootheme.com/demo/themes/joomla/2013/infinite/" rel="nofollow">http://www.yootheme.com/demo/themes/joomla/2013/infinite/</a></p>
  
  <p>The top slideshow is jQuery controlled. It is run by YooThemes "WidgetKit". </p>
  
  <p>I have a simple contact form which is validated using jQuery (for email address etc).</p>
  
  <p>When ever i put the contact form onto the site, the top slideshow disappears. </p>
  
  <p>This is the jQuery code:</p>
  
  <pre><code>&lt;script src="********/js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
  jQuery.noConflict();
  
  function isInt(n) {
  return typeof n === 'number' &amp;&amp; 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 a valid email address."
  
  }
  
  if(!zipCheck.test(zip))
  {
  error = "Please give a valid postcode.";
  }
  
  if(!phoneCheck.test(phone) || phone.length != 11)
  {
  error = "Please give a valid phone number.";
  }
  
  
  // No error ? -&gt; Submit
  if(error == "")
  {
  jQuery(".form_error").hide();
  jQuery("form#contact_form").submit();
  } else {
  jQuery(".form_error").empty().text(error);
  jQuery(".form_error").show();
  }
  });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>A Friend of mine who knows very basic jQuery knocked this up for me. However, he does not know enough to solve the problem. I have no idea when it comes to jQuery.</p>
  
  <p>I done a bit of reading and found somewhere which said try changing the "$" to "jQuery" in the code which is why it has "jQuery" instead of the "$" sign. </p>
  
  <p>How can i get these both to work together?
  Any help is appreciated.</p>
  
  <p>New Code as requested in comments below:</p>
  
  <pre><code>&lt;script src="********/js/$.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $.noConflict();
  $(document).ready(function($) {
  
  
  function isInt(n) {
  return typeof n === 'number' &amp;&amp; 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 a valid email address."
  
  }
  
  if(!zipCheck.test(zip))
  {
  error = "Please give a valid postcode.";
  }
  
  if(!phoneCheck.test(phone) || phone.length != 11)
  {
  error = "Please give a valid phone number.";
  }
  
  
  // No error ? -&gt; Submit
  if(error == "")
  {
  $(".form_error").hide();
  $("form#contact_form").submit();
  } else {
  $(".form_error").empty().text(error);
  $(".form_error").show();
  }
  });
  });
  
  &lt;/script&gt;
  </code></pre>