jQuery to match an input field value against a pre-defined value on focusout | Drupal Den

Here is how to show a message on a form when the input field loses focus and it matches a predefined value. In this example a message appears if the user enters an email address that matches the domain of a free email provider, eg. Hotmail, Yahoo & Gmail.

NOTE: this doesn't validate and stop the user from being able to submit the form, it's just a message that appears. If you use the Webform module and want to prevent a user from submitting a form you can do this by also enabling the Webform Validation module and adding a Form Validation Rule of the type Words Blacklist.

Anyway back to creating a jQuery message which appears when a form input value matches a predefined value...

The below script checks for a match when the field loses focus - in this instance it's checking for '@hotmail.', '@yahoo.' & '@gmail.'. It was done in this way so that it matches for both '@yahoo.com' and '@yahoo.co.uk', and isn't case sensitive. You can build quite complex rules for matching using JavaScript regular expressions (RegEx).

The message is inserted directly after the email input field, and is removed once the match isn't found anymore.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<form>     <input class="form-email" type="email" id="edit-submitted-email-address" name="submitted[email_address]" size="60"> </form>   <script> (function ($) {          $('input.form-email').focusout(function(){         var match = $(this).val().match(/@hotmail\.|@yahoo\.|@gmail\./gi);         if(match){                 $(this).not('.emailAlertActive').after( '<p class="emailAlert">Please use your business email address.</p>' ).addClass('emailAlertActive');         } else {             $(this).siblings('.emailAlert').remove();             $(this).removeClass('emailAlertActive')         }     })})(jQuery); </script>

Adding Dynamic ID through jQuery

function addAddressBar(){
 $("#address-div").children('.address-info:last').clone().appendTo("#address-div");
    $(".address-info:last").find('select').val("");
     var len = $("[class*='address-info']").length;
     $('#address-div .address-info:nth-child('+len+') .one').attr( "id", "country_id_"+len ).attr("onChange","ajx_state('"+""+len+"',this.value)");
    $('#address-div .address-info:nth-child('+len+') .two').attr( "id", "state_id_"+len ).attr("onChange","ajx_city('"+""+len+"',this.value)");
    $('#address-div .address-info:nth-child('+len+') .three').attr( "id", "city_id_"+len );
    $("#count_address").val(len);
    return false;
}

Accordion by default collapsible script

 <script>
$(function() {
$( "#accordion" ).accordion({
    heightStyle: "content",
    active: false,
    collapsible: true
});

});
</script>

HTML file Opening on New Window Script

<a href="#" onClick="myRef = window.open('http://www.orthosports.info/multimedia/X-Ray/X-Ray.html','mywin',
'left=20,top=20,width=732,height=453,toolbar=0,resizable=0,scrollbars=0,toolbar=0,location=0,directories=0,menubar=0,status=0'); myRef.focus()">Click Me</a>

jQuery Script for Form lenght characters

[contact-form-7 id="34" title="Contact form 1"]
<script type="text/javascript">
jQuery('#wpcf7-f34-p24-o1 form').submit(function() {
var abstract_length = jQuery("#abstract1").val().length + jQuery("#abstract2").val().length + jQuery("#abstract3").val().length + jQuery("#abstract4").val().length + jQuery("#abstract5").val().length + jQuery("#abstract6").val().length + jQuery("#abstract7").val().length;
if(abstract_length >= 2500){
   alert("Maximum Content for Abstract is 2500 Characters.");
   return false;
}
});
</script>

Stick div at top after scrolling

<style>
#sticky {
  background-color: #fff;
  -moz-border-radius: 0.5ex;
  -webkit-border-radius: 0.5ex;
  border-radius: 0.5ex;
  color: #000;
  font-size: 2em;
  padding: 0.5ex;
  width: 600px;
  }
#sticky.stick {
  -moz-border-radius: 0 0 0.5em 0.5em;
  -webkit-border-radius: 0 0 0.5em 0.5em;
  border-radius: 0 0 0.5em 0.5em;
  position: fixed;
  top: 0;
  z-index: 10000;
  }
</style>
</div>

<!-- If you have jQuery directly, then skip next line -->
<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
// If you have jQuery directly, then skip next line
google.load("jquery", "1");

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('#sticky').addClass('stick')
  else
    $('#sticky').removeClass('stick');
  }
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
</script>

Source From: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

jQuery.noConflict()

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>