Home / Scripts & Code / JavaScript / Miscellaneous

Draggable Divider Bar Javascript PackageDraggable Divider Bar Javascript Package

Name: Draggable Divider Bar Javascript Package
Brand: rfwl
SKU: 4503
Availability: OutOfStock

Creates unlimited-multiple nested partitions on web page with draggable horizontal or vertical styled bars

Home / Scripts & Code / JavaScript / Miscellaneous

Draggable Divider Bar Javascript Package

Creates unlimited-multiple nested partitions on web page with draggable horizontal or vertical s...

× This item is temporarily not available for sale

Draggable Divider Bar Javascript Package

Live Demo Add bookmark Like

Screenshots

Overview

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'.

DDBar.divideV('area','left','right');

With the next two lines, you can further vertically divide element with id='left' into two partition elements with id='left1' and id='right1' and horizontally divide element with id='right' into two partition elements with id='rightTop' and id='rightBottom'.

DDBar.divideV('left','left1','right1');
DDBar.divideH('right','rightTop','rightBottom');

Include Many Samples and User Guide

Please visit here to read User Guide and run samples in demo version

Eight frequently used web page layouts with up to three divider bars

Each layout works independently in its own container. You can drag divider bars in each of them. Divider bars in all of them are in the same style.
Codes for eight frequently used web page layouts

Code lines have been shown for each of the eight frequently used web page layouts. Divider bars are in different styles.
Five divider bars to six partitions for text comparisons

You can drag the divider bars and the scroll bars of the partition elements to show exactly what you want to compare.
Five divider bars to six partitions for image comparisons

You can drag the divider bars and the scroll bars of the partition elements to show exactly what you want to see.
Six predefined divider bar styles shown in two groups on two sides

There are six pair of predefined divider bar styles. All the styles, both horizontal and vertical, are used with 12 divider bars on this page. They all work without interfering each other proving the strength of internal logics.
Six predefined divider bar styles shown in pairs

All the predefined styles, both horizontal and vertical, are used with 6 pairs of divider bars on this page. They all work without interfering each other proving the strength of internal logics.