Accessibility Links

Search Blink-Design

Improving Interlopers - Part 2

I wanted to make searching the content on Interlopers a lot easier but that didn’t mean I couldn’t spice it up as well.

Previously the search box on the homepage was based purely on tutorial keyword searching, which was fine but the advanced options on the search results page were broken for some reason. Also the ‘Advanced Search’ link at the top of the page took users to the forum search page which I felt jerked the experience slightly.

Tutorial Search

To improve the tutorial searching I cut the results page down to just the returned tutorials and also a search box so users don’t need to keep moving their mouse up to the top of the page. Try searching ‘lights’ on the Interlopers home page now to see an example of this.

It’s a much smoother experience now for the user and it cuts down on previous page clutter that didn’t even work properly anyway.

Advanced Search

The old advanced search sent the users straight to this page on the forum. Now although this is not terrible (after all, that’s where the content is) I felt it would be much smoother if the users were sent to that page with their search options already selected.

My first task was to replicate the HTML from the forum version. This was easy enough and with some styling I had a nice, easy to use search form. I felt however, that I could spice up the process by loading the form into the top of the page when the user clicked the Advanced search link. Not only would this make for a more smoother user experience it also has a certain wow factor that is never a bad thing.

Lets go AJAX

My decision was to retrieve the form from the static page version and load the HTML into the top of the site with AJAX and then slide it down to reveal the options to the user. This had three main benefits:

       
  1. The extra HTML from the search form (there is a lot I might add) is only requested when a user needs it, rather then loading it for every user and simply hiding it
    2.    
  2. It looks slicker and is more intuitive for the user to have their extra search options load right in front of them.
    3.    
  3. I only need to write the HTML once and then can use CSS to create two different layouts

Staying on the side of Progressive Enhancement I ensured the link takes the user to the static form so that users without JS enabled aren’t left in the dark. I also changed the text to read Open Advanced Search with JS so as not to confuse non-JS users and behind the scenes I inserted a div element to contain my new form once it arrives via the joy of AJAX.

Apart from the cross browser issues being solved, jQuery also allows you to specify a particular page element to bring back through the AJAX request. With this in mind I was able to just grab the form element from the static Advanced Search page and insert it into the div element I had created earlier. Then with a bit of jQuery animation magic the form slides down into view.

As an icing on the cake I also set the form element to be removed if the user closes the Advanced Search without deciding to search.

Can I have code with that..?

I’m not going to walk through the code but if you’re a jQuery user you shouldn’t have any trouble with this code. It’s pretty simple really:


// Set text
$('#info-bar form p a').text('Open Advanced Search');

// Create wrapper for AJAX Search
$('#info-bar').before('\n\n<div id="ajax-search-container"></div>');

// Create loading spinner
$('#info-bar form p').before('\n\n<p id="loading"><img src="images/site/ajax-loader.gif" alt="" /></p>');

// AJAX the search into the page on click
$('#info-bar form p a').toggle(function(){
	var href = $(this).attr('href');
	$('#ajax-search-container').load(href + ' #content .advanced-search form');
}, function(){
	$('#ajax-search-container').slideUp('slow', function() { $('#ajax-search-container').empty(); });
	$('#info-bar form p a').text('Open Advanced Search');
});

// Show spinner during ajax load
$('#loading').ajaxStart(function(){
	$(this).show();
}).ajaxStop(function() {
	$(this).hide();
	$('#ajax-search-container').slideDown('slow');
	$('#info-bar form p a').text('Close Advanced Search');
});

There you have it.

One set of HTML and two very different looking forms. HTML & CSS are very powerful when used properly!

Posted on Tuesday, June 30th 2009 and there are 19 comments

Categories: CSS, HTML, jQuery, Tricks n Tips

19 Comments

Contribute

Fields marked with * are required. Your email will not be shown.

  • Please enter the word you see in the image below:

Site Navigation