In order to continue progressing my jQuery knowledge, I needed to have a solid understanding of JavaScript fundamentals.  This helps me comprehend what the concise jQuery code is doing behind the scenes.  Also, if I would ever need direct access to DOM elements rather than a jQuery wrapped set, I’d have the skills to do so.

There was a great JavaScript primer in the appendix of the book I’m currently reading, jQuery in Action, and I just wrapped up a lengthy video tutorial course on Lynda.com : JavaScript Essential Training.  I would recommend both if you’re new to JavaScript, as I was.

The difficulty lied in the accordion panel.  My intent was to utilize the accordion widget from jQuery UI.  I built a custom theme using jQuery UI’s ThemeRoller, then after downloading it I further tweaked the CSS to get exactly the look I was going for.  The supplied CSS code was a lengthy file which included a lot of style rules I wouldn’t be needing.  Bascically, I was starting with something complex and trying to trim it down to something more simple.  I had it nearly perfected except the animation between panels was not smooth in most browsers [only worked fine in Firefox].  The shaky / jittery effect I was seeing when it transitioned between panels was unacceptable.

After some research online, I saw that I was certainly not the only person to experience this behavior.  My research led me to a plug-in widget called Kwicks that offered the accordion behavior I was after with smooth animation and less code to modify for my needs.  It even supported custom easing animations in conjunction with the jQuery Easing Plug-in.  This new approach, starting with something simple and adding complexity as needed, worked like a charm.

I had fun creating the graphics for this.  The photograph was supplied by Frank, along with what the text should read.  I utilized one of my favorite Photoshop tools, the Vanishing Point command, to orient the title text along the highway overpass.  For the title text I used one of my newest favorite fonts, Yanone Kaffeesatz.  I also put some of my jQuery knowledge to work on the site’s behavior, writing a simple .toggle function for the contact button.  Look for 90four.com to expand in the near future!

Not necessarily related to each other, but I’ve been teaching myself how to utilize Adobe Fireworks [website wire-framing / functional mock-ups, creating web graphics and vector objects for use in Flash] and the jQuery JavaScript library.  I’ve recently completed two new Lynda.com courses: Fireworks CS4 Getting Started and jQuery Essential Training with plans to delve further into these topics with more tutorial videos and reference manuals.  You can see some of the first jQuery scripts I wrote in action on this site when you hover over thumbnail images and see a subtle fade-in effect.  I’m excited about the ability of adding interactivity and dynamic content to sites with jQuery without the use of third party plug-ins.