CODEWITHSUNDEEP
javascripthtmlcssresize
user2355058
user2355058

Reputation: 221

How to set boundaries for position absolute element in javascript

Fiddle. I am creating a chat/mail application with a re-sizable menu. Like google hangouts desktop app. If you resize the brown content pane at a normal speed, you can see the boundaries working as I intended. I am using style.left and a function which checks cursor direction in order to keep the cursor with the drag bar.

Bug: While holding mouse down on the dragbar, try resizing it rapidly out of bounds with a "fling" motion several times . It will oblige, violating the rules of the controller.

edit: The bug is much less offensive in Edge and firefox. It does not occur on the right, and it only occurs sometimes on the left, but never going off screen.

Here is my view controller code from the fiddle.

//handles all mousemove and boundary cases.
mouseMove(e) {
    //size of right pane relative to container (percent)
    let percentRight = Math.round(this.messageWindowContentContainer.clientWidth/this.chatContainer.clientWidth * 100);
    //normal mousemove within the bounds min:25 and max:94
    if ((percentRight) <= 94 && percentRight >= 25) {
    document.getElementById("content2").innerHTML = "Content";
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");

}
//Only moves if right pane is out of bounds(left), mouse if moving right, and mouse is right of pane
if (percentRight > 94 && this.getCursorXPercentage(e) >= 6 && this.cursorMovingRight(e)) {
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
//Only moves if right pane is out of bounds (right), mouse is moving left, and mouse is left of pane
if (percentRight < 25 && this.getCursorXPercentage(e) <= 75 && this.cursorMovingLeft(e)) {
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
}

//if e.movementX is positive, moving right
cursorMovingRight(e) {
    return (Math.sign(e.movementX) === 1)
}
//if e.movementX is negative, moving left
cursorMovingLeft(e) {
    return (Math.sign(e.movementX) === -1)
}

//returns cursor location relative to container as percent
getCursorXPercentage(e) {
    let percentage = Math.round((e.clientX / this.chatContainer.getBoundingClientRect().width) * 100)
    console.log(percentage)
    document.getElementById("content2").innerHTML = percentage;
    return percentage;
}

Upvotes: 0

Views: 628

Answers (1)

bormat
bormat

Reputation: 1379

Ok so I tried it on my computer and I think it's because you are testing the current value of percentRight instead of testing the future value of percentRight. which means that even if the present value is ok,it is maybe not the case for the future value. if your DIV is in full screen as in the example the new value of percentLeft will be e.clientX / widthOfTheBox once you have the new value before assigning it must do:

 this.messageWindowContainer.style.left = Math.min(Math.max(newPercentLeft,5),75) * widthOfTheBox + 'px'

you can shorten your code by writting this.messageWindowContainer.style.left = yourvalue instead of setAttribute.

edit : https://jsfiddle.net/8kcc8822/16/

 mouseMove(e) {
        var $0 = document.querySelector.bind(document),
            boxWidth =  $0('#mainMenuContainer').clientWidth,
            newPercentLeft = e.clientX / boxWidth,
            limitedNewPercentLeft = Math.min(Math.max(.2,newPercentLeft),.85)
        ;
        $0("#content2").innerHTML = limitedNewPercentLeft != newPercentLeft ? (newPercentLeft * 100 |0) : 'content';
        this.messageWindowContainer.style.left = limitedNewPercentLeft * boxWidth + 'px'
        console.log(newPercentLeft);
    }

Upvotes: 1

Related Questions