Draggable Divider Bar (DDBar) Javascript Package
Unlimited horizontal and vertical resizable partitions
Unlimited horizontal and vertical resizable partitions
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.
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.
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.
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 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.
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.
Code lines have been shown for each of the eight frequently used web page layouts. Divider bars are in different styles.
You can drag the divider bars and the scroll bars of the partition elements to show exactly what you want to compare.
You can drag the divider bars and the scroll bars of the partition elements to show exactly what you want to see.
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.
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.