I am developing a basic HTML DIV splitter and have set the cursor as col-resize for it. I want the cursor to remain as col-resize while dragging the splitter, but if the mouse moves beyond the resize boundary, the cursor should revert back to its default shape. The HTML:
<div id="container">
<div id="left"></div>
<div id="splitter"></div>
<div id="right">
</div>
The CSS:
#container {
position: relative;
}
#left {
position: absolute;
left: 2px;
top: 2px;
width: 200px;
height: 200px;
outline: 2px solid red;
}
#right {
position: absolute;
left: 202px;
top: 2px;
width: 300px;
height: 200px;
outline: 2px solid blue;
}
#splitter {
position: absolute;
left:202px;
top: 2px;
height: 200px;
z-index: 2;
cursor: col-resize;
width: 8px;
}
#splitter.active {
background-color: gray;
}
Another issue I am facing is that I want the background color to change to gray when the mouse is down and dragging, but return to no color when the mouse is released or done dragging. However, if the mouse is outside of the splitter, the mouseup event does not trigger.
$("#splitter").on("mousedown mouseup", function() {
$(this).toggleClass("active");});
You can access the jsFiddle link here: http://jsfiddle.net/Shuping/MhYuK/ Do you have any suggestions?