I have this mockup:
where the white button lets you drag the iPhone mockup to the left and right, giving a distorted/zoomed perspective of the image in the background.
The drag functionality works, what I'm looking for is a solution that gives the distorted/zoomed view in the iPhone-mockup. I've been fiddling with the mask-property, but can't achieve what I want.
jQuery, JS, CSS, SCSS solutions are welcome.
(The image in the code isn't the exact same as the one in the mockup, ignore that)
Snippet
(works best in full page view)
let draggable = $('.phone-mockup-container'); //element
let dragTrigger = $('.phone-trigger');
dragTrigger.on('mousedown', function(e) {
let dr = draggable.addClass("drag");
height = dr.outerHeight();
width = dr.outerWidth();
max_left = dr.parent().offset().left + dr.parent().width() - dr.outerWidth();
min_left = dr.parent().offset().left;
xpos = dr.offset().left + width - e.pageX;
$(document.body).on('mousemove', function(e) {
let ileft = e.pageX + xpos - width;
if (dr.hasClass("drag")) {
if (ileft <= min_left) {
ileft = min_left;
}
if (ileft >= max_left) {
ileft = max_left;
}
dr.offset({
left: ileft
});
}
}).on('mouseup', function(e) {
dr.removeClass("drag");
});
});
.phone-mockup-wrapper {
position: relative;
}
.phone-mockup-container {
position: absolute;
top: 20px;
left: 0;
right: 0;
z-index: 2;
max-width: 355px;
}
.phone-mockup {
-o-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
user-drag: none;
user-select: none;
position: relative;
}
.phone-trigger {
position: absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -100%);
max-width: fit-content;
font-size: 29px;
padding: 13px;
border-radius: 50%;
background-color: white;
cursor: move;
}
.image {
max-width: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="phone-mockup-wrapper">
<div class="phone-mockup-container">
<img class="phone-mockup" src="https://i.ibb.co/NpXQY30/iphone-mockup.png">
<span class="phone-trigger">drag</span>
</div>
</div>
<img class="image" src="https://i.ibb.co/MPwGfmc/7e8db8b589fe8defd6b9cc051a676a19.png">
I managed to solve this by using the same image as background-image and a combination of background-size, overflow and the value generated from the function that lets you drag the iPhone-mockup.
let draggable = $('.phone-mockup-container');
let dragTrigger = $('.phone-trigger');
let eller = $('.phone-area');
dragTrigger.on('mousedown', function(e) {
eller.addClass('dragger');
let dr = draggable.addClass("drag");
height = dr.outerHeight();
width = dr.outerWidth();
max_left = dr.parent().offset().left + dr.parent().width() - dr.outerWidth();
min_left = dr.parent().offset().left;
xpos = dr.offset().left + width - e.pageX;
$(document.body).on('mousemove', function(e) {
let ileft = e.pageX + xpos - width;
if (dr.hasClass("drag")) {
if (eller.hasClass("dragger")) {
if (ileft <= min_left) {
ileft = min_left;
}
if (ileft >= max_left) {
ileft = max_left;
}
dr.offset({
left: ileft
});
let test = document.querySelector('.drag');
let left = test.style.left;
$(eller).css('backgroundPositionX', '-' + left);
}
}
}).on('mouseup', function(e) {
dr.removeClass("drag");
eller.removeClass("dragger");
});
});
.phone-mockup-wrapper {
position: relative;
}
.phone-mockup-container {
position: absolute;
top: 20px;
left: 0;
right: 0;
z-index: 2;
max-width: 355px;
overflow: hidden;
}
.phone-mockup {
-o-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
user-drag: none;
user-select: none;
position: relative;
z-index: 2;
}
.phone-area {
background-image: url('https://i.ibb.co/MPwGfmc/7e8db8b589fe8defd6b9cc051a676a19.png');
position: absolute;
top: 4.3%;
top: 1.2%;
left: 5%;
height: 97%;
width: 90%;
z-index: 1;
border-radius: 10px;
pointer-events: none;
background-repeat: no-repeat;
background-size: 820px 709px;
background-position: left;
border-radius: 20px;
}
.phone-trigger {
position: absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -100%);
max-width: fit-content;
font-size: 29px;
padding: 13px;
border-radius: 50%;
background-color: white;
cursor: move;
z-index: 10;
}
.image {
max-width: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="phone-mockup-wrapper">
<div class="phone-mockup-container">
<img class="phone-mockup" src="https://i.ibb.co/NpXQY30/iphone-mockup.png">
<div class="phone-area"></div>
<span class="phone-trigger">drag</span>
</div>
</div>
<img class="image" src="https://i.ibb.co/MPwGfmc/7e8db8b589fe8defd6b9cc051a676a19.png">
Related
I'm making a game where a gif is following the cursor. Is there any way to reduce the speed so that the image that follows the cursor moves at a constant (but slower) speed than the cursor itself?
Basically right now the gif I assigned is acting link a replacement cursor. I want the gif to follow and catch up to the cursor at its own speed.
Thanks
<script>
document.querySelector(".testsite").onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
e.target.style.setProperty("--x", `${x}px`);
e.target.style.setProperty("--y", `${y}px`);
};
</script>
<style>
body {
justify-content: center;
align-items: center;
min-height: 100vh;
}
.testsite {
/* container */
width: 500px;
height: 500px;
position: relative;
appearance: none;
background: grey;
padding: 10px 20px;
border: none;
color: white;
font-size: 1.2em;
cursor: none;
outline: none;
overflow: hidden;
border-radius: 10px;
box-shadow: black;
}
.testsite span {
position: relative;
pointer-events: none;
}
.testsite::before {
--size: 0;
content: "";
position: absolute;
left: var(--x);
top: var(--y);
width: 32px;
height: 32px;
background-image: url("html5.gif");
animation-duration: 1s;
transform: translate(-50%, -50%);
}
</style>
<html>
<body>
<div class="testsite">
</div>
</body>
</html>
You can make the x and y coordinate operations of your js into a function and then add a setTimeout to that function to run it every 100ms or how ever long you want the delay to be. Check it out here, note I also removed pointer:none; from .testsite :
document.querySelector(".testsite").onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
function runInt() {
e.target.style.setProperty("--x", `${x}px`);
e.target.style.setProperty("--y", `${y}px`);
}
setTimeout(runInt, 100);
};
body {
justify-content: center;
align-items: center;
min-height: 100vh;
}
.testsite {
/* container */
width: 500px;
height: 500px;
position: relative;
appearance: none;
background: grey;
padding: 10px 20px;
border: none;
color: white;
font-size: 1.2em;
outline: none;
overflow: hidden;
border-radius: 10px;
box-shadow: black;
}
.testsite span {
position: relative;
pointer-events: none;
}
.testsite::before {
--size: 0;
content: "";
position: absolute;
left: var(--x);
top: var(--y);
width: 32px;
height: 32px;
background-image: url("https://www.springbrookanimalcarecenter.com/blog/wp-content/uploads/2017/10/Springbrook_iStock-612247460-150x150.jpg");
animation-duration: 1s;
transform: translate(-50%, -50%);
}
<html>
<body>
<div class="testsite">
</div>
</body>
</html>
I have a input range that is style like a ruler and the range button that is styled as a opaque circle. It's working fine in Firefox and Safari but not in chrome.
I appreciate any suggestions how to make the code work in all browsers.
Here is the code:
obj_sukanya = {
slidePointPos: function(scope, fval, maxVal, scopeWidth) {
console.log('scope', scope)
var figure = fval,
max = maxVal;
var h = figure / max * (scopeWidth - scope.next().width()) + 'px';
scope.next().css({
left: h
}).removeClass('hidden');
scope.next().find('.dynamicVal').html(fval).attr('data-slideval', fval);
scope.parents('.active').find('.inputbox .amount input').val(fval);
},
bind: function(){
$(document).on('mousedown', '.pl-amount', function() {
$('.pl-amount').bind('change mousemove mouseup', function(){
obj_sukanya.slidePointPos($(this), $(this).val(), 10000000, 696);
});
});
}
}
$(document).ready(function(){
obj_sukanya.bind();
})
.rangelabel {
position: relative;
display: inline-block;
background: transparent url(https://img.etimg.com/photo/56312378.cms) no-repeat;
width: 830px;
margin-bottom: 18px;
}
input[type=range].pl-amount {
width: 696px;
height: 120px;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.rangeval{
position: absolute;
width: 110px;
font-size: 17px;
font-weight: 700;
top: 50%;
text-align: center;
margin-top: -15px;
margin-left: -52px;
z-index: 9;
background-color: #fff;
margin-left: 73px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="rangelabel" for="homeLoan1">
<input max="10000000" min="0" name="points" type="range" class="pl-amount" value="50000" step="50000" id="homeLoan1">
<span style="left: 123.06px;" class="rangeval"><span data-slideval="2100000" class="dynamicVal">2100000</span></span>
</label>
Since your code didn't work for me in any browser, i changed it a bit to reproduce the design from your image. I:
changed the scopeWidth in the script a bit and resized the input, both for perfectly fitting to the image and made the input completely opaque
gave the outer span the same height like its width and 50% border-radius plus boxshadow and made it partially opaque
gave the outer span a display: inline-flex (plus the centering) for aligning the inner span
defined for the outer span pointer-events: none for moving the input without the span as obstacle
With these changes it worked for me in any browser (inkl. firefox)...
Working example:
obj_sukanya = {
slidePointPos: function(scope, fval, maxVal, scopeWidth) {
var figure = fval,
max = maxVal;
var h = figure / max * (scopeWidth - scope.next().width()) + 'px';
scope.next().css({
left: h
}).removeClass('hidden');
scope.next().find('.dynamicVal').html(fval).attr('data-slideval', fval);
scope.parents('.active').find('.inputbox .amount input').val(fval);
},
bind: function() {
$(document).on('mousedown', '.pl-amount', function() {
$('.pl-amount').bind('change mousemove mouseup', function() {
obj_sukanya.slidePointPos($(this), $(this).val(), 10000000, 672);
});
});
}
}
$(document).ready(function() {
obj_sukanya.bind();
})
.rangelabel {
position: relative;
display: inline-block;
width: 830px;
margin-bottom: 18px;
background: transparent url(https://img.etimg.com/photo/56312378.cms) no-repeat;
}
input[type=range].pl-amount {
position: relative;
top: 0;
left: 120px;
width: 580px;
height: 120px;
padding: 0;
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.rangeval {
position: absolute;
top: 20%;
z-index: 9;
display: inline-flex;
justify-content: center;
align-items: center;
width: 110px;
height: 110px;
margin-top: -15px;
margin-left: 78px;
border-radius: 50%;
box-shadow: 0 0 6px 1px #ccc;
text-align: center;
font-size: 17px;
font-weight: 700;
background-color: #fff;
opacity: 0.7;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="rangelabel" for="homeLoan1">
<input id="homeLoan1" class="pl-amount" name="points" type="range" max="10000000" min="0" step="50000" value="50000">
<span class="rangeval" style="left: 123.06px;">
<span class="dynamicVal" data-slideval="2100000">2100000</span>
</span>
</label>
i am working on a small component i am facing issue to control moving div. i want to stop moving div when it reaches at left or right side or other words it should stop when left or right position == 0;
i am working on a small component i am facing issue to control moving div. i want to stop moving div when it reaches at left or right side or other words it should stop when left or right position == 0;
var leftDivWidth = $('#left').width()/2;
applyRect = $('#left').css('clip', 'rect(0px,' + leftDivWidth + 'px, auto,0px)');
var isResizing = false,
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
handle.on('mousedown', function (e) {
isResizing = true;
lastDownX = e.clientX;
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
var offsetRight = e.clientX - container.offset().left;
if($(handle).left == 0){
alert('working');
}
handle.css('left', offsetRight);
left.css('clip', 'rect(0px,' + offsetRight + 'px,auto,0px)')
}).on('mouseup', function (e) {
isResizing = false;
});
});
body, html {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: relative;
width: 100%;
margin: 0 auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
max-width: 1200px;
}
#container #left {
position: absolute;
width: 100%;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
/*clip: rect(0px, 50%, 484px, 0px);*/
}
#container #handle {
display: block;
width: 50px;
height: 50px;
background: green;
color: yellow;
z-index: 999;
font-size: 25px;
line-height: 50px;
text-align: center;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.fa{
font-family: fontawesome;
line-height: 52px;
}
#left img{
width: 100%;
position: absolute;
top: 0;
display: block;
}
#right img{
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
<div id="right">
<img src="https://images.wallpaperscraft.com/image/astronaut_neon_art_148365_1920x1080.jpg">
</div>
<!-- Left side -->
<div id="left">
<img src="https://images.wallpaperscraft.com/image/astronaut_ring_neon_156673_1920x1080.jpg">
</div>
<div class="innerDiv">
<div id="handle"> <i class="fa fa-arrows"></i> </div>
</div>
<!-- Right side -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Just match it with the parentOffsetWidth and to lock movement just create flag lockMovement and simply set it to true when the conditon meets.
var leftDivWidth = $('#left').width()/2;
applyRect = $('#left').css('clip', 'rect(0px,' + leftDivWidth + 'px, auto,0px)');
var isResizing = false;
var lockMovement = false;
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left'),
handle = $('#handle');
handle.on('mousedown', function (e) {
if(!lockMovement){
isResizing = true;
lastDownX = e.clientX;
}
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
var offsetRight = e.clientX - container.offset().left;
if($(handle)[0].offsetLeft >= $(handle)[0].offsetParent.offsetWidth){ //========> match the parent offsetwidth with the child offsetLeft
alert('working');
isResizing = false;
lastDownX=0;
lockMovement =true;
}
handle.css('left', offsetRight);
left.css('clip', 'rect(0px,' + offsetRight + 'px,auto,0px)')
}).on('mouseup', function (e) {
isResizing = false;
});
});
body, html {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#container {
position: relative;
width: 100%;
margin: 0 auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
max-width: 1200px;
}
#container #left {
position: absolute;
width: 100%;
right: 0;
top: 0;
bottom: 0;
z-index: 9;
/*clip: rect(0px, 50%, 484px, 0px);*/
}
#container #handle {
display: block;
width: 50px;
height: 50px;
background: green;
color: yellow;
z-index: 999;
font-size: 25px;
line-height: 50px;
text-align: center;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.fa{
font-family: fontawesome;
line-height: 52px;
}
#left img{
width: 100%;
position: absolute;
top: 0;
display: block;
}
#right img{
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="container">
<div id="right">
<img src="https://images.wallpaperscraft.com/image/astronaut_neon_art_148365_1920x1080.jpg">
</div>
<!-- Left side -->
<div id="left">
<img src="https://images.wallpaperscraft.com/image/astronaut_ring_neon_156673_1920x1080.jpg">
</div>
<div class="innerDiv">
<div id="handle"> <i class="fa fa-arrows"></i> </div>
</div>
<!-- Right side -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Just add offset() to if-statement:
if($(handle).left <= 0){
alert('working');
}
if($(handle).offset().left <= 0){
alert('working');
}
And it's better to use <= than strict == equation.
I am currently building a modified cursor for my portfolio-website. Unfortunately, my cursor lags when I try to scroll and move the cursor. However, it works when I remove all the other elements from HTML, CSS, and JavaScript and ONLY have the code concerning my cursor (https://codepen.io/djaisdjasidj/pen/RwNvePZ).
// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
e.stopPropagation();
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');
for (var i = 0; i < clickableCursor.length; i++) {
clickableCursor[i].addEventListener('mouseover', () => {
cursor.style.height = "80px";
cursor.style.width = "80px";
cursor.style.animation = "cursorAnimation 5s linear infinite";
cursor.style.background = "white";
});
clickableCursor[i].addEventListener('mouseout', () => {
cursor.style.height = "40px";
cursor.style.width = "40px";
cursor.style.animation = "none";
cursor.style.border = "2px solid white";
cursor.style.background = "none";
});
}
body {
cursor: none;
}
.container {
height: 3000px;
width: 100%;
position: relative;
background: orange;
}
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
#cursor::before {
content: '';
position: absolute;
height: 7px;
width: 7px;
border-radius: 100%;
background-color: white;
}
.clickableCursor {
font-size: 50px;
color: white;
position: fixed;
background: black;
padding: 50px
}
.one {
top: 50px;
left: 50px;
}
.two {
top: 50px;
right: 50px;
}
<div class="container">
<div id="cursor"></div>
<p class="clickableCursor one"> Hello </p>
</div>
CSS for my Cursor:
#cursor {
backface-visibility: hidden;
z-index: 1000000000;
position: fixed;
width: 40px;
height: 40px;
border: 2px solid white;
transition: .1s;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
transition-duration: 100ms;
transition-timing-function: ease-out;
}
My question is - how do I prevent this cursor 'lag' when I have a bigger HTML, CSS, and JavaScript file?
I had the same problem and i solved it with this code :
(hope it can help you or other developers)
$(window).ready(function(){
let mouseX = 0;
let mouseY = 0;
let xp = 0;
let yp = 0;
$(document).mousemove(function(e){
$(".custom__cursor__inner").css({
transform: 'translate(' + (e.clientX - 3.25) + 'px, ' + (e.clientY - 3.25) + 'px)'
});
mouseX = e.clientX - 10;
mouseY = e.clientY - 10;
});
setInterval(function(){
xp += ((mouseX - xp)/6);
yp += ((mouseY - yp)/6);
$(".custom__cursor__outer").css({transform: 'translateX('+ (xp - 15) +'px) translateY('+ (yp - 15) +'px)'} );
}, 10);
})
*{
cursor: none;
}
.custom__cursor__inner{
height: 7.5px;
width: 7.5px;
position: fixed;
transform: translate(0px, 0px);
background-color: #F7D883;
border-radius: 50%;
transition: height .3s cubic-bezier(0.46,0.03,0.52,0.96), width .3s cubic-bezier(0.46,0.03,0.52,0.96);
z-index: 5000;
pointer-events: none;
}
.custom__cursor__outer{
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #0F1928;
background-color: transparent;
position: fixed;
z-index: 5000;
transform: translate(0px, 0px);
pointer-events: none;
opacity: 0.4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom__cursor__outer">
</div>
<div class="custom__cursor__inner">
</div>
The lag happens because you are using a transition to move the cursor to the current mouse location, explicitly stating that it should be lagging behind 100ms.
You should only apply the CSS transition on the elements and attributes that you want to animate, but not the location of the cursor.
Use the transition-property rule to define which attributes should be "transitioned" or use the transition shorthand syntax to explicitly specify the attribute names like #Tyler Roper does in his comment.
I can't get cursor to be e-resize when mousedown and mousemove events are happening.
I did somehow manage to do that, but then it didn't work anymore and I forgot how I got it to work.
Here is example in jsFiddle , when you drag handle bar it cursor does not change to e-resize as it should.
I'm thinking there is some kind of incorrect cursor: e-resize assignment.
Here is current css:
.container {
width: 500px;
height: 300px;
box-sizing: border-box;
}
.splitter {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.splitter.vertical .leftPane {
position: absolute;
height: 100%;
top: 0;
left: 0;
bottom: 0;
overflow: hidden;
background-color: blue;
margin-right: 5px;
right: 25%;
z-index: 1;
}
.splitter.vertical .rightPane {
position: absolute;
height: 100%;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-color: red;
left: auto;
width: 25%;
z-index: 1;
}
.splitter.vertical .handleBar {
position: absolute;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
background-color: green;
right: 25%;
width: 5px;
margin-left: -5px;
z-index: 1;
cursor: e-resize;
}
.splitter.active .handleClone {
position: absolute;
top: 0;
bottom: 0;
background-color: green;
width: 5px;
cursor: e-resize;
z-index: 3;
}
.splitter .content-overlay {
opacity: 0.5;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
display: none;
background-color: black;
}
.splitter.active .content-overlay {
display: block;
}
.splitter.active {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: e-resize;
}
.splitter.hide-right .handleBar {
display: none !important;
}
.splitter.hide-right .rightPane {
display: none !important;
}
.splitter.hide-right .leftPane {
right: 0 !important;
margin-right: 0 !important;
}
The issue is that Chrome thinks that you want to select any text that might be present so it changes the cursor as though you are highlighting text. When selection starts, you can prevent the default action, which includes changing the cursor.
I added this line:
container[0].onselectstart = function(e){e.preventDefault();return false;}
Move it where you would like but it works.
See the updated fiddle
Found on the jQuery forum
Edit:
I would move that line into the container.on('mousemove') for clarity
container.on('mousemove', function (e) {
var rightPos = container.width() - (e.pageX - container.offset().left);
this.onselectstart = function(e){e.preventDefault();return false;}
handleClone.css({
right: rightPos - 2
});
})
Have you tried using javascript to solve the problem? Do the event handlers onmousedown and onmouseup on the element and make them run a function like this one:
function mousecursor() {
document.getElementById("mygreatid").style.cursor = "eResize";
}
Hope that helps :)