Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (47 sloc) 1.92 KB

Class: Resizable {#Resizable}

Creates resizable user interface elements, stores and retrieves positions from cookies, and each instance is aware of neighboring instances so the resizable limits are dynamically set to avoid resizing over each other

Extends:

Drag

Demo

Resizable Method: constructor {#Resizable:constructor}

Syntax:

var myResizable = new Resizable(element, options);

Arguments:

  1. element - (element) The handle to control the resizing
  2. options - (obj) The Drag options plus the following:

Options:

  • mode - (string: defaults to horizontal) Accepts horizontal and vertical.

Example:

leftResize = new Resizable('left_handle',{
    limit: {x: [20,null]},
    cookie: 'leftResize'
});

rightResize = new Resizable('right_handle',{
    invert: true,
    cookie: 'rightResize'
});

centerTopResize = new Resizable('center_top_handle',{
    mode: 'vertical',
    cookie: 'centerTopResize'
});

centerBottomResize = new Resizable('center_bottom_handle',{
    invert: true,
    mode: 'vertical',
    cookie: 'centerBottomResize'
});

ResizableLimits.attach();

Note:

Your elements need to be positioned absolutely within a container (or the body). Handles need to be between the two elements you are resizing. Check out the demo to see the HTML and CSS layout.

Resizable Method: set {#Resizable:set}

Directly resize the elements without dragging.

Syntax:

myResize.set(distance);

Arguments:

  1. distance - (number) The distance to resize the elements in pixels.

Returns:

This Resizable instance.

Jump to Line
Something went wrong with that request. Please try again.