jQuery: JavaScript for Designers

jQuery: JavaScript for Designers

At work yesterday, I decided it was time to step my game up. I got rid of a menu module called jQuery Menu and rebuilt the Taste for Life menu from scratch as far as the functionality went. The one thing I asked for as a Christmas gift was a book called “JavaScript and JQuery: Interactive Front-End Web Development” by Jon Duckett. When I began my reading, I had a basic understanding of how Javascript and jQuery worked, but this book amazes me every time I open it.

With an extremely odd selector situation provided by Drupal and lacking experience with Drupal’s menu PHP hooks, I decided to work with what I had and the information in this book made it possible. jQuery is very powerful with even just two lines of code. This simplicity in code is one strong reason why I think the name JavaScript for Designers fits. As a designer, we often like to simplify things when possible. If there’s no purpose in something, why have it there. Well, with jQuery, it takes all of those normally long and tedious JavaScript functions and cuts them down to something easy to understand.

The simplicity is one great reason to try it out. Another reason to give it a shot is it’s possibilities. This can add more user interactivity than you could ever accomplish with just HTML and CSS. A few lines of jQuery, HTML, and CSS can make a header pop up as you’re scrolling down a page. There are plenty of JavaScript libraries like jQuery with specific purposes, but as far as user interaction goes, I view jQuery to have the most bang for the buck. It’s a popular enough library that you’d expect any computer that’s been online to have it cached. Oh yeah, did I mention Google uses it?

This library holds most of its power in it’s CSS integration. You can add classes, remove classes, animate elements, hide elements, etc. The list goes on and on. You can select elements solely if they share a parent element which really pays off when you’re working with an odd HTML scenario.

 

Wonder what that looks like when you put it into action?

Any time you’ve ever seen a “back to top” button on a website, that could be achieved with a couple lines of jQuery.

Check out Vital Design’s websitehover over “What We Do” or “The Alley Blog” in their menu. jQuery’s .slideDown and .slideUp and the CSS display:none is all that it takes for that beautiful animation to take place.

Or on Genius Switch Studio’s website, when you hover over one of their portfolio pieces and the image is lifted, it’s because of a couple of lines that tell the image to reposition when hovered over.

 

This library holds it’s power in it’s simplicity. Designers can spend more time thinking about how we can improve things if we spend less time sitting there trying to figure out how to accomplish the previous task. Simplicity is where the future of modern web lies.

featured

Posted on January 16th 2015