Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github 
Create resizable split views or Divs
Hi,
Is there any built-in functions/css styles in Metronic to create a page divided into two sections with a splitter/resizer that enables user to resize sections horizontally?
Replies (1)
Hi,
We do not have this example but there is a Draggable plugin that you can use to implement the such feature as per your custom requirements.
We used it to implement the resizable screenshots in the Metronic docs using the below js code:
"use strict";
// Class definition
var KTAppHero = function () {
// Private variables
var preview;
var previewDrag;
var previewSlider;
var previewLight;
var previewLightImg;
var previewDark;
var previewDarkImg;
var slide = function(e) {
const sliderPos = e.target.value;
// Update the width of the foreground image
KTUtil.css(previewDark, "width", `${sliderPos}%`);
// Update the position of the slider button
KTUtil.css(previewDrag, "left", `calc(${sliderPos}% - 0px)`);
}
var handlePreview = function() {
calculate();
resize();
previewSlider.addEventListener("input", slide);
previewSlider.addEventListener("change", slide);
}
var calculate = function() {
const width = KTUtil.css(preview, "width");
KTUtil.css(previewLightImg, "width", width);
KTUtil.css(previewDarkImg, "width", width);
}
var resize = function() {
// Window resize Handling
window.addEventListener("resize", calculate);
}
// Public methods
return {
init: function () {
preview = document.querySelector(".preview");
previewSlider = document.querySelector(".preview .preview-slider");
previewDrag = document.querySelector(".preview .preview-drag");
previewLight = document.querySelector(".preview .preview-light");
previewLightImg = document.querySelector(".preview .preview-light > img");
previewDark = document.querySelector(".preview .preview-dark");
previewDarkImg = document.querySelector(".preview .preview-dark > img");
if (!preview) {
return;
}
handlePreview();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppHero.init();
});This JS code refers to the above Metronic's Docs page hero block's docs UI preview box.
Regards.
