Under the hood – Javascript. ☆

| April 16, 2010

WordPress is not the only great tool we use to develop Pressible. We also rely upon the jQuery Javascript framework as well as some other JS tools. Javascript allows us to control our design and user interaction more fluidly, and jQuery allows us to do it quickly. WordPress now ships with jQuery installed, not to mention a few other fine JS frameworks, so it’s even easier to get our designs realized.

The design area where jQuery plays the biggest role in the Pressible experience is in the sub-header. The sub-header deafults to displaying 3 topics each showing one post.

When a user’s mouse enters each Topic area the post list expands to reveal 4 more additional posts.

The entire function is less than 50 lines of jQuery and CSS, and makes use of simple jQuery functions like slideDown() and slideUp().

jQuery also gives us the flexibility to quickly add features using jQuery plugins. On the Pressible root site you can scroll over the text Why? in the signup box and reveal a floating block of text. This is accomplished using a jQuery plugin called Simpletip. A great solution for a feature we wanted that we did not want to spend much time custom coding.

In the next Under The Hood post I will spotlight a unique Javascript tool for editing browser specific CSS.