Draggable Divider Bar Javascript Package



Last Updated:

Jan 01 , 1970

Price : Rp0.00
Add To Cart

Special Specifications


Unlimited Number of Draggable Divider Bars on a Single Page

Please simply try it now in a demo page

There are more sample web pages follow.

DDBar package creates a horizontal or vertical divider bar into a HTML element to divide it into two partitions. User can use mouse to drag the divider bar to resize the partitions. More divider bars, in the same way or other way around, can then be nested into the partition elements. There is no restriction on the orientation of these divider bars with an endless combination of partitions, allowing you to easily customize your web site into a stunningly laid out masterpiece to stand out from the crowd.

Intricate Algorithms Ensure No Interference

Thanks to its intricate algorithm, DDBar can support an infinite array of divider bars on single web page. When a divider bar is dragged, it cannot eliminate or cross other divider bars meaning that all created partitions will be visible with their minimal size guaranteed and will stay inside their own border not intruding into others. Even more amazingly, though the moving divider bar is resizing its partition elements, divider bars inside the partition elements will react accordingly to keep their location steady on the screen.

Best Use of Today's Huge Computer Screen

Armed with DDBar, you will have the ultimate power and competitive edge to fully utilize today's huge computer screens and implement innovative and versatile web page layouts. DDBar gives your users the ability to view more content simultaneously on each page as well as easily locating areas of interest and allow for comparison without jumping between pages, thus substantially improving usability. DDBar is capable of expanding elements to take up large screen spaces and shrinking them to save screen space, giving you full control over how you display content. Due to the elimination of space restrictions, DDBar gives you the power to make the best of your screen space. Applying DDBar is more important to construct HTML5 single page web applications, allowing the web page to achieve as much usability as desktop applications.

Self-Contained Pure Javascript Package Easily Integrated with Other Packages

DDBar is not a jQuery plug-in and has no dependency on other third-party packages. Element IDs are required by the DDBar package for both existing element or element to be created. Only a limited number of properties will be changed for existing elements and created elements can be further handled outside DDBar package since you know all their id value. This will make integration with other packages or framework like jQuery straightforward, keeping any conflicts minimal.

One Line of Code to Divide HTML Element

DDBar can be implemented almost instantly on your web page, simply add two lines to include DDBar CSS and JavaScript files, and then a function call will create a divider bar that is ready to go. Even if JavaScript is not within your comfort zone, codes can be copied from the included sample web pages. A special sample web page presents code snippet for eight frequently-used page layouts having up to three divider bars.

DDBar package has two functions: divideV and divideH, responsible for the creation of vertical and horizontal draggable divider bars, respectively. They both have the last argument to receive a setting object containing a collection of options for the divider bar and partition elements. In your javascript codes, you create divider bars by calling these functions. The next line will vertically divide element with id='area' into two partition elements with id='left' and id='right'.