3 Essential jQuery Tricks That All Web Designers Need For Their Websites

3 Essential jQuery Tricks For Every Web Designer and Website Owner

These jQuery tricks make every webmaster's life easier and is used on almost all websites.
These jQuery tricks make every webmaster's life easier and is used on almost all websites. | Source

I use these on every website.

Let's face it. jQuery is changing the way web designers code and it makes our lives faster and easier. jQuery offers its plugin technology that allows developers to extend it and we get some pretty good programs to make web design much easier.

I have hubs on more jQuery and web design tricks as well including PHP, MVC, CodeIgniter, and CSS, so feel free to follow me for the tips and tricks to make your website design easier.

Before you delve into this hub, if you are not familiar with jQuery, read Blender's hub on the jQuery basics. It is really good.

jQuery Trick #1: Input Mask For Your HTML Forms

This cool jQuery plugin from Digital Bush allows you put symbols in your HTML forms for phone numbers, dates, social security numbers, etc that guides the user on how to enter them.

For example, if you have a phone number field, as soon as the user clicks into the phone number field, the phone number format automatically appears!

Where to download it: http://digitalbush.com/projects/masked-input-plugin/



How to enter this jQuery

jQuery(function($){
  $("#date").mask("99/99/9999");   
  $("#phone").mask("(999) 999-9999");   
  $("#tin").mask("99-9999999");   
  $("#ssn").mask("999-99-9999");
});

Advantages of using this plugin

You simply type 9's where the numbers would appear and the other symbols. The user cannot erase these symbols, so you get a perfect phone number every single time.

jQuery Trick #2: Equal Height Columns with jQuery

This jQuery trick is a must have and it solved the CSS issues of your different columns not having equal height, which seems to plague every web designer.

Do you know that situation when you have a background in your <DIV> tags and the background does not extend to the end of the column? This jQuery trick solves it.

You can view the full code at http://www.cssnewbie.com/example/equal-heights/


Full sample HTML and jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Newbie Example: Equal Height Columns with jQuery</title>
<style>
   body {
      font: small/1.3em Arial, Helvetica, sans-serif;
      background-color: white; }
   #wrap {
      width: 600px;
      margin: 0 auto; }
   .column {
      float: left; 
      padding: 10px; }
   #col1 {
      width: 110px;
      margin-right: 10px;
      background-color: #E2DDC4; }
   #col2 {
      width: 200px;
      margin-right: 10px;
      background-color: #6B99F6; }
   #col3 {
      width: 210px;
      background-color: #E87C5E; }
</style>
<script language="javascript" type="text/javascript" src="../../js/jquery/jquery.js"></script>
<script>
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".column"));
});
</script>
</head>

<body>
<div id="wrap">
   <h1>Equal Height Columns with jQuery</h1>
   <p>This is an example of equal height columns using a single short jQuery function. View the page source or <a href="http://www.cssnewbie.com/equal-height-columns-with-jquery/">refer to the original CSS Newbie article</a> to see how the function works.</p>
   <div class="column" id="col1">
      <p>This three-column design features three columns with significantly varying quantities of content.</p>
   </div>
   <div class="column" id="col2">
      <p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p>
      <p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
   </div>
   <div class="column" id="col3">
      <p>And I think a single class is an addition we can all get behind.</p>
   </div>
</div>

</body>
</html>

Simple explanation of this Code

This is actually easier than it looks.

  1. Give all of your <DIV> tags a class called "column". The ID is up to you.
  2. Style your individual <DIV> tags any way you want with CSS.
  3. Enter the jQuery exactly as above.

That's it! Your columns will be equal height. I WISH I found this jQuery trick 3 years ago when I switched from table based design to tableless CSS.

jQuery Trick #3: Easiest Tooltip and Image Preview Using jQuery

According to the web page introducing this trick:What this script does is adds an element to the body when you roll over a certain object. That element's appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

You can get this at http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

This trick does not need code. Simply download the plugin.


Screenshot of Easy Image Preview

I will be adding more web design and jQuery tricks as I develop or find them.

If you would like to stay up to date on my jQuery tricks as I find them as well as other web design tricks, please let me know.

More by this Author


Comments 4 comments

psychicdog.net profile image

psychicdog.net 5 years ago

thanks Hotwebideas - I'm always looking for better ways to do things on sites I build like http://gotweed.com.au where I have used jquery.


hotwebideas profile image

hotwebideas 5 years ago from New York Author

No problem, psychicdog. I have more jQuery tricks to write about in the near future, so stay tuned. I am now following you.


blender profile image

blender 5 years ago from Vancouver, BC

voted up and followed, thanks for the tips. You probably already know this one, and it is not directly related, but there is a css trick to stretch div's around floated content if you ever have that problem. Give the outer div a class including 'clearfix' and add this to your stylesheet:

.clearfix:after{

clear:both; content:"."; display:block;

height:0; visibility:hidden; font-size:0;

}

I can't take credit for this one, but use it on every site I make...


hotwebideas profile image

hotwebideas 5 years ago from New York Author

Hey Blender, thanks for the feedback and jQuery tips. I am going to follow you back and read your jQuery hub that I just noticed.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working