So we have decided to provide the following post, which shows very easily how to use the power of jQuery to create a rather nice horizontal accordion effect.

Click here if you would prefer to skip straight to the demo

1. The HTML

First we create an unordered HTML list with id=”accordion” and include some content in each of the li tags – since the accordion is horizontal we have decided to use images to create the section labels:

<ul id="accordion">
    <li>
      <a href="#">
        <img src="images/section_1.png" />
        <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/section_2.png" />
        <strong>Section 2 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/section_3.png" />
        <strong>Section 3 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/section_4.png" />
        <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
</ul>

2. Style The Accordion

Next we add a few CSS rules, which will help style the accordion and its content:

#accordion {
list-style: none;
margin: 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}

#accordion li {
float: left;
border-left:
1px solid #fff;}

#accordion li a {
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;}

#accordion li a img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;}

#accordion li a.active {
width: 445px;}

The main items to take note of here are the widths of the anchor tags, which need to be the same as the min-width setting in our jQuery below and the width of the “active” tag, which should equal the max-width of the accordion section.

The “#accordion li a.active” is also required to ensure that the default section is open when the page loads.

The rest is mainly styling of the background, text and positioning of the section header images.

3. The jQuery Code

Finally the jQuery to create the horizontal accordion effect – in this example we have used the “hover” event to trigger the animation:

$(document).ready(function(){

  activeItem = $("#accordion li a:first");
  $(activeItem).addClass('active');

  $("#accordion li a").hover(function(){
      $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
      $(this).animate({width: "445px"}, {duration:300, queue:false});
      activeItem = this;
  });

});

You can change which is the default open section upon page load by changing the “activeItem” variable – in our example we have used “#accordion li a:first” to select the first list item.

Other options that can be changed include the min-width (in this case 50px) and the max-width, which we have set to 445px – the values in these lines must match the values given in the CSS rules above.

The duration setting controls the time in milliseconds for the accordion to animate from minimum to maximum width – again these can be set according to your preference.

The queue:false is required to stop the accordion capturing every hover event and continuing to animate after the mouse has left the hover area.

View the jQuery horizontal accordion demo.

The Image

Use the same naming system for the 2 images as in our previous post – i.e. normal state called xxxxxx_off.jpg and the clicked state xxxxxx_on.jpg and add the class “img-swap” to the image tag in your HTML:

<img src="xxxxxx_off.jpg" class="img-swap" />

jQuery Code

With just a few lines of jQuery you can now add the image swap function on click to any images in your web pages:

$(function(){
  $(".img-swap").live('click', function() {
    if ($(this).attr("class") == "img-swap") {
      this.src = this.src.replace("_off","_on");
    } else {
      this.src = this.src.replace("_on","_off");
    }
    $(this).toggleClass("on");
  });
});

See the demo

The HTML

First we create a nested unordered list, which will include all of our links. Give the first ul tag a unique id – we use #nav:

<ul id="nav">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub-Item 3 a</a></li>
      <li><a href="#">Sub-Item 3 b</a></li>
      <li><a href="#">Sub-Item 3 c</a></li>
      <li><a href="#">Sub-Item 3 d</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>
    <ul>
      <li><a href="#">Sub-Item 4 a</a></li>
      <li><a href="#">Sub-Item 4 b</a></li>
      <li><a href="#">Sub-Item 4 c</a></li>
    </ul>
  </li>
</ul>

Style The Menu With CSS

For this tutorial we add a little styling to the menu and use CSS to hide the sub-menus using “display: none;”:

#nav {float: left; width: 280px;  border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;}
#nav li ul {display: none;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}

The jQuery Code

To create the accordion effect the code is extremely simple:

$(document).ready(function () {
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});

First we use the child selector “>” to ensure that only the parent links activate the accordion menu – otherwise you would end up closing the menu each time a sub-link is clicked.

We add a new class to the active item – this allows us to not only style the open accordion menu but also identify if a sub-menu is open when a link is clicked. The above jQuery code will only work on closed menu items.

View the jQuery vertical accordion menu demo.

Today’s post is going to expand on the earlier tutorial and add up/down buttons, which will allow you to change the order of the option items in the select list.

The HTML Code

The HTML code for the select lists remains the same as the earlier post, except with the addition of the “up” and “down” links:

<form>
  <fieldset>

    <select name="selectfrom" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto" id="select-to" multiple size="5">
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
      <option value="7">Item 7</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-up">Up</a>
    <a href="JavaScript:void(0);" id="btn-down">Down</a>

  </fieldset>
</form>

The jQuery Code

Again, keeping the same code for the add/remove functions, we just need to add the additional jQuery to handle the up/down links:

$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

    $('#btn-up').bind('click', function() {
		$('#select-to option:selected').each( function() {
			var newPos = $('#select-to option').index(this) - 1;
			if (newPos > -1) {
				$('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
				$(this).remove();
			}
		});
	});
	$('#btn-down').bind('click', function() {
		var countOptions = $('#select-to option').size();
		$('#select-to option:selected').each( function() {
			var newPos = $('#select-to option').index(this) + 1;
			if (newPos < countOptions) {
				$('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
				$(this).remove();
			}
		});
	});
});

1. The “Up” Link

First we tackle the “up” link. Basically how we handle this is to retrieve the index value of each selected option, set the variable for the option items new position as … current index – 1, recreate the option HTML and insert it “before” the new index position. Finally – remove the old HTML from the list.

In order to make sure that we dont lose the option item off list list by trying to insert at an index position < 0 we do a quick check on the current position and only run the code if index > 0.

2. The “Down” Link

The down link is very similar except we set the new index postion to “current + 1″ and insert the option HTML “after” this value.

Once again we need to make sure that we dont lose the option item off the bottom of the list so we include an “if” statement, which checks the total number of items in the list and only runs the code if the new index position is less than the total items.

The above code also works for multiple selected items.

Check out the change order of select lists demo.

In the following tutorial I will show you how to use just a few lines of jQuery to create an add/remove select list for your website form.

The Form HTML

<form>
  <fieldset>

    <select name="selectfrom" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto" id="select-to" multiple size="5">
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
      <option value="7">Item 7</option>
    </select>

  </fieldset>
</form>

So here we have just 2 select lists with sample data – the top one listing the items “from”. There are also 2 anchor tags, which provide the “add” and “remove” links.

The jQuery Code

$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

});

Basically what we do here is that when either of the “add” or “remove” links are clicked jQuery will get the values for all of the relevant options that are selected, recreate each option item HTML, insert it into the opposite select list and finally remove these items from the original list.

Check out the jquery add & remove select list demo.

The example below came from a recent project to create an internal web application for a client, which utilised tab navigation, jQuery and AJAX to load data into the page without the need to refresh the web page.

1. The HTML Code

<ul id="nav">
  <li><a href="page_1.html">Page 1</a></li>
  <li><a href="page_2.html">Page 2</a></li>
  <li><a href="page_3.html">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

You can fill the “ajax-content” div with default text, which will be replaced when one of the tabs are clicked.

2. The jQuery Code

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });
});

The above jQuery code will automatically use the URL written into each anchor tag as the source for the AJAX data.

So what is the above code doing?

1. When a tab is clicked we first empty the contents of the ajax-content div and then load a loading graphic, whilst the content is being retrieved.
2. The jQuery then removes the “current” class from the tabs and adds the class to the newly clicked anchor tag allowing you to style the tabs to show which one is now active.
3. Once the data from the URL has been retrieved the loading image is removed and the content loaded into the “ajax-content” div.
4. Finally, the “return false” command is used to prevent the default action of the tabs browsing to the content pages.

3. Loading A Default Page

If you wanted to use one of the external pages as your default content you can simply edit the code as below:

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });

    $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
	$.ajax({ url: 'page_1.html', success: function(html) {
            $("#ajax-content").empty().append(html);
	}
    });
});

Substitute the URL for your required page in the code.

A very simple yet effective way to create a basic jQuery and AJAX application for your website – Check out the demo.

1. Wordpress Theme Page Code

First create a new page for your theme. Then add the following code to the web page in the area where you normally display the main content:

<?php
global $more;
$more = 0;

  $post_per_page = 10; // -1 shows all posts
  $args=array('category_name' => 'Latest News', 'posts_per_page' => $post_per_page);
?>

<?php query_posts($args); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="post" id="post-<?php the_ID(); ?>">
            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
            <?php the_content('read more ...'); ?>
        </div>

    <?php endwhile; ?>
<?php endif; ?>

The above code allows you to select posts from a specific categories and display the excerpts on the page. In this example we select our “Latest News” category – change the ‘category_name’ => ‘Latest News’ to suit your requirements.

You can also control the number of posts displayed by changing the “$post_per_page” parameter.

2. How To Use In Your Page

Very simply – upload your new template file to your themes folder, create a new page in your Wordpress admin and assign the new template file to this page.

There you have it – a custom page on your Wordpress website showing latest posts. To add more pages just repeat the process by creating a new theme page file and change category name parameter.

This can easily be achieved by using similar code shown in our previous posts on Using jQuery to Validate Search Box Input and Email Validation Using jQuery.

1. The Password Input Fields

<form method="post" name="form1" id="form-password" action="">
  <fieldset>
    <label>Password:</label>
    <input type="password" name="password" id="password" value="" size="32" />
    <label>Re-Enter Password:</label>
    <input type="password" name="password-check" id="password-check" value="" size="32" />
    <input type="submit" value="Submit" id="submit">
  </fieldset>
</form>

2. The jQuery Validation Code – Check That Both Passwords Match

jQuery(function(){
        $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;
        var passwordVal = $("#password").val();
        var checkVal = $("#password-check").val();
        if (passwordVal == '') {
            $("#password").after('<span class="error">Please enter a password.</span>');
            hasError = true;
        } else if (checkVal == '') {
            $("#password-check").after('<span class="error">Please re-enter your password.</span>');
            hasError = true;
        } else if (passwordVal != checkVal ) {
            $("#password-check").after('<span class="error">Passwords do not match.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will perform the following checks upon clicking the submit button:

• Check that a password has been entered and return an error message if the input field is empty.
• Check that the “re-enter password” field contains text and return an error message if the input field is empty.
• Finally – compare both password texts to check if they match

If any of the validation checks return an error then the form submission on your website is stopped with the “return false” command.

Check out the demo.

In a recent project a client required validation on a search form input that would only allow numbers, letters and a “-”.

The Search Form

<form method="post" name="form1" id="search" action="">
  <fieldset>
    <label>Search:</label>
    <input type="text" name="search-text" id="search-text" value="" size="32" />
    <input type="submit" value="Submit" id="btn-search">
  </fieldset>
</form>

The jQuery Validation Code

jQuery(function(){
        $("#btn-search").click(function(){
        $(".error").hide();
        var hasError = false;
        var searchReg = /^[a-zA-Z0-9-]+$/;
        var searchVal = $("#search-text").val();
        if(searchVal == '') {
            $("#search-text").after('<span class="error">Please enter a search term.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            $("#search-text").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will first check that text has been entered and return an error message if the search box is empty. Then check, using a simple regular expression, that the entered text only contains alphanumeric characters or a “-”. If either of these validation checks return and error message then the form submission is stopped with the “return false” command.

Check out the demo.

A simple solution can be set up, which allows you to use just a single file containing all of your website’s email addresses and just a few lines of jQuery.

1. Create Your Email List

In a HTML document create a list of your email addresses by placing each one inside a span tag and assigning an ID – see example below:

<span id="email-1">somebody@xxxxxxxxxx.com</span>
<span id="email-2">another@xxxyyyyxxxxx.com</span>

2. Add The jQuery Code

Now in the head of your web page add the following jQuery code:

<script type="text/javascript">
$(document).ready(function() {
	$(".email").each(function() {
		var var_email = $(this).html();
		$(this).load("email_list.html #"+var_email).append(var_email);
	});
});
</script>

In our example we have called the email file – email_list.html – you will need to change the above code to match your file name.

Using the Code in Your Web Page

To use this code all you need to do is wherever you would like an email address to appear is to include a span tag with the class “email” and inside the span tag write the ID of the email address you would like to insert. From our 2 example emails above we would therefore use the following:

<span class="email">email-1</span>
<span class="email">email-2</span>

The following source code:

<p>Suspendisse quis blandit justo <span class="email">email-1</span>. In laoreet pharetra condimentum. Donec at venenatis quam <span class="email">email-2</span>.</p>

Which is how it would appear to spam harvesters, would then appear on your web page to your visitors as:

Suspendisse quis blandit justo somebody@xxxxxxxxxx.com. In laoreet pharetra condimentum. Donec at venenatis quam another@xxxyyyyxxxxx.com.

For our core files we usually have the main directory structure set up:

• CSS folder
• Images Folders
• Javscript folder for jQuery plugins
• index.html file

The index.html file already contains the link to download the latest jQuery library and of course the link to the basic CSS file. The page structure has the div tags for the header, main content and footer and associated CSS rules set up in the style.css file ready to create the main web design layout.

The CSS structure includes:

• CSS reset – to remove all default presentation from HTML tags
• Coding to create a “sticky footer” on your web page
• CSS classes to style the website main navigation & footer navigation
• Basic form presentation
• CSS rules to to create buttons

Although you need to develop your own core files that work best for your style of web design, you can however
download a copy of our core files and are free to use these as a starting point or adapt them.

Using jQuery we can easily add this to the website by creating a regular expression, which checks for email addresses such as yahoo, gmail, hotmail, etc prior to submitting the form to the server. The regular expression can be adapted to reject any domain specified.

First add the form to your website using standard HTML code:

<form method="post" name="form1" action="">
  <fieldset>
   <label>Email Address:</labe>
   <input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
   <input type="submit" value="Submit" id="btn-submit" />
  </fieldset>
</form>

Step 1 – Initiate the jQuery Validation

After adding jQuery to your website we set up the code that will perform the validation when the submit button is clicked – first clearing any existing error messages from previous attempts:

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;

    });
});

Step 2 – Check that the Input Field is Not Empty

For the first step of the validation we want to add the jQuery code that will check if there is any text in the input field and if not return the appropriate error message and stop the form being submitted:

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;

        var emailaddressVal = $("#UserEmail").val();
        if(emailaddressVal == '') {
            $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        if(hasError == true) { return false; }

    });
});

Step 3 – Check that the Entered Text is a Valid Email Address

Our first regular expression will check to make sure that the entered text is a valid email address – i.e. contains at least one “.”, an “@” symbol and an appropriate top-level domain suffix (e.g. .com, .net, etc):

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var emailaddressVal = $("#UserEmail").val();
        if(emailaddressVal == '') {
            $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        else if(!emailReg.test(emailaddressVal)) {
            $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
            hasError = true;
        }

        if(hasError == true) { return false; }

    });
});

Step 4 – Block or Prevent Free Email Addresses – e.g. yahoo.com, gmail.com and hotmail.com

The 2nd regular expression will now check the entered text against our pre-defined domain names – in this case yahoo.com, gmail.com and hotmail.com. Once again an error message is displayed and the form submission stopped if the email address matches one of the domains:

$(document).ready(function() { 

  $('#btn-submit').click(function() {  

    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var emailblockReg =
     /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)([\w-]+\.)+[\w-]{2,4})?$/;

    var emailaddressVal = $("#UserEmail").val();
    if(emailaddressVal == '') {
      $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }

    else if(!emailReg.test(emailaddressVal)) {
      $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

    else if(!emailblockReg.test(emailaddressVal)) {
      $("#UserEmail").after('<span class="error">No yahoo, gmail or hotmail emails.</span>');
      hasError = true
    } 

    if(hasError == true) { return false; }

    });
});

The above example can easily be configured to reject (or even accept) any specified email address. To see it in action – Check out our online demo of Email Validation Using jQuery.

Usually ordered lists are very simple to in XHTML create using the following code:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ol>

Which will produce the following ordered list:

1. List item 1
2. List item 2
3. List item 3
4. List item 4
5. List item 5

Unfortunately HTML won’t automatically handle reverse numbering. Adding the numbers manually into a standard unordered list looked messy and I wanted a solution that would automatically renumber the list in case anyone else came along and added more items … jQuery to the rescue.

Using some of the usual jQuery magic we can add the following code to the head of the document:

$(document).ready(function() {   

   var countli = $('ol > li').size();
   $("ol > li").each(function(i) {
         var attrvalue = countli - i;
         $(this).attr("value",attrvalue);
   });
});

This will automatically reverse order all of the items in the ordered lists on the web page by adding the “value” attribute to each list item.

See demo for creating a reverse order ordered list using jQuery.

With the jQuery javascript library already added to your website add the following javascript code between the head tags in your web page:

jQuery(function(){
     $(".img-swap").hover(
          function(){this.src = this.src.replace("_off","_on");},
          function(){this.src = this.src.replace("_on","_off");
     });
});

Then simply create your 2 images – normal state called xxxxxx_off.jpg and the hover state xxxxxx_on.jpg, add the css class “img-swap” to the image tag in your html and jQuery will do the rest … see demo below:

Today we have 2 more techniques, which utilise the jQuery javascript library. If you are not sure how to include the library code into your web page then refer to our post – Adding jQuery To Your Website. The following examples assume that your web page already includes the jQuery library.

3. Using The jQuery NoSpam Plugin

This is an excellent plugin written by Mike Branski, which renders the email address on the visitors browser using source code, which is scrambled (or obfuscated). To a spambot the source code only contains unreadable text.

An example of this method can be seen on our own contacts page – see email underneath our contact details. In the actual source code this email address appears as follows:

moc/lacimehcngised//ofni

To use this method first download the plugin from the jQuery nospam plugin site.

Now include the file inbetween your head tags, below the jQuery library link. Example – if you download the jquery.nospam.js file to your “js/” folder, then your code should look like this:

<script type="text/javascript" src="js/jquery.nospam.js"></script>

Next you need to initiate the code when the page loads so that the browser rewrites the email address in a readable format. To do this add the following code underneath the jquery.nospam.js link:

<script type="text/javascript">
$(document).ready(function() {
    $('.email').nospam({
        replaceText: true,
        filterLevel: 'normal'
    });
});
</script>

The above code basically tells the browser to search through the html code when the page has loaded and rewrite any text that is held within tags with the CSS class – “email”.

To create your scrambled email address:

1. write the address backwards
2. Replacing the “@” symbol with “//”
3. Replace all “.” with “/”

Example:

For email address – email@mydomain.com – you would use the following code:

<span class="email">moc/niamodym//liame</span>

To see a sample in action view the source code on our contacts page.

4. Using jQuery and AJAX

All of the previous 3 methods are unable to handle the addition of a “mailto:” link, which will allow your visitor to open up a blank email containing your email address. A feature, which many people find very useful.

One way of maintaining the link is to use AJAX and jQuery. Using this method we can get the browser to call in the email address code from an external file, after the page has loaded. In most cases spambots would therefore not see the email address in the source code.

View a demo of hiding your email address and mailto link using jQuery and AJAX

If you view the source code of the above page in your browser you will see that the email address does not appear and only shows on the browser screen.

Download the source code for this example

To use this method add the following code after the jQuery javascript library, between the head tags:

<script type="text/javascript">
$(document).ready(function(){

	var content = $(".email");
	content.load("email_address.htm");

});
</script>

Finally in the body of the html page add the following code where you would like your email link to appear:

<span class="email"></span>

A very simple, yet effective solution for hiding your email address link from annoying spammers!

There are many methods that you can use to try and hide your details from the spammers. Some require just simple changes to your text, whilst others, although a little more advanced, can be equally simple to implement.

The following are a few ideas that you can use to disguise your email address online. These are by no means the only ways but we have found them useful in the past in web design projects. The best method for you does of course depend on your own website requirements …

1. Rewriting Your Email Address

The most simple is probably just to rewrite your email address so that humans can understand it and spam harvesters tend to skip over it. Example:

email@mydomain.com could be rewritten as … email [AT] mydomain dot com.

Unfortunately this method obviously relies on the visitor to your website understanding what you mean and this is not necessarily going to fool all spam harvesters these days.

2. Replace Your Email Address with an Image

If you prefer to have your web page show your actual email address then one simple method is to replace the email text in your source code with an image as shown below:

Hiding text in an image is a good way to stop spam harvesters picking out your email address … not impossible of course but far more tricky!

Whilst the above two methods work and offer lower risk ways of displaying your email address, one big problem is that you cannot use these to add the “mailto:” link. The mailto: link allows your visitor to automatically open their email software with a new blank email already populated with your email address as demonstrated if you click on the link below:

someemail@somedomainexample.com

Next week I will cover two more ways of beating the spammers, including one, which allows you to add a “mailto:” link with virtually no risk.

Hiding Your Email Addresses From Spam Harvesters – Part II

Although most modern browsers will still display code with errors, validation ensures that your web pages meet current HTML and CSS standards. From a web designers point of view validation is a quick and easy way to check for errors that may be causing issues with the way your website renders on the screen.

There are however several areas where website validation is important for your site:

Website accessibility

An increasingly important aspect of web design is to develop and create websites where all of the information can be accessed by all visitors … afterall why build a website for your business if a significant portion of internet users cannot access the content?

The validation process helps identify potential areas where issues with accessibility may occur and removes possible “barriers” to visitors who may be vision impaired, motor impaired or cognitive impaired.

For many countries this is now becoming a legal requirement and it is important for both clients and web designers to ensure that your websites do not discriminate.

Search Engine Optimization

Search engine spiders use the structure of your web page to identify different components of your content to help with indexing. Whilst errors in code may not stop spiders in their tracks, code that is not correctly formed, e.g. tags that are not closed or even tags that do not technically exist, may result in the search engines missing out on important keywords or phrases that identify your content.

At the end of the day your goal is to drive traffic to your website through organic search results. It would be unfortunate if all of your hard work developing valuable content is negated by simple errors in the HTML code.

Check out our Search engine optimization and the importance of good code blog post for more information.

Faster Web Page Loading Times

Validated code will help ensure that your browser renders the page as quickly as possible on the screen. In a world where the patience of internet users is constantly decreasing every second helps in guaranteeing that your visitors stay on your website.

Browser Compatibility

Website coding standards take into account future expected developments so although most modern browsers can handle errors in code, validation will help guarantee that as browsers develop your website will be “forwards compatible” and continue to function and render on the screen as originally intended.

Website validation helps reduce the possibility of having to hire a web designer for potentially costly rewrites of your web page in the not too distant future.

Updating Website Code

For web designers, updating other peoples code can be a frustrating a time consuming experience, spending several hours just to correct unecessary errors that should have not occurred in the first place. Creating semantically meaningful, valid HTML and CSS from day one will help your clients update their website in the future and ultimately minimize costs.

Be Professional With Your Web Design

From a web designers point of view, lets not forget one important aspect … creating valid, standards compliant XHTML and CSS is a sign of being professional. Whilst a website may look shiny on the surface, what’s below is equally important.

It is true however that validation does not guarantee that your pages will work in all browsers, neither does it mean that the XHTML and CSS used in the web page layout is appropriate but it is certainly a start to ensuring that your code is optimized and standards compliant. As a client you should expect your code to always validate.

I am always shocked by how few locally designed websites in Bangkok validate. Validation is a relatively simple process which allows you to easily check the code of your website to make sure that it meets the latest standards.

I have found that the best service to use for validation is http://validator.w3.org.

It is an excellent way for clients to check potential web design companies to see whether their knowledge of websites and coding goes further than just the surface – simply check the web design company’s own website!

The jQuery website contains hundreds of plugins, which allow you to quickly add elements to your website such as web photo galleries, navigation, animation, slideshows, mp3 players, AJAX and many more. These plugins are usually well supported and come with downloadable demo files, which makes it easier to integrate the code into your own website.

Later on in our blog we will show examples of where Design Chemical use this excellent resource in our web design projects. However, before you can start using jQuery features you must first know how to add the library to your web page.

There are two ways to include the jQuery library file:

1. Upload The jQuery Library File to Your Server

With this method you hold the main jQuery library file on your web server. You can download the latest version from the jQuery website.

Inbetween the head tags include the link to the jQuery file – make sure that the path is correct based on your file structure. Example – if you download the file “jquery-1.3.2.min.js” to subdirectory “js/” then use the following code:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

Then upload the jQuery library file (e.g. jquery-1.3.2.min.js) to your web server along with your edited web page.

Make sure that the code comes before any other jQuery code in your document head.

2. Download The jQuery Library File Directly From Google

Instead of holding the file locally you can have your web page download directly from the google code repository. Main advantages of this is that if your visitor has already visited a website that uses the same code then your site can utilise the locally cached copy, which improves your page loading time. With jQuery becoming more and more popular, this method provides a definite advantage.

To download directly from google simply include the following code inbetween your head tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Upload your edited web page to your web server and that’s it!

Easy … now with the library included in your web page you are free to utilise the code to add great features to your web design. To see a sample of what jQuery can do click on one of the project images on our web design portfolio to see a gallery sample in action.