• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!



Page history last edited by Richard D. Worth 15 years, 2 months ago


type: interaction

release: 0.0

priority: high || medium || low

status: in planning || in development || complete

documentation: http://docs.jquery.com/UI/Resizable

demo: http://jqueryui.com/demos/resizable



- Description:


This plugin makes any HTML element resizable and is complete. Documentation here:




2 - Visual Design:


(TODO: create a diagram for the visual design of existing implementation)




3 - Functional Specifications/Requirements:


Changes from 1.5, 1.6rc2 in refactor

  • 'knobHandles' option removed



4 - Markup & Style:


     4.1 Initial markup examples


     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )


     4.2 Recommended transformed HTML markup


     (The HTML markup structure and classes that will be used by the scripts in the enhanced version) 


     4.3 Accessibility recommendation


    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 


     4.4 CSS & Theme


    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 



5 - Latest version of plugin:


(Link to the latest version in the jQuery UI trunk here)



6 - Open issues being discussed


Eric suggests the following:






Comments (1)

Clemens Prerovsky said

at 9:32 am on Jan 20, 2011

Resizing to fixed sizes would be great. We're using the plugin to resize images on a webpage. Oftentimes designers want to "force" several image sizes or aspects, like having a small, medium and a big image size. Resizing could be used in such a way to skip between those sizes. Starting with an 400x300px image there could also be a 40x30 icon size and a "big" size like 800x600. If you start dragging, and expand the image, it would jump to size 800x600, whilst contracting it would reduce it to 40x30. This is very similar to the grid that's already been implemented.

You don't have permission to comment on this page.