AnglarJS Split Pane directive

I have created a AngularJS Split Pane directive. It’s built on top of the popular jQuery Split Pane plugin.

Try resizing the browser and dragging the dividers.

It’s a bit simpler to set up than the jQuery plugin, so I hope you all enjoy it!

Simply install with bower:

bower install angular-split-pane

The easiest way to get started is to study the examples folder at github.

Here are some examples:

Here is a complete example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Basic Example</title>
        <link rel="stylesheet" href="bower_components/split-pane/split-pane.css" />
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/split-pane/split-pane.js"></script>
        <script src="bower_components/angular-split-pane/angular-split-pane.js"></script>
        <style type="text/css">
            html, body {
                /* The split-pane needs a container with width and height. */
                height: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
            }
            /* The styling below is very simple. You can style things your own way. */
            body {
                box-sizing: border-box;
                background: #aaa;
                padding: 5px;
            }
            .split-pane-divider {
                background: #aaa;
            }
            .split-pane-component {
                background: #fff;
            }
        </style>
    </head>
    <body ng-app="example">
        <split-pane>
            <split-pane-component width="20em">
                This is the left component
            </split-pane-component>
            <split-pane-divider width="5px"></split-pane-divider>
            <split-pane-component>
                This is the right component
            </split-pane-component>
        </split-pane>
    </body>
    <script>
        angular.module('example', ['shagstrom.angular-split-pane']);
    </script>
</html>

Split Pane jQuery plugin

I have created a jQuery plugin for adding split panes to you web site or web application.

Split panes can be nested. Component min-widths and min-heights are supported. I have not implemented support for max-width and max-height, yet.

Component size can be set programmatically.

I’ve tested the code in the latest versions of Chrome, Firefox and Safari on OS X, and in IE8 on XP.

The source code can be found at github.

Please give me you feed back!

Check out the following pages for examples on how to use it:

N.B., not all markup in the examples are needed for setting up the split panes. <div class="pretty-split-pane-frame"> and <div class="pretty-split-pane-component-inner"> are used for styling purposes only. Feel free to use them, but you might want to style things your own way.

Fastest JavaScript framework

I had to implement what I call a “row selector” for a web application.

It looks something like this (try it out by clicking the checkboxes in the first column):

Now, the tricky part is that this should work for large documents, say 500 rows.

I have implemented this with jQuery, Prototype, MooTools and pure JavaScript, and these are the results I get when toggling all 500 rows in IE8 on a Windows box with 512MB RAM:

  • jQuery 1.6.1: 2000ms
  • Prototype 1.7.0: 2450ms
  • MooTools 1.3.2: 6300ms (first toggle) / 1100ms
  • JavaScript: 250ms

These are some numbers for Firefox 5, running on the same machine:

  • jQuery 1.6.1: 150ms
  • Prototype 1.7.0: 120ms
  • MooTools 1.3.2: 230ms
  • JavaScript: 100ms

We have to support IE, so choosing the pure JavaScript version was a no-brainer.

Here are the results for the jQuery version on an iMac with 2GB RAM:

  • Google Chrome 12: 380ms
  • Safari 5: 150ms
  • Firefox 5: 140ms

It looks like Chrome is falling behind…

Try it out for yourself: jQuery, Prototype, MooTools and JavaScript.

Event delegation with Prototype and MooTools

With jQuery you’ll have event delegation out of the box, but if you are using Prototype or MooTools you are less fortunate – that’s until now!

I have implemented a generic event delegation JavaScript library. It works for change, submit, focus and blur events – along with all bubbling events.

I’m successfully¬†using the library in a large Web Application with over 6,000 lines of JavaScript code (and 60,000 lines of Java code). Some screens are displaying huge amounts of data (over 20,000 INPUTs).

It’s used like this:

<html>
    <head>
        <title>Event Delegation with Prototype</title>
        <script type="text/javascript" src='prototype.js'></script>
        <script type="text/javascript" src='delegate-generic.js'></script>
        <script type="text/javascript" src='delegate-prototype.js'></script>
        <script type="text/javascript">
            document.observe('dom:loaded', function() {
                $('someDIV').delegate('submit', '.dont-submit', function(e) {
                    e.stop();
                    alert('The form was not submitted!');
                });
            });
        </script>
    </head>
    <body>
        <div id="someDIV">
            <form class="dont-submit">
                <input type="submit" value="Submit">
            </form>
            <form class="dont-submit">
                <input type="submit" value="Submit">
            </form>
        </div>
    </body>
</html>

Try it out!