Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(