jQuery 1.3 Released – How to use jQuery

jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.  jQuery is designed to change the way that you write JavaScript.”

jQuery version 1.3 was released yesterday.

Some new features in 1.3 are:

• Sizzle – a brand new CSS selector engine
• Live Events – event delegation with a jQuery twist
• jQuery Event Overhaul – simplified event handling
• HTML Injection Rewrite – Lightning-fast HTML appending
• Offset Rewrite – Super-quick position calculation
• No more browser sniffing!!
• New API Browser - http://api.jquery.com/

I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.

Are you new to jQuery?
jQuery is a library that you can include on your web projects.  jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex.  Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites. 

Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:

• Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
• Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge

Getting Started with jQuery
jQuery provides a series of useful tutorials.   

Some favorites are:

• Getting Started with jQuery – by  Jörn Zaefferer - Goes through the basics of jQuery, all the way up to building plugins.
• jQuery Crash Course – by Nathan Smith – Great overview of what jQuery is and how to start using it.
• Submit a Form Without Page Refresh using jQuery – by Eric @ NETTUTS – Everyone starting out with AJAX wants to know how to do those cool form actions without the page refreshing.  Here’s how.
• 5 Tips for Better jQuery Code – by Mark Grabanski – Useful tips to keep in mind when working with jQuery — slightly more advanced, but a good taste of what is to come
• The 20 Most Practical and Creative Uses of jQuery – by Drew Douglass @ NETTUTS – From scratch, how to creatively use jQuery in modern websites.
• jQuery Tip: Animation and CSS Queuing – by Drew Douglass – Queuing up animations is something we all run into and scratch our heads, Drew makes it sound easy.

There are so many more tutorials out there.

Tags: AJAX, Animation, Animations, CSS, download, Drew Douglass, HTML, Javascript, jQuery, Live Events, Mark Grabanski, Nathan Smith, Queuing, Sizzle, Tutorial, Zaefferer

Flash Optimizations of onClip enterFrame events

I’m going to be writing up a tutorial and exploring the benefits of what I am about to propose, this is for conversation and discussion.

When creating MovieClip objects that update their status every frame they enter, traditionally you bind a general loop to their “onClipEvent(enterFrame)” or other methods to bind to the onEnterFrame method.

Inside is normally a loop that executes perpetually with each frame refresh.  When objects build up with this logic, the framerate in Flash movies can dwindle.  This is especially evident on slower functioning computers.

I will be testing out a method to enhance movieclips who don’t need to always be looping.  For example, if you have a navigational structure with 3 elements.  Lets call them Home, News, and Contact.  These navigational elements need to animate themselves when told to do so by the main flash animation.

Normally I would bind a method to “setTargetXY”, “doAnimation”, and let the main handler “onEnterFrame” handle the animation from there.

But what about when the movie isn’t moving the navigation around?

I propose the doAnimation should always have a “this.start()”.  Additionally when the animation is over, the main handler should “this.stop();” to stop the moving from entering frames and continuously checking for an “isActive” or other qualifiers to begin animation calculations.

I’ve informally done this before just out of optimizing code, but I think a more formal approach may be beneficial.

Does anyone know if the flash player automatically does this?  Tests for logical qualifiers in movie loops, and stops them until those qualifiers change? 

It could be a nice optimization to the way Flash player handles static objects who have a loop with a single if statement wrapped around.

Tags: Animation, Flash, Optimization