Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Live extension playground
JavaScript HTML CSS

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dist
extra
legacy
src
test
.gitignore
.jshintrc
.travis.yml
Gruntfile.js
LICENSE.txt
README.md
bower.json
main.sublime-project
package.json

README.md

better-dom Build Status

Live extension playground

jQuery knows a concept called “live events”. Using the idea of event delegation they enabled developers to handle existing and future elements. But more flexibility is required in a lot of cases. For example, delegated events fall short when the DOM needs to be mutated in order to initialize a widget. To handle such cases I'd like to introduce live extensions and better-dom - a new library for working with the DOM.

API DOCUMENTATION

Features

Installation

The simplest way is to use bower:

bower install better-dom

This will clone the latest version of the better-dom with dependencies into the bower_components directory at the root of your project. Then just include scripts below on your web page:

<!DOCTYPE html>
<html>
<head>
    ...
    <!--[if IE]>
        <link href="bower_components/better-dom/dist/better-dom-legacy.htc" rel="htc"/>
        <script src="bower_components/better-dom/dist/better-dom-legacy.js"></script>
    <![endif]-->
</head>
<body>
    ...
    <script src="bower_components/better-dom/dist/better-dom.js"></script>
</body>
</html>

Documentation

Need more?

Performance

How to make a custom build

In order to create a custom build make sure that you installed grunt-cli globally:

npm install -g grunt-cli

Then you can print all available modules for customization via the task below:

grunt build

Pick modules that you want to exclude and pass them to the same task separated by comma:

grunt build:classes,offset,data

Look at the API documentation to find which functions are included into a particular module.

Your custom build will be created inside of the build folder including uglified version and source maps.

Notes about old IEs

For IE8-9 support you have to incude extra files via conditional comment (see Installation section).

The better-dom-legacy.js file includes excellent html5shiv that provides fix for HTML5 tags and es5-shim is used to polyfill missed standards-based functions. These projects are bundled into signle file with other fixes.

The better-dom-legacy.htc file helps to implement live extensions support. This fact applies several important limitations that you must know in case when legacy browser support is required.

Setup content-type header

HTC behaviors have to serve up with a content-type header of “text/x-component”, otherwise IE will simply ignore the file. Many web servers are preconfigured with the correct content-type, but others are not.

AddType text/x-component .htc

Same domain limitation

IE requires that the HTC file must be in the same domain with as the HTML page which uses it. If you try to load the behavior from a different domain, you will get an “Access Denied” error.

Browser support

Desktop

  • Chrome
  • Safari 6.0+
  • Firefox 16+
  • Opera 12.10+
  • IE8+

Mobile

  • iOS Safari 6+
  • Android 2.3+
  • Chrome for Android

Opera Mini is out of the scope because of lack of support for CSS3 Animations.

Something went wrong with that request. Please try again.