The problem of not being able to create a rectangular colored area when the drawable semicircle is drawn to the far right

Using Streamlit
1

I want the rectangular shaped blue colored area to remain in view when the draw-able semicircle (with vault size background) is pulled to the far right.

   var handle = document.getElementById("handle");
  // Check if the handle reached the maximum position
  if (newWidth >= maxBarWidth) {
    handle.style.backgroundImage = "url('https://virtualisedreality.files.wordpress.com/2012/07/the-best-top-desktop-blue-wallpapers-blue-wallpaper-blue-background-hd-33.jpg')"; // Set to your new blue image
} else {
    handle.style.backgroundImage = "url('https://i.gifer.com/2P5x.gif')"; // Set back to the original image
}

With this code, it turns a vague blue color at a sensitive point. Can we solve it easily using an approach like this or in a different way? Currently, part of the Background is visible on the right.

// Make the handle draggable
dragElement(document.getElementById("handle"));

function dragElement(elmnt) {
  var startPosX = 0,
    currentPosX = 0;
  var maxBarWidth = window.innerWidth - (elmnt.offsetWidth / 16); // Tarayıcı penceresinin genişliğini kullanma , Set the maximum width for the bar.

  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    startPosX = e.clientX;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    currentPosX = e.clientX - startPosX;
    startPosX = e.clientX;
    var bar = document.getElementById("bar");
    var newWidth = bar.offsetWidth + currentPosX;

    // Define the minimum width to keep the handle from entering the bar area
    var minBarWidth = 3; // This is the initial width of the bar

    // Restrict the width within the minimum and maximum bounds
    newWidth = Math.max(minBarWidth, Math.min(newWidth, maxBarWidth));

    // Set the new width
    bar.style.width = newWidth + "px";

  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#bar {
  position: fixed;
  /* Fixed position to stay in place on scroll */
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  /* Initial width of the bar */
  background-color: #f1f1f1;
  /* Background of the bar */
  border-right: 1px solid #d3d3d3;
  /* Border of the bar */
  z-index: 9;
}

#handle {
  width: 100px;
  /* Diameter of the handle circle */
  height: 100px;
  /* Height of the handle circle */
  background-color: #2196F3;
  border-radius: 50%;
  /* Make it round */
  position: absolute;
  /* Absolute position within the bar div */
  top: 50%;
  /* Center it vertically */
  right: -3.125em;
  /* Align to the right of the bar */
  transform: translateY(-50%);
  /* Adjust vertical position */
  cursor: pointer;
  /* Change cursor to indicate it's draggable */
  z-index: 10;
  clip-path: inset(0 0 0 50%);
  /* Clip left half of the circle */
  background-image: url('https://i.gifer.com/2P5x.gif');
  background-repeat: no-repeat;
  background-size: 90% 100%;
  /* Width and height values */
  background-position: calc(100% + 0.625em) center;
  /* Move the image to the right by 10 pixels from the edge */
}

<html>

<body>
  <div id="bar">
    <!-- This is the draggable handle -->
    <div id="handle"></div>
  </div>
</body>

</html>

Desired situation:

enter image description here

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.