1

I created this split screen view using split.js. Two divs are shown next to each other. You can drag the middle to make one bigger of smaller. Now it would be nice to let the two divs automatically fall below each other if the screen is smaller than lets say 768 px, but offcourse keeping the split screen functionality.

Even better apart from automatically changing the view when scaling the browser it would be nice to give the user the option to choose for horizontal/vertical themselves as well. So this way they can overrule the standard behavior.

I already tried working with bootstrap 4, cfr. https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be, but they don't seem to work together well.

My code: https://jsfiddle.net/rjtpvhn1/1/

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="content">
      <div class="split a">text left</div>
      <div class="split b">text right</div>
    </div>
  </body>
</html>

CSS:

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      height: 100vh;
      font-size: 20px;
    }

    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-items: center;
      align-items: center;
    }

    .split {
      width: 100%;
      height: 100%;
      padding: 30px;
      border: 1px solid;
      overflow: auto;
    }

    .gutter {
      cursor: e-resize;
      height: 100%;
      background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
    }

JAVASCRIPT: (include https://unpkg.com/split.js/dist/split.min.js)

Split(['.a', '.b'], {
  gutterSize: 9,
  sizes: [50, 50]
});
netcult
  • 167
  • 1
  • 1
  • 11
  • How split screen functionality is expected to work, if elements will fall below each other? – Svyat Jun 21 '19 at 14:51
  • same way, you can also drag the divs bigger (higher) or smaller (lower). – netcult Jun 21 '19 at 15:21
  • I've just visited the Youtube video. I followed all the steps and everything works as in the video – hans-könig Jun 21 '19 at 15:24
  • Did you visit https://jsfiddle.net/rjtpvhn1/1/ ? This is what I need to be extended. I tried combining split.js with a bootstrap solution (the video), but the both didn't work together. – netcult Jun 21 '19 at 15:28
  • I visited just the Youtube video. Inside the head tags are bootstrap.min.css , jquery.min.js and bootstrap.min.js Just the CSS file will not work – hans-könig Jun 21 '19 at 15:39
  • Again, I'm not trying to do just what the youtube movie explains, the stuff in the movie works perfect indeed, on its own. It is the combination of both bootstrap and split.js that I can't get to work. Also, this is something I tried, but maybe there is a better way.. – netcult Jun 24 '19 at 13:38

0 Answers0