CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mongmong seesee
mongmong seesee

Reputation: 1015

why mouse cursor and red line not same position when add zoom 0.5 in to body tag?

why mouse cursor and red line not same position when add zoom 0.5 in to body tag ?

When use on zoom 1; it's work good,

How can i do work on zoom 0.5 (except zoom 1;) ?

https://jsfiddle.net/ksfqgv0p/6/

var isResizing = false;
$(function () {
   var container = $('#container'),
        left = $('#left'),
        handle = $('#handle');

    container.on('mousemove', function (e) {
        isResizing = true;
    });

    container.on('mouseout', function (e) {
        isResizing = false;
    });

    $(document).on('mousemove', function (e) {
        if (!isResizing) 
        return;
        left.css('width', e.clientX - container.offset().left);
        handle.css('margin-left', e.clientX - container.offset().left);
    });
});

Upvotes: 0

Views: 101

Answers (1)

Gvidas
Gvidas

Reputation: 1964

The problem is that e.clientX returns mouse position on screen not on your object, so then this value is applied to width attribute it is 2x smaller than it must be, so you need to divide this value by zoom level to get correct mouse position on that zoomed out object.

Like this:

left.css('width', ((e.clientX/$('body').css('zoom')) - container.offset().left));
handle.css('margin-left', ((e.clientX/$('body').css('zoom')) - container.offset().left));

Here's jsFiddle

var isResizing = false;
$(function () {
   var container = $('#container'),
        left = $('#left'),
        handle = $('#handle');

    container.on('mousemove', function (e) {
        isResizing = true;
    });

    container.on('mouseout', function (e) {
        isResizing = false;
    });

    $(document).on('mousemove', function (e) {
        if (!isResizing) 
        return;
        console.log(container.offset().left);
        console.log(e.clientX);
        left.css('width', ((e.clientX/$('body').css('zoom')) - container.offset().left));
        handle.css('margin-left', ((e.clientX/$('body').css('zoom')) - container.offset().left));
    });
});
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 500px;
    /* Disable selection so it doesn't get annoying when dragging. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
#container #left {
    position: absolute;
    width: 750px;
    height: 100%;
    background-image: url("http://www.pilsnertop.com/wp-content/uploads/2015/12/Dog-Header3.jpg");
    overflow: hidden;
    background-repeat: no-repeat;
    z-index: 9;
}
#container #right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-image: url("http://www.twitrcovers.com/wp-content/uploads/2014/06/Dog-Butterfly-l.jpg");
    overflow: hidden;
    background-repeat: no-repeat;
}
#container #handle {
    background: red;
    height: 500px;
    margin-left: 742px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
    position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body style="
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    zoom:0.5;
"
>


<div id="container">
    <!-- Left side -->
    <div id="left"> 
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side's content!
This is the left side's content! </div>
    <!-- Right side -->
    <div id="right">
    </div>
</div>




</body>

Upvotes: 1

Related Questions