How can I avoid the automatic left alignment in rotation? - javascript

I am trying to move and rotate the object in the direction of the mouse click. Unfortunately during the first click object automatically align itself to left. It works perfectly after the first click but it doesn't work during the first click. I couldn't find out why it goes automatically to upper left corner. How can I fix that? Here is the code:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
transform: translate3d(200px, 100px, 0);
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>

Because initially the transform is set in the CSS thus you cannot append the rotation to it and you will simply override it. Make it inline using JS and it will work fine. It will behave like the next ones since later you will be adding all the transform inline:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
theThing.style.transform="translate3d(200px, 100px, 0)";
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
/*transform: translate3d(200px, 100px, 0);*/
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>

Related

Keep mouse within a div which mouves if mouse toches inside border

I'm trying to build a sort of crosshair which is surrounded by a circle that zooms an image to shoot more precisely. The behavior I want is that crosshair which is also my mouse pointer can move inside of the circle and once it touches the edge of my circle from the inside it moves it to the wanted position. For now, I can only move my circle having crosshair fixed in the middle. Could you please help me to have it moving within my circle?
jQuery(document).ready(function() {
var onBoxX = 0, onBoxY = 0;
var circleWidth = 120;
var circleHeight = 120;
var circleBorderWidth = 1;
var boxWidth = 500;
var boxHeight = 500;
var circleLeft = 0;
var circleTop = 0;
$(box).mousemove(function(event){
// console.log(event);
onBoxX = event.clientX;
onBoxY = event.clientY;
circleLeft = (onBoxX - circleWidth / 2 - circleBorderWidth)/ boxWidth * 100
circleTop = (onBoxY - circleHeight / 2 - circleBorderWidth)/ boxWidth *100
$("#circle").css({left: circleLeft+'%', top: circleTop+'%'});
});
$(circle).mousemove(function(event){
console.log("circle mousemove",event.offsetX, event.offsetY);
});
})
body{
margin:0px;
padding:0px;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
height:500px;
background:#000000;
position:relative;
cursor:crosshair;
overflow: hidden;
}
.circle {
position: relative;
background: black;
border: solid 1px #ccc;
width:120px;
height:120px;
border-radius: 50%;
}
.crosshair{
position: absolute;
background-color: white;
width:20px;
height:20px;
left:41.5%;
top:41.5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box" class="box">
<div id="circle" class="circle">
<div id="crosshair" class="crosshair"></div>
</div>
</div>
I refactored it a bit and added code to detect when cursor is outside of circle.
jQuery(document).ready(function () {
var cursorX = 0,
cursorY = 0;
var circleRadius = 60;
var circleX = 0;
var circleY = 0;
function updateCursorCoords(x, y) {
cursorX = x;
cursorY = y;
}
function updateCircleCoords() {
// First define if cursor is inside circle
var distX = Math.abs(circleX + circleRadius - cursorX);
var distY = Math.abs(circleY + circleRadius - cursorY);
var dist = Math.sqrt(Math.pow(distY, 2) + Math.pow(distX, 2));
var cursorIsInside = dist < circleRadius;
// And update its position only when cursor is outside of circle
if (!cursorIsInside) {
circleX = cursorX - circleRadius;
circleY = cursorY - circleRadius;
}
}
function drawCircle() {
$("#circle").css({ left: circleX + "px", top: circleY + "px" });
}
$(box).mousemove(function (event) {
updateCursorCoords(event.clientX, event.clientY);
updateCircleCoords();
drawCircle();
});
});
body {
margin:0px;
padding:0px;
font-family: 'Roboto', sans-serif;
}
.box {
width:500px;
height:500px;
background:#000000;
position:relative;
cursor:crosshair;
overflow: hidden;
}
.circle {
position: relative;
background: black;
border: solid 1px #ccc;
width:120px;
height:120px;
border-radius: 50%;
box-sizing: border-box;
}
.crosshair {
position: absolute;
background-color: white;
width:20px;
height:20px;
left:41.5%;
top:41.5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box" class="box">
<div id="circle" class="circle">
<div id="crosshair" class="crosshair"></div>
</div>
</div>

Custom cursors in HTML

I'm creating a custom cursor for a site. I've gotten two divs centered to the cursor when the mouse moves but when I hover on an anchor tag the position of the background cursor is off. I've tried using pageX and pageY to center it in the for loop but it doesn't seem to work. Help?
Here is my HTML:
<div class="cursor"></div>
<div class="cursor-bg"></div>
CSS:
.cursor{
height:10px;
width:10px;
border-radius:50%;
position:absolute;
background: #fff;
z-index: 100;
}
.cursor-bg{
height:30px;
:30px;
border-radius:50%;
position:absolute;
background: $lightCursor-bg;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
.expand{
width: 100px;
height: 100px;
position: absolute;
border:solid 1px #fff;
background: rgba(255,255,255, 0);
}
JS:
(function(){
var cursor = document.querySelector('.cursor');
var cursorBg = document.querySelector('.cursor-bg');
var navLinks = document.querySelectorAll('a');
document.addEventListener('mousemove', e => {
cursor.style.left = (e.pageX - 5) + 'px';
cursor.style.top = (e.pageY - 5) + 'px';
cursorBg.style.left = (e.pageX - 15) + 'px';
cursorBg.style.top = (e.pageY -15) + 'px';
});
for (var i = 0; i < navLinks.length; i++) {
var singleLink = navLinks[i];
singleLink.addEventListener('mouseover', e => {
cursorBg.classList.add("expand");
cursorBg.style.left = (e.pageX - 50) + 'px';
cursorBg.style.left = (e.pageY - 50) + 'px';
})
singleLink.addEventListener('mouseout', e => {
cursorBg.classList.remove("expand");
})
}
})();
You can use the css cursor property for this:
cursor: url(https://example.com/your-image.png), auto
Demo:
div {
width: 200px;
height: 200px;
background: dodgerblue;
padding: 10px;
}
.custom-cursor {
background: red;
cursor: url('https://i.imgur.com/ng6jKDk.png'), auto
}
p {
font-family: sans-serif;
text-align: center;
font-size: 36px;
}
<div class="custom-cursor">
<p>Custom Cursor in this div only!</p>
</div>
<div>
<p>Not in this div!</p>
</div>
If you want the cursor to apply to the entire page, just add the css to the body.
CSS cursor property

How to rotate a box div while dragging an element using jquery

I understand that we need to use transform: rotate(ndeg); in order to rotate a specific element in CSS. In this case, I want to do it dynamically. Using jQuery, I want to rotate the box/container div when the user drags the handle (the red background) on n degrees as the user wishes. Is it possible in jQuery?
body {
padding: 50px;
}
.box_element {
border: 1px solid black;
width: 200px;
height: 200px;
position: relative;
z-index: -1;
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
}
<body>
<div class="box_element">
THIS IS TEST
<div class="handle"></div>
</div>
</body>
Here you need to write few code to make it possible, try live code https://codepen.io/libin-prasanth/pen/xxxzbLg
var stop,
active = false,
angle = 0,
rotation = 0,
startAngle = 0,
center = {
x: 0,
y: 0
},
R2D = 180 / Math.PI;
function start(e) {
e.preventDefault();
var bb = this.getBoundingClientRect(),
t = bb.top,
l = bb.left,
h = bb.height,
w = bb.width,
x,
y;
center = {
x: l + w / 2,
y: t + h / 2
};
x = e.clientX - center.x;
y = e.clientY - center.y;
startAngle = R2D * Math.atan2(y, x);
return (active = true);
}
function rotate(e) {
e.preventDefault();
var x = e.clientX - center.x,
y = e.clientY - center.y,
d = R2D * Math.atan2(y, x);
rotation = d - startAngle;
return (rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)");
}
function stop() {
angle += rotation;
return (active = false);
}
rot = document.getElementById("draggable");
rot.addEventListener("mousedown", start, false);
window.addEventListener("mousemove", function(event) {
if (active === true) {
event.preventDefault();
rotate(event);
}
});
window.addEventListener("mouseup", function(event) {
event.preventDefault();
stop(event);
});
#draggable {
left: 50px;
top: 50px;
width: 100px;
height: 100px;
position: relative;
border: 1px solid #000;
}
#draggable:before{
content: "";
position: absolute;
bottom: -5px;
right: -5px;
width: 10px;
height: 10px;
background: #f00;
}
<div id="draggable">
</div>
You can make use of a css-variable and then change the value of the variable when clicked.
const box_element = document.getElementById('box_element');
const handle = document.getElementById('handle');
handle.addEventListener('click', function() {
let currentVal = getComputedStyle(box_element).getPropertyValue('--rotate_deg');
box_element.style.setProperty(
'--rotate_deg', ((parseInt(currentVal.replace('deg', '')) + 90) % 360) + 'deg');
});
:root {
--rotate_deg: 0deg;
}
.box_element {
margin: 1em;
border: 1px solid black;
width: 100px;
height: 100px;
position: relative;
z-index: -1;
transform: rotate(var(--rotate_deg))
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
cursor: pointer;
}
<div class="box_element" id="box_element">
THIS IS TEST
<div class="handle" id="handle"></div>
</div>

How to change border size dynamically of a circle using css and JS?

I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }
.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}
<div class="circle"></div>

Trouble changing css `top` value to fixed element with js

Trying to move a position:fixed div on scroll by changing the top: css value in javascript. The div won't move though, not sure why.
html:
<div id="red">
<div id="blue"></div>
</div>
css:
#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}
js:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(document.body.scrollTop / 10));
//console.log("yPos = " + yPos); //output is correct
document.getElementById('blue').style.top = yPos + 'px';
//document.getElementById('blue').setAttribute('top',yPos); //also tried this
});
https://jsfiddle.net/akzx43yL/
Why isn't the top css value changing and how can I get it to do so? No jquery please.
Two things:
Instead of document.documentElement.scrollTop, you should use window.pageYOffset (scrollTop doesn't play nicely in Chrome).
You need to add a unit of measurement after you update top; values other than 0 should have px appened to them.
This can be seen in the following:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(window.pageYOffset / 10));
document.getElementById('blue').style.top = yPos + "px";
// Optionally log the `top` value
//console.log(document.getElementById('blue').style.top);
});
#red {
position: relative;
float: left;
width: 100%;
height: 1000px;
background: rgba(255, 0, 0, 0.2);
border: solid 2px #f0f;
}
#blue {
position: absolute;
top: -10px;
left: 0;
width: 100vw;
height: 50vh;
background: rgba(0, 0, 255, 0.2);
border: solid 2px #0ff;
}
<div id="red">
<div id="blue"></div>
</div>
Hope this helps! :)
If you check your console, you will be see your console.log("yPos = " + yPos) is always 0 you most update your code as follow:
window.addEventListener('scroll', function() {
var yPos = -(Math.floor(document.documentElement.scrollTop / 10));
console.log("yPos = " + yPos);
document.getElementById('blue').style.top = yPos + "px";
});
Tip:
Ways to get srollTop (pure js):
var top = window.pageYOffset || document.documentElement.scrollTop;
This is what worked for me:
document.getElementById('blue').style.top = yPos + "px";

Categories