<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 "> Bitovi Blog - UX and UI design, JavaScript and Frontend development
Loading

Introducing jQuery++

Introducing jQuery++

Justin Meyer

Justin Meyer

Twitter Reddit

Hello, my name is jQuery++. It's wonderful to meet you. Have you ever found yourself wishing jQuery had just one more feature or wanted it to be a tiny bit faster? I know I have, but I understand jQuery can't do everything. This is why the team at Bitovi created me, a collection of extremely useful DOM helpers and special events that complement jQuery.

I am not a UI project like jQueryUI or jQueryTools. I'm all about providing low-level DOM utilities that jQuery doesn't support, for things like cookies, ranges and forms. If Underscore is jQuery's functional-programming tie, I am jQuery's bald-spot covering toupee.

Lets take at a few of my favorite things I can do for you:

Get just what you need

I have a groovy download builder that lets you select the functionality you need and it builds a custom JS file with exactly that. If you're using Steal or AMD, you can simply load the files you need and dependencies will be loaded for you:

steal('jquery/event/drag', function(){
  $('#tasks').on('.handle','draginit', function(ev, drag){

  })
})

Delegatable events

Using JavaScriptMVC, CanJS, Backbone, Spine or any of the other frameworks that use declarative event bindings like ".item click"? Use my special events with these libraries like:

var Tasks = can.Control({
  ".handle draginit" : function(handle, ev, drag){

  }
})

This works with drag, drop, hover, and swipe events.

Speed up your app

Speed matters. Add fastfix to improve your app's over-all performance by about 3-5%. Use styles to read multiple computed styles from a single element much faster than jQuery's css. Use animate to use hardware accellerated CSS animations in supporting browsers.

Use text ranges

Range normalizes text ranges cross browser. I can't wait to show you how easy it is to create a text editor with me.

Desktop-like layouts

The resize event makes it very easy to create desktop-like layouts where internal components respond to the dimensions of their parent component. It does this by reversing the order of the resize event. Instead of the event traveling from children to parent, it travels from parent to children.

Conclusion

I've got a lot more goodness than what's listed here so check me out! Are there other common DOM utilities you need? Let me know. It's been great chatting. Follow me on twitter @jquerypp.