jQuery - the Technology Behind the "WOW" Factor

by Todd Bertsch - Evolve Owner/President

If you were to ask "how did they do that?" about today's leading website and their ingenious functionality and effects, the answer would most likely be jQuery. Although it has been around for roughly 5 years, jQuery has picked up a lot of steam lately, and is now quite simply the best way to create everything from simple animations to AJAX interactions.

What it is

jQuery is a technology that "simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development" - jQuery Project. Built on the Javascript language, and available as an open source library, jQuery is run by the jQuery Project, a distributed group of volunteers that announced its release on January 14th 2006. In short it uses CSS selectors to traverse and target elements within an HTML document and perform actions on, or bind data to, those elements.

Why it's used


jQuery's vast capabilities aside, here are some of the many reasons why today's top developers are turning to jQuery for their web enhancements:

Simple and Intuitive
If you know CSS and basic Javascript, then you already know the foundation of jQuery. All you have to do is pick up on a few syntactical variants, and you are on your way to understanding this very intuitive technology. One of the best traits of the language is its ease-of-use. All you have to do is download the jQuery library from the jQuery Project website, include it in your HTML file, and start scripting! Compared to Javascript, which can get pretty lengthy when it becomes more complex, jQuery remains relatively short and light.

Flash alternative
With a little imagination and some creative coding, developers can forego time consuming flash development and heavy flash files to accomplish animations. Compared to Flash, jQuery is:

  • Faster loading
  • Visible to search engines
  • Easier to work around
  • Viewable on mobile and Apple devices
  • Requires no software plugins on the user's part
  • Simple to update.

jQuery Button Hover Effect

Sure, Flash still has its place for complex animations, but for websites that want to support function, easy updates, and still maintain that creative flair that "Wow's" their users, jQuery is the preferred solution.

One example of flash replacement is on the new Evolve Website. Here we were able to create a flash-like hover animation for the category buttons of our portfolio gallery using a carefully structured layout and a few simple lines of jQuery code. The button glow and moving animation mimics the richness of flash without actually implementing it.

Browser Compatibility
jQuery is supported by all major browsers and only needs for users to have Javascript enabled, which is the majority of today's internet users.

Lightweight and Mobile
The library is only 31KB in size, loads and functions in the blink of an eye, and is easily integrated.

Well Documented and Supported
The jQuery Project's website provides excellent documentation of the entire library's functionality, and has support forums where jQuery Project team members and fellow developers alike help to sort out issues and discuss improvements.

Open Source Plugins
With all its capabilities, advantages, documentation, and support, jQuery is being used worldwide by designers and developers to accomplish some of the web's most stunning content. And with jQuery being easily extendable, they are sharing their solutions! More and more developers are finding unique and powerful new ways of utilizing jQuery, and building them into free, open-source plugins for the rest of us! At Evolve, we use a group of plugins called jQuery Tools, which has everything from tabs and popups to the scrollable sliders and overlays. All you have to do for these plugins is download and include the code, then write a simple one-liner to control the functionality. The services slider on our homepage for example is setup using the jQuery Tools Scrollable plugin and operates on a single line of jQuery code:

jQuery Plugins


$(".services").scrollable({ circular: true, next: ".s-next", prev: ".s-prev" });

With hundreds of easily integrated plugins covering every aspect of the library and every effect you can think of, it's no wonder why jQuery is becoming so popular.

jQuery Mobile - Evolve Mobile Site

What's new in jQuery

On August 13 2010, jQuery announced its journey into the mobile world with jQuery Mobile, a new venture that will take the best of jQuery and adapt it to fit the mobile environment. It's making mobile development easier and faster, and is sure to revolutionize the game entirely as it matures and grows its followers. Check out our new mobile site (www.evolvecreativegroup.com on your iPhone, Android, or Blackberry) which is built entirely on the jQuery Mobile platform and is a perfect example of the power and ease of this new branch of the jQuery Project.


Interested in working some jQuery flair into your next project? We'd love to help! Give us a call at 330-331-0211

 

Blog Post Author Todd Bertsch

Add comment




biuquote
  • Comment
  • Preview
Loading








About Evolve Creative Group

Located in Akron OH, Evolve Creative Group offers a full suite of professional web design and online marketing services including:

 

At Evolve, we take pride in delivering innovative and effective web design & online marketing solutions that ensure an evolutionary change in your business. We also believe that continuing education is an important key element to any business. For this reason, we've created Evolve University. We hope you enjoy our blog!

Award Winning Blog

2013 Communicator Award Winner Learn More >