Fire The Div Mousemove While On Document

Im having a slider that increases width when click-hold and moved. But as soon as im getting my mouse outside of the slider it doesn't runs anymore. How can i make it also run whe

Solution 1:

I changed a few things in your code, basically i added an event listener on the document to achieve what you want

See code snippet:

var classname = document.getElementsByClassName("slider-container");

const offset = function(el) {
  var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return {
    top: rect.top + scrollTop,
    left: rect.left + scrollLeft
  }
};

var mymousedown = function(e) {
  var sliderC = e.currentTarget;
  sliderC.setAttribute("isMousedown", 1);

  document.addEventListener('mousemove', function() {
    var e = window.event;
    var x = e.clientX;
    if (parseInt(sliderC.getAttribute("isMousedown")) == 1) {
      var width = e.clientX - offset(sliderC).left;
      sliderC.querySelector('.slider').style.width = width + 'px';
    }
  }, false);

  document.addEventListener('mouseup', function() {
    sliderC.setAttribute("isMousedown", 0);
  }, false);
}

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('mousedown', mymousedown, false);
}

body {
  user-select: none;
}

.slider-container {
  width: 200px;
  border: 4px solid black;
  height: 100px;
  display: inline-block;
  margin: 10px;
}

.slider {
  width: 0;
  background: #f00;
  height: 100%;
  max-width: 100%;
}

<divclass="slider-container"><divclass="slider"></div></div><divclass="slider-container"><divclass="slider"></div></div><br /><br /><h1>ALSO moving mouse here while mousedown should move them sliders . nam sayin ?</h1>

Solution 2:

You bind your mouse event listeners to the slider-container object. They do not fire anymore once you get out of the slider area.

What I would suggest is, that you bind the mousedown still to your slider-containers, but let mousemove and mouseup be handled globally. In the meantime, you cache the slider element, that was hit with the mousedown and every effect from the mousemove will be applied to that. Once you mouseup again, you delete that element from cache, so you don't get conflicted.

You can even get rid of that awkward 'isMouseDown' property.

The altered code is here:

var classname = document.getElementsByClassName("slider-container");

const offset = function(el){
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
};

var mymousemove = function(e) {
  if (currentSlider) {
    var x = e.pageX; 

    var width = e.pageX - offset(currentSlider).left;
    if (width < 0) width = 0;
    if (width > 200) width = 200;
    currentSlider.querySelector('.slider').style.width = width+'px';
  }
};
var currentSlider;
var mymousedown = function(e) {
  currentSlider = e.currentTarget;
}
var mymouseup = function(e) {
  if (currentSlider) {
    currentSlider = null;
  }
}

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('mousedown',mymousedown, false);
}
document.addEventListener('mousemove',mymousemove, false);
document.addEventListener('mouseup',mymouseup, false);

The updated fiddle can be found here.

Since now, the mouse pointer could be anywhere to the screen, you have to limit the width your inner container could be set to.

I did this hardcoded from 0 to 200, the size range of your slider-container, but this can of course be done more dynamically.