Natural Molecular Testing Corporation

Posted in: AJAX, Compass, HTML5, SCSS, Websites by koolkat on June 11, 2012

I have just completed development on a new site for Natural Molecular Testing Corporation. The site is based on a custom WordPress theme designed by Cognition Studio. One of the big challenges of working on this site was implementing the tabbed interface for the learning lounge. I used jQuery UI Tabs to create the interface and then AJAX calls to load the blog and other features. Other than the blog tab, the remaining tabs take advantage of custom post types. Doing all of this withing AJAX means that all links and searches must return the results within the tab. Here is a code snippet that accomplishes the link capture:
if (! jQuery(this).parents('.type-page').length ) {
jQuery(ui.panel).html('

Loading...

');
jQuery(ui.panel).load(this.href);
event.preventDefault();
}


The above code all goes into the load event of the tabs when they are initialize:
tabs = jQuery('#tabbedcontent').tabs({
cache: true,
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
jQuery( anchor.hash ).html(
"Couldn't load this tab." );
}
},

load: function(event, ui) {
//code to capture the link goes here

Other interesting features of this site include the video libraries which will hopefully be expanding as time goes on. I also used Compass/SCSS to help generate the vendor prefix CSS3 implementations for gradients, rounded corners, etc.

Basically, the above code checks if the link has a type of page, and if not, just loads the result within the tab, preventing the default click behavior.