How to find center of native cursor and align the custom cursor to it?
I have created a custom cursor using two div elements, both of them are circles. First one is the main cursor and other one is its follower. They use jQuery to track mouse coordinates. My problem is, when the cursor is not moving I want to make both look like concentric circles(both circle have same center) but they are not at center. I have tried it using (e.PageX -(offset - radius of circle)) but it doesn't return any value.
I am not able to explain this properly sorry new here, I have linked the codepen below:
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});
Codepen
javascript jquery html css
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
add a comment |
I have created a custom cursor using two div elements, both of them are circles. First one is the main cursor and other one is its follower. They use jQuery to track mouse coordinates. My problem is, when the cursor is not moving I want to make both look like concentric circles(both circle have same center) but they are not at center. I have tried it using (e.PageX -(offset - radius of circle)) but it doesn't return any value.
I am not able to explain this properly sorry new here, I have linked the codepen below:
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});
Codepen
javascript jquery html css
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
Can you show what you tried? It works for me when I change the positions in the codepen to, e.g.((e.pageX-6) + 'px').
– Mr Lister
Nov 23 '18 at 20:44
@MrLister Yes it works when you subtract pixels but I was looking for a more perfect way. I tried subtracting the (offset - radius) from the e.Page coordinates each. But it doesn't return any values, it returns NaN. Anyways got the solution below, Thanks for contributing
– Ryuzaki98
Nov 24 '18 at 4:56
add a comment |
I have created a custom cursor using two div elements, both of them are circles. First one is the main cursor and other one is its follower. They use jQuery to track mouse coordinates. My problem is, when the cursor is not moving I want to make both look like concentric circles(both circle have same center) but they are not at center. I have tried it using (e.PageX -(offset - radius of circle)) but it doesn't return any value.
I am not able to explain this properly sorry new here, I have linked the codepen below:
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});
Codepen
javascript jquery html css
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
I have created a custom cursor using two div elements, both of them are circles. First one is the main cursor and other one is its follower. They use jQuery to track mouse coordinates. My problem is, when the cursor is not moving I want to make both look like concentric circles(both circle have same center) but they are not at center. I have tried it using (e.PageX -(offset - radius of circle)) but it doesn't return any value.
I am not able to explain this properly sorry new here, I have linked the codepen below:
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});
Codepen
javascript jquery html css
javascript jquery html css
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
asked Nov 23 '18 at 20:28
Ryuzaki98Ryuzaki98
173
173
Can you show what you tried? It works for me when I change the positions in the codepen to, e.g.((e.pageX-6) + 'px').
– Mr Lister
Nov 23 '18 at 20:44
@MrLister Yes it works when you subtract pixels but I was looking for a more perfect way. I tried subtracting the (offset - radius) from the e.Page coordinates each. But it doesn't return any values, it returns NaN. Anyways got the solution below, Thanks for contributing
– Ryuzaki98
Nov 24 '18 at 4:56
add a comment |
Can you show what you tried? It works for me when I change the positions in the codepen to, e.g.((e.pageX-6) + 'px').
– Mr Lister
Nov 23 '18 at 20:44
@MrLister Yes it works when you subtract pixels but I was looking for a more perfect way. I tried subtracting the (offset - radius) from the e.Page coordinates each. But it doesn't return any values, it returns NaN. Anyways got the solution below, Thanks for contributing
– Ryuzaki98
Nov 24 '18 at 4:56
Can you show what you tried? It works for me when I change the positions in the codepen to, e.g.
((e.pageX-6) + 'px').– Mr Lister
Nov 23 '18 at 20:44
Can you show what you tried? It works for me when I change the positions in the codepen to, e.g.
((e.pageX-6) + 'px').– Mr Lister
Nov 23 '18 at 20:44
@MrLister Yes it works when you subtract pixels but I was looking for a more perfect way. I tried subtracting the (offset - radius) from the e.Page coordinates each. But it doesn't return any values, it returns NaN. Anyways got the solution below, Thanks for contributing
– Ryuzaki98
Nov 24 '18 at 4:56
@MrLister Yes it works when you subtract pixels but I was looking for a more perfect way. I tried subtracting the (offset - radius) from the e.Page coordinates each. But it doesn't return any values, it returns NaN. Anyways got the solution below, Thanks for contributing
– Ryuzaki98
Nov 24 '18 at 4:56
add a comment |
1 Answer
1
active
oldest
votes
The thing is you are getting the left and top of the cursor's point to set the position of both circle and one is smaller than other so they are being painted from that exact position
If you want to center the circle to the pointer of the cursor use transform: translate(-50%, -50%); in both element it will move the circles half its size in both directions (center)
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});*{
/* cursor:none; */
}
body{
height: 300vh;
}
.cursor{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%); //new
}
.cursor-follower{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
opacity: 0.4;
border-radius: 50%;
background-color: #000;
transition: 0.2s ease-out;
pointer-events: none;
will-change: all;
transform: translate(-50%, -50%); //new
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
<div class="cursor-follower" id="cursorFollow"></div>Here a working pen
If you want a diferente centering please add an img of what is your desired result
answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
Oh yes this is what I wanted, Thanks a lot. Simple yet clever solution.
– Ryuzaki98
Nov 24 '18 at 4:54
Why is it laggy by the way? I used will-change to the cursorFollow, I guess that should make it smooth, right ??
– Ryuzaki98
Nov 24 '18 at 5:00
@Ryuzaki98 it is laggy because thetransition: 0.2s ease-out;that makes it take 0.2 seconds to reach the cursor and theease-outmake it fast/abrupt at the beginning, slow at the end, check this css-tricks.com/ease-out-in-ease-in-out to a better understand intransition-timing-functionCan you please upvote the answer too?
– Yandy_Viera
Nov 24 '18 at 18:29
Yes i saw that i have put the transition on purpose that issue is solved it was just my computer's problem and yes i have upvoted the answer but i have reputation less than 15 so it isn't visible
– Ryuzaki98
Nov 25 '18 at 17:40
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452615%2fhow-to-find-center-of-native-cursor-and-align-the-custom-cursor-to-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The thing is you are getting the left and top of the cursor's point to set the position of both circle and one is smaller than other so they are being painted from that exact position
If you want to center the circle to the pointer of the cursor use transform: translate(-50%, -50%); in both element it will move the circles half its size in both directions (center)
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});*{
/* cursor:none; */
}
body{
height: 300vh;
}
.cursor{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%); //new
}
.cursor-follower{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
opacity: 0.4;
border-radius: 50%;
background-color: #000;
transition: 0.2s ease-out;
pointer-events: none;
will-change: all;
transform: translate(-50%, -50%); //new
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
<div class="cursor-follower" id="cursorFollow"></div>Here a working pen
If you want a diferente centering please add an img of what is your desired result
answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
Oh yes this is what I wanted, Thanks a lot. Simple yet clever solution.
– Ryuzaki98
Nov 24 '18 at 4:54
Why is it laggy by the way? I used will-change to the cursorFollow, I guess that should make it smooth, right ??
– Ryuzaki98
Nov 24 '18 at 5:00
@Ryuzaki98 it is laggy because thetransition: 0.2s ease-out;that makes it take 0.2 seconds to reach the cursor and theease-outmake it fast/abrupt at the beginning, slow at the end, check this css-tricks.com/ease-out-in-ease-in-out to a better understand intransition-timing-functionCan you please upvote the answer too?
– Yandy_Viera
Nov 24 '18 at 18:29
Yes i saw that i have put the transition on purpose that issue is solved it was just my computer's problem and yes i have upvoted the answer but i have reputation less than 15 so it isn't visible
– Ryuzaki98
Nov 25 '18 at 17:40
add a comment |
The thing is you are getting the left and top of the cursor's point to set the position of both circle and one is smaller than other so they are being painted from that exact position
If you want to center the circle to the pointer of the cursor use transform: translate(-50%, -50%); in both element it will move the circles half its size in both directions (center)
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});*{
/* cursor:none; */
}
body{
height: 300vh;
}
.cursor{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%); //new
}
.cursor-follower{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
opacity: 0.4;
border-radius: 50%;
background-color: #000;
transition: 0.2s ease-out;
pointer-events: none;
will-change: all;
transform: translate(-50%, -50%); //new
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
<div class="cursor-follower" id="cursorFollow"></div>Here a working pen
If you want a diferente centering please add an img of what is your desired result
answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
Oh yes this is what I wanted, Thanks a lot. Simple yet clever solution.
– Ryuzaki98
Nov 24 '18 at 4:54
Why is it laggy by the way? I used will-change to the cursorFollow, I guess that should make it smooth, right ??
– Ryuzaki98
Nov 24 '18 at 5:00
@Ryuzaki98 it is laggy because thetransition: 0.2s ease-out;that makes it take 0.2 seconds to reach the cursor and theease-outmake it fast/abrupt at the beginning, slow at the end, check this css-tricks.com/ease-out-in-ease-in-out to a better understand intransition-timing-functionCan you please upvote the answer too?
– Yandy_Viera
Nov 24 '18 at 18:29
Yes i saw that i have put the transition on purpose that issue is solved it was just my computer's problem and yes i have upvoted the answer but i have reputation less than 15 so it isn't visible
– Ryuzaki98
Nov 25 '18 at 17:40
add a comment |
The thing is you are getting the left and top of the cursor's point to set the position of both circle and one is smaller than other so they are being painted from that exact position
If you want to center the circle to the pointer of the cursor use transform: translate(-50%, -50%); in both element it will move the circles half its size in both directions (center)
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});*{
/* cursor:none; */
}
body{
height: 300vh;
}
.cursor{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%); //new
}
.cursor-follower{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
opacity: 0.4;
border-radius: 50%;
background-color: #000;
transition: 0.2s ease-out;
pointer-events: none;
will-change: all;
transform: translate(-50%, -50%); //new
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
<div class="cursor-follower" id="cursorFollow"></div>Here a working pen
If you want a diferente centering please add an img of what is your desired result
answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
The thing is you are getting the left and top of the cursor's point to set the position of both circle and one is smaller than other so they are being painted from that exact position
If you want to center the circle to the pointer of the cursor use transform: translate(-50%, -50%); in both element it will move the circles half its size in both directions (center)
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});*{
/* cursor:none; */
}
body{
height: 300vh;
}
.cursor{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%); //new
}
.cursor-follower{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
opacity: 0.4;
border-radius: 50%;
background-color: #000;
transition: 0.2s ease-out;
pointer-events: none;
will-change: all;
transform: translate(-50%, -50%); //new
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
<div class="cursor-follower" id="cursorFollow"></div>Here a working pen
If you want a diferente centering please add an img of what is your desired result
$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});*{
/* cursor:none; */
}
body{
height: 300vh;
}
.cursor{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%); //new
}
.cursor-follower{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
opacity: 0.4;
border-radius: 50%;
background-color: #000;
transition: 0.2s ease-out;
pointer-events: none;
will-change: all;
transform: translate(-50%, -50%); //new
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
<div class="cursor-follower" id="cursorFollow"></div>$(document).mousemove(function(e){
$('#cursor').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
$('#cursorFollow').css({
"left" : (e.pageX + 'px'),
"top" : (e.pageY + 'px')
});
});*{
/* cursor:none; */
}
body{
height: 300vh;
}
.cursor{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #000;
transform: translate(-50%, -50%); //new
}
.cursor-follower{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
opacity: 0.4;
border-radius: 50%;
background-color: #000;
transition: 0.2s ease-out;
pointer-events: none;
will-change: all;
transform: translate(-50%, -50%); //new
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
<div class="cursor-follower" id="cursorFollow"></div>answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
edited Nov 23 '18 at 21:03
answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
answered Nov 23 '18 at 20:49
Yandy_VieraYandy_Viera
3,49531237
3,49531237
Oh yes this is what I wanted, Thanks a lot. Simple yet clever solution.
– Ryuzaki98
Nov 24 '18 at 4:54
Why is it laggy by the way? I used will-change to the cursorFollow, I guess that should make it smooth, right ??
– Ryuzaki98
Nov 24 '18 at 5:00
@Ryuzaki98 it is laggy because thetransition: 0.2s ease-out;that makes it take 0.2 seconds to reach the cursor and theease-outmake it fast/abrupt at the beginning, slow at the end, check this css-tricks.com/ease-out-in-ease-in-out to a better understand intransition-timing-functionCan you please upvote the answer too?
– Yandy_Viera
Nov 24 '18 at 18:29
Yes i saw that i have put the transition on purpose that issue is solved it was just my computer's problem and yes i have upvoted the answer but i have reputation less than 15 so it isn't visible
– Ryuzaki98
Nov 25 '18 at 17:40
add a comment |
Oh yes this is what I wanted, Thanks a lot. Simple yet clever solution.
– Ryuzaki98
Nov 24 '18 at 4:54
Why is it laggy by the way? I used will-change to the cursorFollow, I guess that should make it smooth, right ??
– Ryuzaki98
Nov 24 '18 at 5:00
@Ryuzaki98 it is laggy because thetransition: 0.2s ease-out;that makes it take 0.2 seconds to reach the cursor and theease-outmake it fast/abrupt at the beginning, slow at the end, check this css-tricks.com/ease-out-in-ease-in-out to a better understand intransition-timing-functionCan you please upvote the answer too?
– Yandy_Viera
Nov 24 '18 at 18:29
Yes i saw that i have put the transition on purpose that issue is solved it was just my computer's problem and yes i have upvoted the answer but i have reputation less than 15 so it isn't visible
– Ryuzaki98
Nov 25 '18 at 17:40
Oh yes this is what I wanted, Thanks a lot. Simple yet clever solution.
– Ryuzaki98
Nov 24 '18 at 4:54
Oh yes this is what I wanted, Thanks a lot. Simple yet clever solution.
– Ryuzaki98
Nov 24 '18 at 4:54
Why is it laggy by the way? I used will-change to the cursorFollow, I guess that should make it smooth, right ??
– Ryuzaki98
Nov 24 '18 at 5:00
Why is it laggy by the way? I used will-change to the cursorFollow, I guess that should make it smooth, right ??
– Ryuzaki98
Nov 24 '18 at 5:00
@Ryuzaki98 it is laggy because the
transition: 0.2s ease-out; that makes it take 0.2 seconds to reach the cursor and the ease-out make it fast/abrupt at the beginning, slow at the end, check this css-tricks.com/ease-out-in-ease-in-out to a better understand in transition-timing-function Can you please upvote the answer too?– Yandy_Viera
Nov 24 '18 at 18:29
@Ryuzaki98 it is laggy because the
transition: 0.2s ease-out; that makes it take 0.2 seconds to reach the cursor and the ease-out make it fast/abrupt at the beginning, slow at the end, check this css-tricks.com/ease-out-in-ease-in-out to a better understand in transition-timing-function Can you please upvote the answer too?– Yandy_Viera
Nov 24 '18 at 18:29
Yes i saw that i have put the transition on purpose that issue is solved it was just my computer's problem and yes i have upvoted the answer but i have reputation less than 15 so it isn't visible
– Ryuzaki98
Nov 25 '18 at 17:40
Yes i saw that i have put the transition on purpose that issue is solved it was just my computer's problem and yes i have upvoted the answer but i have reputation less than 15 so it isn't visible
– Ryuzaki98
Nov 25 '18 at 17:40
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452615%2fhow-to-find-center-of-native-cursor-and-align-the-custom-cursor-to-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you show what you tried? It works for me when I change the positions in the codepen to, e.g.
((e.pageX-6) + 'px').– Mr Lister
Nov 23 '18 at 20:44
@MrLister Yes it works when you subtract pixels but I was looking for a more perfect way. I tried subtracting the (offset - radius) from the e.Page coordinates each. But it doesn't return any values, it returns NaN. Anyways got the solution below, Thanks for contributing
– Ryuzaki98
Nov 24 '18 at 4:56