Html Question posted in
Some basic documentation can be found here.

Html – Moving elements with a dragbar

As you can see in the example bellow I want to compare have my article presented alongside another article to let people compare them both.

But I need the dragbar to change its functionality and move above the screenshot – Instead of moving both of them together.

I hope it’s clear, thank you! 🙂

MY FIRST CODE:

var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
var bar = document.getElementById('dragbar');

const drag = (e) => {

  document.selection ? document.selection.empty() : window.getSelection().removeAllRanges();
  left.style.width = (e.pageX - bar.offsetWidth / 2) + 'px';
}

bar.addEventListener('mousedown', () => {
  document.addEventListener('mousemove', drag);
});

bar.addEventListener('mouseup', () => {
  document.removeEventListener('mousemove', drag);
});
.drag-container {
  display: flex;
  min-height: 100vh;
}

[class^="panel"] {
  padding: 0px 0px;
  background-color: white;
}

.panel-one {
  width: 44.6%;
}

.panel-two {
  flex: 1;
  width: 56.4%;
}

.dragbar {
  position: relative;
  padding: 2px;
  cursor: pointer;
  background-color: rgb(25, 0, 75);
}

.slider {
  position: relative;
  z-index: 9;
  cursor: pointer;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" ; href="COPY.css">

  <title>History of Africa</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      text-align: center;
    }
  </style>

</head>

<body>
  <!-- DRAG BAR (IMAGE) -->
  <div class="drag-container">
    <div class="panel-one" ; id="drag-left">

      <img src="https://i.sstatic.net/pzcTtqsf.png" ; style="display: block; width: 100%;">

      <h1 style="text-decoration: underline;">Safkfsdf Akslefos Alpsdfd</h1>

      <br>
      <br>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam reprehenderit modi eius
        numquam.Quia saepe nulla aliquid nesciunt et a pariatur expedita mollitia. Suscipit
        necessitatibus temporibus architecto ea rerum eveniet.
        Vitae quis sint tenetur impedit corrupti esse error amet minima enim. Eos quas similique
        aperiam itaque autem. Veritatis optio deleniti, deserunt animi soluta, nam ab aut maxime
        inventore quis voluptate.
        Ipsam, corporis earum. Ipsa quasi ipsum eius, dolor dolore assumenda! Eum quod fugit iste
        dignissimos exercitationem libero, numquam reprehenderit, rerum totam, delectus expedita
        voluptas nam unde! Magnam corrupti ratione amet.
        Quaerat quasi qui pariatur earum nobis velit, nemo consectetur laborum tenetur sed! Modi
        ipsa temporibus mollitia dolor inventore. Sapiente molestias alias nesciunt! Dolor non
        quas soluta eaque repellendus enim ipsam.
      </p>
    </div>

    <div class="dragbar" ; id="dragbar">
      <div class="slider"></div>
    </div>

    <div class="panel-two" ; id="drag-right">
      <div class="container">

        <img src="https://i.sstatic.net/JpWkQsh2.png" ; width="100%" ; height="100%" ; style="overflow-x: hidden;">

      </div>
    </div>
  </div>

  <!-- DRAG BAR (IMAGE) -->
  <script src="COPY.js"></script>

</body>

</html>

Another code I paid for that’s MOVING THEM WITH THE DRAGBAR:

const container = document.querySelector('.drag-container');
const dragbar = document.getElementById('dragbar');

let isDragging = false;
let initialMouseX;
let initialContainerOffsetLeft;

const drag = (e) => {
  if (!isDragging) return;

  const deltaX = e.clientX - initialMouseX;
  const containerWidth = container.offsetWidth;
  const dragbarWidth = dragbar.offsetWidth;
  const dragbarHalfWidth = dragbarWidth / 2;

  // Calculate the maximum drag range from both sides of the container
  const maxDragLeft = containerWidth * 0.1 - dragbarHalfWidth;
  const maxDragRight = containerWidth * 0.1 - dragbarHalfWidth;

  // Calculate the new position of the container
  let newContainerOffsetLeft = initialContainerOffsetLeft + deltaX;
  
  // Clamp the new position within the maximum drag range
  newContainerOffsetLeft = Math.max(-maxDragLeft, Math.min(maxDragRight, newContainerOffsetLeft));

  // Update the container's position
  container.style.transform = `translateX(${newContainerOffsetLeft}px)`;
};

const onMouseDown = (e) => {
  e.preventDefault(); // Prevent text selection while dragging
  isDragging = true;
  initialMouseX = e.clientX;
  initialContainerOffsetLeft = parseInt(window.getComputedStyle(container).transform.split(',')[4]) || 0;
};

const onMouseUp = () => {
  isDragging = false;
};

dragbar.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', onMouseUp);
body{

  overflow-x:hidden ;
}
.drag-container {
  display: flex;
  min-height: 100vh;
  overflow-x:hidden ;
}

[class^="panel"] {
  padding: 0px 0px;
  background-color: white;
}

.panel-one {
  position: relative;
  width: 48.7%;
}

.panel-two {
  position: relative;
  flex: 1;
  width: 52.3%;
}

.dragbar {
  position: relative;
  padding: 2px;
  cursor: pointer;
  background-color: rgb(25, 0, 75);
}

.slider {
  position: relative;
  z-index: 9;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: white;
  opacity: 1;
  border-radius: 50%;

  background-image: url("Dragbar Slider.svg");
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" ; href="COPY.css">

  <title>History of Africa</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      text-align: center;
    }
  </style>

</head>

<body>
  <!-- DRAG BAR (IMAGE) -->
  <div class="drag-container">
    <div class="panel-one" ; id="drag-left">

      <img src="https://i.sstatic.net/pzcTtqsf.png" ; style="display: block; width: 100%;">

      <h1 style="text-decoration: underline;">Safkfsdf Akslefos Alpsdfd</h1>

      <br>
      <br>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam reprehenderit modi eius
        numquam.Quia saepe nulla aliquid nesciunt et a pariatur expedita mollitia. Suscipit
        necessitatibus temporibus architecto ea rerum eveniet.
        Vitae quis sint tenetur impedit corrupti esse error amet minima enim. Eos quas similique
        aperiam itaque autem. Veritatis optio deleniti, deserunt animi soluta, nam ab aut maxime
        inventore quis voluptate.
        Ipsam, corporis earum. Ipsa quasi ipsum eius, dolor dolore assumenda! Eum quod fugit iste
        dignissimos exercitationem libero, numquam reprehenderit, rerum totam, delectus expedita
        voluptas nam unde! Magnam corrupti ratione amet.
        Quaerat quasi qui pariatur earum nobis velit, nemo consectetur laborum tenetur sed! Modi
        ipsa temporibus mollitia dolor inventore. Sapiente molestias alias nesciunt! Dolor non
        quas soluta eaque repellendus enim ipsam.
      </p>
    </div>

    <div class="dragbar" ; id="dragbar">
      <div class="slider"></div>
    </div>

    <div class="panel-two" ; id="drag-right">
      <div class="container">

        <img src="https://i.sstatic.net/JpWkQsh2.png" ; width="100%" ; height="100%" ; style="overflow-x: hidden;">

      </div>
    </div>
  </div>

  <!-- DRAG BAR (IMAGE) -->
  <script src="COPY.js"></script>

</body>

</html>

Maybe that can help because I haven’t figured it out 🙁

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just figured out it won't be very useful because it will leave blank space on the screen - and that would look very clumsy.

    Thank you anyways!


  2. 0

    I have updated the template using relative-absolute positioning also update many things in CSS. for JS I have marked new lines with //updated. You may modify width 80% for sections as required.

    const container = document.querySelector('.drag-container');
const dragbar = document.getElementById('dragbar');
const panelTwo = document.getElementById('drag-right'); //updated

let isDragging = false;
let initialMouseX;
let initialContainerOffsetLeft;

const drag = (e) => {
  if (!isDragging) return;

  const deltaX = e.clientX - initialMouseX;
  const containerWidth = container.offsetWidth;
  const dragbarWidth = dragbar.offsetWidth;
  const dragbarHalfWidth = dragbarWidth / 2;

  // Calculate the maximum drag range from both sides of the container
  const maxDragLeft = containerWidth * 0.5 - dragbarHalfWidth;
  const maxDragRight = containerWidth * 0.5 - dragbarWidth; //updated

  // Calculate the new position of the container
  let newContainerOffsetLeft = initialContainerOffsetLeft + deltaX;
  
  // Clamp the new position within the maximum drag range
  newContainerOffsetLeft = Math.max(-maxDragLeft, Math.min(maxDragRight, newContainerOffsetLeft));

  // Update the container's position
  panelTwo.style.transform = `translateX(${newContainerOffsetLeft}px)`; //updated
  dragbar.style.transform = `translateX(${newContainerOffsetLeft}px)`; //updated
};

const onMouseDown = (e) => {
  e.preventDefault(); // Prevent text selection while dragging
  isDragging = true;
  initialMouseX = e.clientX;
  initialContainerOffsetLeft = parseInt(window.getComputedStyle(container).transform.split(',')[4]) || 0;
};

const onMouseUp = () => {
  isDragging = false;
};

dragbar.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', onMouseUp);
    body{

  overflow-x:hidden ;
}
.drag-container {
  min-height: 100vh;
  overflow-x:hidden ;
  position:relative;
  top:0;
  left:0;
}

[class^="panel"] {
  padding: 0px 0px;
  background-color: white;
}

.panel-one {
  position: absolute;
  width: 80%;
}

.panel-two {
  position: absolute;
  top:0;
  left:calc(50% + 40px);
  width: 80%;
}

.dragbar {
  position: absolute;
  left:50%;
  padding: 2px;
  cursor: pointer;
  background-color: rgb(25, 0, 75);
}

.slider {
  position: relative;
  z-index: 9;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: white;
  opacity: 1;
  border-radius: 50%;

  background-image: url("Dragbar Slider.svg");
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" ; href="COPY.css">

  <title>History of Africa</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      text-align: center;
    }
  </style>

</head>

<body>
  <!-- DRAG BAR (IMAGE) -->
  <div class="drag-container">
    <div class="panel-one" ; id="drag-left">

      <img src="https://i.sstatic.net/pzcTtqsf.png" ; style="display: block; width: 100%;">

      <h1 style="text-decoration: underline;">Safkfsdf Akslefos Alpsdfd</h1>

      <br>
      <br>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam reprehenderit modi eius
        numquam.Quia saepe nulla aliquid nesciunt et a pariatur expedita mollitia. Suscipit
        necessitatibus temporibus architecto ea rerum eveniet.
        Vitae quis sint tenetur impedit corrupti esse error amet minima enim. Eos quas similique
        aperiam itaque autem. Veritatis optio deleniti, deserunt animi soluta, nam ab aut maxime
        inventore quis voluptate.
        Ipsam, corporis earum. Ipsa quasi ipsum eius, dolor dolore assumenda! Eum quod fugit iste
        dignissimos exercitationem libero, numquam reprehenderit, rerum totam, delectus expedita
        voluptas nam unde! Magnam corrupti ratione amet.
        Quaerat quasi qui pariatur earum nobis velit, nemo consectetur laborum tenetur sed! Modi
        ipsa temporibus mollitia dolor inventore. Sapiente molestias alias nesciunt! Dolor non
        quas soluta eaque repellendus enim ipsam.
      </p>
    </div>

    <div class="dragbar" ; id="dragbar">
      <div class="slider"></div>
    </div>

    <div class="panel-two" ; id="drag-right">
      <div class="container">

        <img src="https://i.sstatic.net/JpWkQsh2.png" ; width="100%" ; height="100%" ; style="overflow-x: hidden;">

      </div>
    </div>
  </div>

  <!-- DRAG BAR (IMAGE) -->
  <script src="COPY.js"></script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search