How we can create a section splitter using jQuery? Solution: See this jQuery Splitter With Bootstrap Grid Layout, Forms Vertical Splitter Program.
Previously I have shared a Split Image program, but this is layout splitter which can be resize by drag and slide. Basically, the splitter is a split-screen layout that uses when full-screen elements are divided into two or more vertical parts. And such type of design is trendy nowadays. This is an awesome experience for users, it has a good viewing experience for your users. Users can resize any element‘s width by drag and slide the section.
Today you will learn to create Forms Vertical Splitter Program. Basically, there are two form groups, each group contains 2 inputs for email and password, 1 input for choose file, 1 checkbox, and one submit button. Between these two form groups, there is a line for visual the partition. By default, these two groups have the same width but you can resize by hold the line and slide right and left.
So, Today I am sharing jQuery Splitter With Bootstrap Grid Layout. There I have used bootstrap for creating the layout easily, and the splitter function is based on jQuery. Once you understand the program, then you can apply the splitter anywhere. You can use this on your website to separate the login and registration form.
If you are thinking now how this split form program actually is, then see the preview given below.
Preview Of Forms Vertical Splitter
See this video preview to getting an idea of how this splitter looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
jQuery Splitter With Bootstrap Grid Layout Source Code
Before sharing source code, let’s talk about it. First I have created a main div named container and placed all the elements inside it. The whole layout based on bootstrap and its grid-based layout. I have just placed elements with their default ID and class names. Inside the main div, I have placed two groups of forms. Also in the HTML file, I have linked CSS, JS, and jQuery CDN file.
Now using CSS I gave a color the splitter line. Because of bootstrap, there is very few lines of CSS. With CSS, I gave only height to form section, color and width to split line, and margin-top to the container. These are a few things I have done using CSS. jQuery handling here the whole functions and features of the program.
There I have run the functions when the document or page is ready using .ready(function ()) command. Now I have used JS if{} else{} commands to declare the functions. There I have used mouse commands like mousemove and mouseup etc to click and drag feature. These jQuery codes are a little complicated, you can understand if you have good knowledge of JS.
Left all codes you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html’ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery Splitter With Bootstrap | Webdevtrick.com</title> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="row" id="MySplitter"> <div class="col-md-6"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <div class="col-md-6"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ .container { margin-top: 10%; } .row{ height: 500px; } .vsplitbar { width: 4px; background: #ff3f3f; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 |
// Code By Webdevtrick ( https://webdevtrick.com ) $().ready(function () { $("#MySplitter").splitter(); }); ; (function ($) { $.fn.splitter = function (args) { args = args || {}; return this.each(function () { var zombie; // left-behind splitbar for outline resizes function startSplitMouse(evt) { if (opts.outline) zombie = zombie || bar.clone(false).insertAfter(A); panes.css("-webkit-user-select", "none"); // Safari selects A/B text on a move bar.addClass(opts.activeClass); A._posSplit = A[0][opts.pxSplit] - evt[opts.eventPos]; $(document) .bind("mousemove", doSplitMouse) .bind("mouseup", endSplitMouse); } function doSplitMouse(evt) { var newPos = A._posSplit + evt[opts.eventPos]; if (opts.outline) { newPos = Math.max(0, Math.min(newPos, splitter._DA - bar._DA)); bar.css(opts.origin, newPos); } else resplit(newPos); } function endSplitMouse(evt) { bar.removeClass(opts.activeClass); var newPos = A._posSplit + evt[opts.eventPos]; if (opts.outline) { zombie.remove(); zombie = null; resplit(newPos); } panes.css("-webkit-user-select", "text"); // let Safari select text again $(document) .unbind("mousemove", doSplitMouse) .unbind("mouseup", endSplitMouse); } function resplit(newPos) { // Constrain new splitbar position to fit pane size limits newPos = Math.max(A._min, splitter._DA - B._max, Math.min(newPos, A._max, splitter._DA - bar._DA - B._min)); // Resize/position the two panes bar._DA = bar[0][opts.pxSplit]; // bar size may change during dock bar.css(opts.origin, newPos).css(opts.fixed, splitter._DF); A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed, splitter._DF); B.css(opts.origin, newPos + bar._DA) .css(opts.split, splitter._DA - bar._DA - newPos).css(opts.fixed, splitter._DF); // IE fires resize for us; all others pay cash if (!$.browser.msie) panes.trigger("resize"); } function dimSum(jq, dims) { // Opera returns -1 for missing min/max width, turn into 0 var sum = 0; for (var i = 1; i < arguments.length; i++) sum += Math.max(parseInt(jq.css(arguments[i])) || 0, 0); return sum; } // Determine settings based on incoming opts, element classes, and defaults var vh = (args.splitHorizontal ? 'h' : args.splitVertical ? 'v' : args.type) || 'v'; var opts = $.extend({ activeClass: 'active', // class name for active splitter pxPerKey: 8, // splitter px moved per keypress tabIndex: 0, // tab order indicator accessKey: '' // accessKey for splitbar }, { v: { // Vertical splitters: keyLeft: 39, keyRight: 37, cursor: "e-resize", splitbarClass: "vsplitbar", outlineClass: "voutline", type: 'v', eventPos: "pageX", origin: "left", split: "width", pxSplit: "offsetWidth", side1: "Left", side2: "Right", fixed: "height", pxFixed: "offsetHeight", side3: "Top", side4: "Bottom" }, h: { // Horizontal splitters: keyTop: 40, keyBottom: 38, cursor: "n-resize", splitbarClass: "hsplitbar", outlineClass: "houtline", type: 'h', eventPos: "pageY", origin: "top", split: "height", pxSplit: "offsetHeight", side1: "Top", side2: "Bottom", fixed: "width", pxFixed: "offsetWidth", side3: "Left", side4: "Right" } }[vh], args); // Create jQuery object closures for splitter and both panes var splitter = $(this).css({ position: "relative" }); var panes = $(">*", splitter[0]).css({ position: "absolute", // positioned inside splitter container "z-index": "1", // splitbar is positioned above "-moz-outline-style": "none" // don't show dotted outline }); var A = $(panes[0]); // left or top var B = $(panes[1]); // right or bottom // Focuser element, provides keyboard support; title is shown by Opera accessKeys $.extend({ browser : { opera : /opera/.test(navigator.userAgent.toLowerCase()) } }) //$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase()); //$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase()); //$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); var focuser = $('<a href="javascript:void(0)"></a>') .attr({ accessKey: opts.accessKey, tabIndex: opts.tabIndex, title: opts.splitbarClass }) .bind($.browser.opera ? "click" : "focus", function () { this.focus(); bar.addClass(opts.activeClass) }) .bind("keydown", function (e) { var key = e.which || e.keyCode; var dir = key == opts["key" + opts.side1] ? 1 : key == opts["key" + opts.side2] ? -1 : 0; if (dir) resplit(A[0][opts.pxSplit] + dir * opts.pxPerKey, false); }) .bind("blur", function () { bar.removeClass(opts.activeClass) }); // Splitbar element, can be already in the doc or we create one var bar = $(panes[2] || '<div></div>') .insertAfter(A).css("z-index", "100").append(focuser) .attr({ "class": opts.splitbarClass, unselectable: "on" }) .css({ position: "absolute", "user-select": "none", "-webkit-user-select": "none", "-khtml-user-select": "none", "-moz-user-select": "none" }) .bind("mousedown", startSplitMouse); // Use our cursor unless the style specifies a non-default cursor if (/^(auto|default|)$/.test(bar.css("cursor"))) bar.css("cursor", opts.cursor); // Cache several dimensions for speed, rather than re-querying constantly bar._DA = bar[0][opts.pxSplit]; splitter._PBF = $.boxModel ? dimSum(splitter, "border" + opts.side3 + "Width", "border" + opts.side4 + "Width") : 0; splitter._PBA = $.boxModel ? dimSum(splitter, "border" + opts.side1 + "Width", "border" + opts.side2 + "Width") : 0; A._pane = opts.side1; B._pane = opts.side2; $.each([A, B], function () { this._min = opts["min" + this._pane] || dimSum(this, "min-" + opts.split); this._max = opts["max" + this._pane] || dimSum(this, "max-" + opts.split) || 9999; this._init = opts["size" + this._pane] === true ? parseInt($.curCSS(this[0], opts.split)) : opts["size" + this._pane]; }); // Determine initial position, get from cookie if specified var initPos = A._init; if (!isNaN(B._init)) // recalc initial B size as an offset from the top or left side initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA; if (opts.cookie) { if (!$.cookie) alert('jQuery.splitter(): jQuery cookie plugin required'); var ckpos = parseInt($.cookie(opts.cookie)); if (!isNaN(ckpos)) initPos = ckpos; $(window).bind("unload", function () { var state = String(bar.css(opts.origin)); // current location of splitbar $.cookie(opts.cookie, state, { expires: opts.cookieExpires || 365, path: opts.cookiePath || document.location.pathname }); }); } if (isNaN(initPos)) // King Solomon's algorithm initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA) / 2); // Resize event propagation and splitter sizing if (opts.anchorToWindow) { // Account for margin or border on the splitter container and enforce min height splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom"); splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20); $(window).bind("resize", function () { var top = splitter.offset().top; var wh = $(window).height(); splitter.css("height", Math.max(wh - top - splitter._hadjust, splitter._hmin) + "px"); if (!$.browser.msie) splitter.trigger("resize"); }).trigger("resize"); } else if (opts.resizeToWidth && !$.browser.msie) $(window).bind("resize", function () { splitter.trigger("resize"); }); // Resize event handler; triggered immediately to set initial position splitter.bind("resize", function (e, size) { // Custom events bubble in jQuery 1.3; don't get into a Yo Dawg if (e.target != this) return; // Determine new width/height of splitter container splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF; splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA; // Bail if splitter isn't visible or content isn't there yet if (splitter._DF <= 0 || splitter._DA <= 0) return; // Re-divvy the adjustable dimension; maintain size of the preferred pane resplit(!isNaN(size) ? size : (!(opts.sizeRight || opts.sizeBottom) ? A[0][opts.pxSplit] : splitter._DA - B[0][opts.pxSplit] - bar._DA)); }).trigger("resize", [initPos]); }); }; })(jQuery); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 |
// Code By Webdevtrick ( https://webdevtrick.com ) $().ready(function () { $("#MySplitter").splitter(); }); ; (function ($) { $.fn.splitter = function (args) { args = args || {}; return this.each(function () { var zombie; // left-behind splitbar for outline resizes function startSplitMouse(evt) { if (opts.outline) zombie = zombie || bar.clone(false).insertAfter(A); panes.css("-webkit-user-select", "none"); // Safari selects A/B text on a move bar.addClass(opts.activeClass); A._posSplit = A[0][opts.pxSplit] - evt[opts.eventPos]; $(document) .bind("mousemove", doSplitMouse) .bind("mouseup", endSplitMouse); } function doSplitMouse(evt) { var newPos = A._posSplit + evt[opts.eventPos]; if (opts.outline) { newPos = Math.max(0, Math.min(newPos, splitter._DA - bar._DA)); bar.css(opts.origin, newPos); } else resplit(newPos); } function endSplitMouse(evt) { bar.removeClass(opts.activeClass); var newPos = A._posSplit + evt[opts.eventPos]; if (opts.outline) { zombie.remove(); zombie = null; resplit(newPos); } panes.css("-webkit-user-select", "text"); // let Safari select text again $(document) .unbind("mousemove", doSplitMouse) .unbind("mouseup", endSplitMouse); } function resplit(newPos) { // Constrain new splitbar position to fit pane size limits newPos = Math.max(A._min, splitter._DA - B._max, Math.min(newPos, A._max, splitter._DA - bar._DA - B._min)); // Resize/position the two panes bar._DA = bar[0][opts.pxSplit]; // bar size may change during dock bar.css(opts.origin, newPos).css(opts.fixed, splitter._DF); A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed, splitter._DF); B.css(opts.origin, newPos + bar._DA) .css(opts.split, splitter._DA - bar._DA - newPos).css(opts.fixed, splitter._DF); // IE fires resize for us; all others pay cash if (!$.browser.msie) panes.trigger("resize"); } function dimSum(jq, dims) { // Opera returns -1 for missing min/max width, turn into 0 var sum = 0; for (var i = 1; i < arguments.length; i++) sum += Math.max(parseInt(jq.css(arguments[i])) || 0, 0); return sum; } // Determine settings based on incoming opts, element classes, and defaults var vh = (args.splitHorizontal ? 'h' : args.splitVertical ? 'v' : args.type) || 'v'; var opts = $.extend({ activeClass: 'active', // class name for active splitter pxPerKey: 8, // splitter px moved per keypress tabIndex: 0, // tab order indicator accessKey: '' // accessKey for splitbar }, { v: { // Vertical splitters: keyLeft: 39, keyRight: 37, cursor: "e-resize", splitbarClass: "vsplitbar", outlineClass: "voutline", type: 'v', eventPos: "pageX", origin: "left", split: "width", pxSplit: "offsetWidth", side1: "Left", side2: "Right", fixed: "height", pxFixed: "offsetHeight", side3: "Top", side4: "Bottom" }, h: { // Horizontal splitters: keyTop: 40, keyBottom: 38, cursor: "n-resize", splitbarClass: "hsplitbar", outlineClass: "houtline", type: 'h', eventPos: "pageY", origin: "top", split: "height", pxSplit: "offsetHeight", side1: "Top", side2: "Bottom", fixed: "width", pxFixed: "offsetWidth", side3: "Left", side4: "Right" } }[vh], args); // Create jQuery object closures for splitter and both panes var splitter = $(this).css({ position: "relative" }); var panes = $(">*", splitter[0]).css({ position: "absolute", // positioned inside splitter container "z-index": "1", // splitbar is positioned above "-moz-outline-style": "none" // don't show dotted outline }); var A = $(panes[0]); // left or top var B = $(panes[1]); // right or bottom // Focuser element, provides keyboard support; title is shown by Opera accessKeys $.extend({ browser : { opera : /opera/.test(navigator.userAgent.toLowerCase()) } }) //$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase()); //$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase()); //$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); var focuser = $('<a href="javascript:void(0)"></a>') .attr({ accessKey: opts.accessKey, tabIndex: opts.tabIndex, title: opts.splitbarClass }) .bind($.browser.opera ? "click" : "focus", function () { this.focus(); bar.addClass(opts.activeClass) }) .bind("keydown", function (e) { var key = e.which || e.keyCode; var dir = key == opts["key" + opts.side1] ? 1 : key == opts["key" + opts.side2] ? -1 : 0; if (dir) resplit(A[0][opts.pxSplit] + dir * opts.pxPerKey, false); }) .bind("blur", function () { bar.removeClass(opts.activeClass) }); // Splitbar element, can be already in the doc or we create one var bar = $(panes[2] || '<div></div>') .insertAfter(A).css("z-index", "100").append(focuser) .attr({ "class": opts.splitbarClass, unselectable: "on" }) .css({ position: "absolute", "user-select": "none", "-webkit-user-select": "none", "-khtml-user-select": "none", "-moz-user-select": "none" }) .bind("mousedown", startSplitMouse); // Use our cursor unless the style specifies a non-default cursor if (/^(auto|default|)$/.test(bar.css("cursor"))) bar.css("cursor", opts.cursor); // Cache several dimensions for speed, rather than re-querying constantly bar._DA = bar[0][opts.pxSplit]; splitter._PBF = $.boxModel ? dimSum(splitter, "border" + opts.side3 + "Width", "border" + opts.side4 + "Width") : 0; splitter._PBA = $.boxModel ? dimSum(splitter, "border" + opts.side1 + "Width", "border" + opts.side2 + "Width") : 0; A._pane = opts.side1; B._pane = opts.side2; $.each([A, B], function () { this._min = opts["min" + this._pane] || dimSum(this, "min-" + opts.split); this._max = opts["max" + this._pane] || dimSum(this, "max-" + opts.split) || 9999; this._init = opts["size" + this._pane] === true ? parseInt($.curCSS(this[0], opts.split)) : opts["size" + this._pane]; }); // Determine initial position, get from cookie if specified var initPos = A._init; if (!isNaN(B._init)) // recalc initial B size as an offset from the top or left side initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA; if (opts.cookie) { if (!$.cookie) alert('jQuery.splitter(): jQuery cookie plugin required'); var ckpos = parseInt($.cookie(opts.cookie)); if (!isNaN(ckpos)) initPos = ckpos; $(window).bind("unload", function () { var state = String(bar.css(opts.origin)); // current location of splitbar $.cookie(opts.cookie, state, { expires: opts.cookieExpires || 365, path: opts.cookiePath || document.location.pathname }); }); } if (isNaN(initPos)) // King Solomon's algorithm initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA) / 2); // Resize event propagation and splitter sizing if (opts.anchorToWindow) { // Account for margin or border on the splitter container and enforce min height splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom"); splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20); $(window).bind("resize", function () { var top = splitter.offset().top; var wh = $(window).height(); splitter.css("height", Math.max(wh - top - splitter._hadjust, splitter._hmin) + "px"); if (!$.browser.msie) splitter.trigger("resize"); }).trigger("resize"); } else if (opts.resizeToWidth && !$.browser.msie) $(window).bind("resize", function () { splitter.trigger("resize"); }); // Resize event handler; triggered immediately to set initial position splitter.bind("resize", function (e, size) { // Custom events bubble in jQuery 1.3; don't get into a Yo Dawg if (e.target != this) return; // Determine new width/height of splitter container splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF; splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA; // Bail if splitter isn't visible or content isn't there yet if (splitter._DF <= 0 || splitter._DA <= 0) return; // Re-divvy the adjustable dimension; maintain size of the preferred pane resplit(!isNaN(size) ? size : (!(opts.sizeRight || opts.sizeBottom) ? A[0][opts.pxSplit] : splitter._DA - B[0][opts.pxSplit] - bar._DA)); }).trigger("resize", [initPos]); }); }; })(jQuery); |
That’s It. Now you have successfully created jQuery Splitter With Bootstrap Grid Layout, Forms Vertical Splitter Program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
