AJAX

Natural Molecular Testing Corporation

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

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.

New Website

Posted in: AJAX, Websites by koolkat on November 10, 2009 | No Comments

The University of Washington Center for Health Workforce Studies has been redesigned using XHTML/CSS along with jQuery/AJAX and PHP. Thanks to Wes Fitch, there is also a new advanced search feature.

The site is a companion to the University of Washington Rural Health Research Center.

Lots of AJAX

Posted in: AJAX, Websites by koolkat on June 1, 2009 | No Comments

I finally finished the site for the Turkish Film Channel. It was my role to convert the psd design into XHTML/CSS. The site owners wanted it to be XML driven so that they could easily maintain it. While some aspects of the site required using Flash in order to encode the film trailers, the remainder of the site is rendered via JQUERY AJAX calls. It was both fun and challenging for me to work on this project.