#demoOneA

Welcome to the demo page for hiltonjanfield/jquery.enhsplitter.

This splitter is set with {minSize: 50, vertical: false}. This is the lower pane of the outer splitter; the two panels and splitter above are contained within the upper panel of this splitter.

Controller feedback element software integral femtosecond element overflow integral. Or patch element supporting mainframe software resistor floating-point development broadband, technician development converter generator. Encapsulated logistically kilohertz fragmentation feedback coordinated, anomoly port log read-only plasma deviation deviation scalar. Pulse, capacitance software feedback feedback network, device overflow.

#demoTwoA

This splitter was created with purely default options, resulting in a vertical splitter, 100px minimum panel size, and a standard collapse handle.

#demoTwoB

There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.

#demoThreeA

Sidebar Example with fixed splitter.

#demoThreeB

This splitter was created using with the options {handle: 'bar', position: 150, leftMinSize: 0, fixed: true}. position defines a starting size, leftMinSize defines how small the panel gets when collapsed, and handle sets up a different effect for the collapse handle. The {fixed: true} option disables the ability to drag the splitter around, while leaving the collapse options intact - the combined result being an unmovable bar with a button that collapses it back and forth.

Pulse recognition metafile ethernet element prompt dithering bus system resistor deviation scalar coordinated transmission adaptive. Prompt reducer record deviation led silicon transmission. Floating-point port development plasma, led phase pulse. High, inversion, recursive, element system broadband, gigabyte extended sampling frequency deviation data software.

<div id="demoOne">
    <div id="demoOneA">
        [...]
    </div>
    <div id="demoOneB">
        <div id="demoTwoA">
            [...]
        </div>
        <div id="demoTwoB">
            [...]
        </div>
    </div>
</div>

<div id="demoThree">
    <div id="demoThreeA">
        [...]
    </div>
    <div id="demoThreeB">
        [...]
    </div>
</div>


<script>
    jQuery(function ($) {
        $('#demoOne').enhsplitter({minSize: 50, vertical: false});
        $('#demoOneB').enhsplitter();
        $('#demoThree').enhsplitter({handle: 'bar', position: 150, leftMinSize: 0, fixed: true});
    });
</script>

Features test page

Usage

Basic Usage

Three HTML elements are required at a minimum. These can theoretically be any elements, but are intended to be DIVs or other basic block-level elements. There must be one parent element and two child elements. Additional child elements can exist, but is not supported and will result in unintended side effects.

<div id="panels">
    <div>
        [...]
    </div>
    <div>
        [...]
    </div>
</div>

Once that is in place, all you need to do is call .enhsplitter() on an element. This will insert a splitter between the two child elements of #panels using default settings (vertical splitter and defaults as shown below).

<script>
    jQuery(function ($) {
        $('#panels').enhsplitter();
    });
</script>
Advanced Usage

jquery.enhsplitter has a number of options, available below. Usage is just like most jQuery plugins - just pass the options as an object parameter.

<script>
    jQuery(function ($) {
        $('#panels').enhsplitter({handle: 'striped', position: '150px', minSize: 0});
</script>

Options

vertical
[true|false] Default: true

Determines whether the splitter is vertical or horizontal.

minSize, leftMinSize, rightMinSize, topMinSize, bottomMinSize
[number] Default: 100

Defines the minimum sizes for each panel, in pixels.

  • minSize is an alias to set both leftMinSize and rightMinSize.
  • topMinSize and bottomMinSize are internally an alias for leftMinSize and rightMinSize respectively.
maxSize, leftMaxSize, rightMaxSize, topMaxSize, bottomMaxSize
[number] Default: 100

Defines the maximum sizes for each panel, in pixels.

  • maxSize is an alias to set both leftMaxSize and rightMaxSize.
  • topMaxSize and bottomMaxSize are internally an alias for leftMaxSize and rightMaxSize respectively.
position
[number (px)|string (px|%)] Default: '50%'

Sets the starting size for the left or top panel. Position can be defined in pixels by passing an number {position: 125}, or a string with a 'px' suffix {position: '125px'}, or as a percentage as a string with a '%' suffix. {position: '25%'}. Strings without a suffix will be assumed to be in pixels.

invisible
[true|false] Default: false

Turns the splitter invisible. The splitter will still work, there will simply be no visible control. This is similar to the splitter functionality in JetBrains IDEs.

handle
['default'|'stripes'|'bar'|'block'|'dots'|'lotsofdots'|'none'|<user-defined>] Default: 'default'

Defines how the the collapse is drawn.

  • 'default' is currently equivalent to 'stripes' but may change in the future.
  • 'stripes' draws a striped handle, as shown in the first two examples above.
  • 'bar' draws a narrow grey bar, as shown in the third example above.
  • 'block' draws a wide grey block that fills the width of the splitter.
  • 'dots' draws five small equidistant dots with no border.
  • 'lotsofdots' draws a series of small dots.
  • 'none' hides the handle completely, disabling it. This effect is also achieved when setting {invisible: true}; it is not necessary to set both.
  • <user-defined> - Identifier for any CSS class you create. By adding new .splitter-handle- classes (see the CSS file), you can create custom styles without overriding the standard ones.
collapse
['left'|'right'|'up'|'down'|'none'] Default: true

Determines which direction the panel collapses when the handle is clicked. Setting {collapse: 'none'} leaves the handle visible while disabling its functionality, leaving the handle and hover/active effects in place for standard dragging.

fixed
[true|false] Default: false

Fixes the splitter in place by disabling dragging. This option does not affect the collapse handle.

This option is useful for creating fixed width navigation, tool, or other bars. When the options {position: 150, minSize: 0, fixed: true} are used together, it creates a splitter with a narrow panel (in this case 150px) that cannot be resized, but is completely hidden when the collapse handle is clicked (and vice versa).

height
[number (pixels)|css value] Default: none

Specifies the height of the container.

Any CSS value can be used; numbers with no suffix will be treated as pixel values.

In the instance that the both the container and parent heights have not been specified, the CSS on the container will cause the height to become 0. If this happens, height will default to 10em.

splitterSize
[number (pixels)|css value] Default: none (defined by CSS)

Specifies the size of the splitter bar, allowing some limited customization for individual splitters without custom CSS. Ideal when paired with {invisible: true}, also useful for increasing the splitter size on mobile sites (for easier use on touch devices).

Any CSS value can be used; numbers with no suffix will be treated as pixel values.

onDragStart
function (event, splitter_container) { ... } Default: $.noop

Event handler called when a user starts dragging a splitter.

Parameters passed are the standard event handler data, and the .splitter_container object.

onDragEnd
function (event, splitter_container) { ... } Default: $.noop

Event handler called when a user stops dragging a splitter.

Parameters passed are the standard event handler data, and the .splitter_container object.

onDrag
function (event, splitter_container) { ... } Default: $.noop

Event handler called after a user moves a splitter.

Parameters passed are the standard event handler data, and the .splitter_container object.

Commands

These commands can be used on splitters which have already been created. They will have no effect on non-splitter objects. Attempting to use a command on a jQuery object which is not a jquery.enhsplitter object will simply create an splitter with default options.

move
.enhsplitter('move', [number (px)|string (px|%)])

Changes the splitter position to the location specified (with range checks).

refresh
.enhsplitter('refresh')

Forces a refresh of the container size and splitter location (with range checks).

reset
.enhsplitter('reset')

Resets the splitter location to it's starting position.

collapse
.enhsplitter('collapse')

Collapses the splitter as if the collapse handle was clicked.

uncollapse
.enhsplitter('uncollapse')

Returns the splitter to it's pre-collapsed position.

visible
.enhsplitter('visible', [true|false])

Sets whether the splitter is visible or not. This is equivalent to (but opposite from) the invisible option, visually hiding the splitter but leaving it usable.

handle
.enhsplitter('handle', ['default'|'bar'|'block'|'none'|<user-defined>])

Equivalent to the handle option, changes the handle style on the fly.

destroy
.enhsplitter('destroy');

Removes the splitter container, splitter panels, and splitter bar, returning the DOM to its previous layout.