https://github.com/andrienko/splitter

Pure-JS splitter for modern browsers.
https://github.com/andrienko/splitter

Last synced: 7 days ago
JSON representation

Pure-JS splitter for modern browsers.

• Host: GitHub
• URL: https://github.com/andrienko/splitter
• Owner: andrienko
• Created: 2014-04-01T15:54:44.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-04-25T12:15:20.000Z (over 10 years ago)
• Last Synced: 2023-08-19T23:21:46.997Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://andrienko.github.io/splitter/
• Size: 305 KB
• Stars: 43
• Watchers: 5
• Forks: 12
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Splitter

===

[Demo](http://andrienko.github.io/splitter/)

Splitter is a small (~3KB minifyed) JS script with **no dependencies** to create containers splitted horizontally or vertically

with moveable splitter bar. It is **not a library**! Just in case.

It should work in modern browsers and even in **IE8+** *(According to [this site](http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0), when the code of

this script was written in April of 2014 the market share of IE8 was 20% amongst ALL browsers, which means that 1/5 of

mankind still used it, so I sacrificed some performance for sake of its support)*

Usage

---

Add css and js files to your project:

    

    

Then add horizontally_divided or vertically_divided class to the element you want splitted

    


        
Left

        
Right

    


The element you are adding the class to must have two first-level div elements in it, which will become left

and right parts of split container

Changing appearance

---

The splitter appearance is defined in splitter.css file (which source is style.less). You can add whatever style

you wish to anything.

.divider_vertical and .divider_horizontal are classes of the div that splits areas vertically and horizontally respectively.

It also gets .dragged class when the splitter is being dragged.

Minified version

---

..is built with closure compiler.

Plans for future

---

 - Possibility to create containers without moveable splitter and toggle moveable

 - Add min and max sizes for panes

 - Possibility to set initial values in px and/or percent