I am trying to have this circle follow the cursor. However I need the cursor to fade in after the user clicks a button, when this happens though the circle won't be centered on the cursor.
The first code snippet shows the desired result in terms of the circle following the cursor correctly and being centered.The second snippet shows the desired fade in on button click but as you can see the circle won't be centered on the cursor
First code snippet:
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: red;
z-index: 200;
}
<div class="test"></div>
Second code snippet:
$("#myBtn").click(function(){
$('.test').fadeIn();
});
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
z-index: 200;
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>
In the second example, on page init the .test div has display: none, so its height and width are 0. You must calculate them after the fadeIn to get the correct result.
You can also add the mousemove listener after fadeIn:
$("#myBtn").click(function() {
$('.test').fadeIn('slow', function() {
const cursor = document.querySelector('.test')
, { width, height } = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
});
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
z-index: 200;
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>
Another, perhaps simpler, alternative is just to call fadeOut() (with a duration of 0) on the .test div on page load, instead of using display:none
$("#myBtn").click(function(){
$('.test').fadeIn();
});
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
$('.test').fadeOut(0);
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>
Related
I need to increase height actually to increase bottom and top of div each for 25px also left and right side each for 25px.I don't now is that even possible.
So this is just example but it is similar to my code:
function increaseDiv() {
var myDiv = document.querySelector(".box")
var currWidth = myDiv.clientWidth;
myDiv.style.width = currWidth + 100 + "px";
}
.box {
width: 300px;
height: 200px;
position: absolute;
left: 100px;
background: black;
}
<div class="box"></div>
<button onclick="increaseDiv()">Click</button>
Here is demo https://jsfiddle.net/SutonJ/0pdwm39a/14/
The problem is that position of your div are related to left side and this is why it looks like you increase only the right side; try to add positioning with transform by center or make it by flex(align-items + justify-content)
.box {
width: 300px;
height: 200px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background: black;
}
If I am understanding you correctly, I think if you changed
var currWidth = myDiv.clientWidth;
myDiv.style.width = currWidth + 100 + "px";
to
var currWidth = myDiv.getBoundingClientRect().width;
myDiv.style.width = currWidth + 50 + "px";
and also added
var currHeight = myDiv.getBoundingClientRect().height;
myDiv.style.height = currHeight + 50 + "px";
I also noticed that your div is using absolute positioning, so you may also need to offset the left and top according to the size change. If you are getting an issue with the actual position when the size changes let me know.
What about CSS scale?
That will keep the actual position of the element and expand it in all directions, unless you specify a transform-origin value.
Edited with an ever growing effect...
let myDiv = document.querySelector(".box");
let orgiSize = myDiv.getBoundingClientRect().width;
let increments = 0;
function increaseDiv() {
increments += 50; // That is 25px on both sides...
// Make the math here
var percentage = Math.floor((orgiSize + increments) / orgiSize * 100) / 100
console.log(percentage);
myDiv.style.transform = `scale(${percentage})`; // That is a percentage value
}
.box {
width: 300px;
height: 200px;
position: absolute;
left: 100px;
background: black;
}
/* for the demo */
button {
position: absolute;
z-index: 9999;
}
<div class="box"></div>
<button onclick="increaseDiv()">Click</button>
I am trying to expand a child element to the very top of its parent with the following code. However, the text disappears after a while of scrolling downward in the child element. How do I fix this?
function setHeight() {
var panel = document.getElementById("panel");
var container = document.getElementById("container");
var panelHeight = container.offsetHeight;
var y = panel.scrollTop;
// YOU MUST SET THE PERCENTAGE, OR A MAX HEIGHT
maxHeight = panelHeight * 0.9;
var targetHeight = Math.min(maxHeight, 0.7 * panelHeight + y);
panel.style.height = targetHeight + "px";
document.getElementById("panelContent").style.marginTop = Math.min(y, panelHeight - maxHeight) + "px";
}
document.getElementById('panel').addEventListener("scroll", setHeight);
#container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: red;
}
#panel {
position: fixed;
width: 100%;
height: 70%;
bottom: 0;
background-color: green;
overflow-y: scroll;
}
<div id="container">
Scroll up to here
<div id="panel">
<div id="panelContent">
As user scroll downs here in this div, expand this div to the top but only as much as the user has scrolled down: asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasd
</div>
</div>
</div>
https://jsfiddle.net/1ekpx3sd/
I've created a button, when you hover over it a div with a background image enlarges. The background should follow the cursor's movements. Meaning that the background image follows your cursor as you hover over the button.
When I hover over the bottom right part of the button, the image will zoom in to the top left before moving to the cursor's location. Check out the example below to see what I mean. I'd like to make it zoom directly to the cursor's location, any ideas?
var imgZoomIn = 1.2; //% of how much the image will enlarge
function buttonImgResize(x, e){
//Location of the cursor (as percentage of the container's size)
var imgContPosition = x.getBoundingClientRect();
var mousePosX = (e.clientX - imgContPosition.left) / x.offsetWidth;
var mousePosY = (e.clientY - imgContPosition.top) / x.offsetHeight;
//Finding how far to move the image from top and left
var leftImgOverlap = x.offsetWidth * (imgZoomIn - 1) * mousePosX;
var topImgOverlap = x.offsetHeight * (imgZoomIn - 1) * mousePosY;
//implementing changes
x.firstElementChild.style.left = 0 - leftImgOverlap + "px";
x.firstElementChild.style.top = 0 - topImgOverlap + "px";
}
//Reseting values
function buttonImgDownsize(x){
x.firstElementChild.style.left = "0";
x.firstElementChild.style.top = "0";
}
/*Container*/
.showCaseBtn{
overflow: hidden;
position: relative;
width: 500px; height: 300px;
}
/*div with background image*/
.showcaseBtn_Back{
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: black no-repeat center center / cover;
transition: 0.4s;
}
.showCaseBtn:hover .showcaseBtn_Back{
height: 120%; width: 120%;
}
<div class="showCaseBtn" onmousemove="buttonImgResize(this, event)" onmouseout="buttonImgDownsize(this)">
<div class="showcaseBtn_Back" style="background-image: url(https://media.contentapi.ea.com/content/dam/need-for-speed/common/2017/10/nfs-payback-jaguar-f-type-2x.jpg.adapt.1920w.jpg);"></div>
</div>
The problem is caused by the css transition. If you remove it, the zooming works but no fancy scaling will happen.
var imgZoomIn = 1.2;
function buttonImgResize(x, e){
var imgContPosition = x.getBoundingClientRect();
var mousePosX = (e.clientX - imgContPosition.left) / imgContPosition.width;
var mousePosY = (e.clientY - imgContPosition.top) / imgContPosition.height;
var leftImgOverlap = imgContPosition.width * (imgZoomIn - 1) * mousePosX;
var topImgOverlap = imgContPosition.height * (imgZoomIn - 1) * mousePosY;
x.firstElementChild.style.left = - leftImgOverlap + "px";
x.firstElementChild.style.top = - topImgOverlap + "px";
}
function buttonImgDownsize(x){
x.firstElementChild.style.left = "0";
x.firstElementChild.style.top = "0";
}
.showCaseBtn{
overflow: hidden;
position: relative;
width: 500px; height: 300px;
}
.showcaseBtn_Back{
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: black no-repeat center center / cover;
}
.showCaseBtn:hover .showcaseBtn_Back{
height: 120%; width: 120%;
}
<div class="showCaseBtn" onmousemove="buttonImgResize(this, event)" onmouseout="buttonImgDownsize(this)">
<div class="showcaseBtn_Back" style="background-image: url(https://media.contentapi.ea.com/content/dam/need-for-speed/common/2017/10/nfs-payback-jaguar-f-type-2x.jpg.adapt.1920w.jpg);"></div>
</div>
I have two divs that I want my users to be able to hit a button and arrange these two divs top/down or left/right. I have implemented it but whenever I arrange them left/right, the right div often overflows to the bottom of the left div.
I have seen another similar example that talks about resizing left/right divs, but I still don't know what exactly caused my right div to overflow. Any help is appreciated!
Here is my example:
var d = $('#divider'); // divider between top and bottom divs
var t = $('#tl'); // top/left div
var b = $('#br'); // bottom/right div
var h = $('body').height();
var w = $('body').width();
var isDragging = false;
var isLandscape = false;
d.mousedown(function(e) {
isDragging = true;
});
$(document).mouseup(function() {
isDragging = false;
}).mousemove(function(e) {
if (isDragging) {
if (!isLandscape) {
t.css('height', e.pageY);
b.css('height', h - e.pageY - d.height());
d.css('height', h - t.height() - b.height());
} else {
t.css('width', e.pageX);
b.css('width', w - e.pageX - d.width());
d.css('width', w - t.width() - b.width());
}
}
});
var rotateBtn = document.getElementById('rotateScreen');
if (rotateBtn) {
rotateBtn.addEventListener('click', rotateDisplay, false);
} else {
throw error;
}
function rotateDisplay() {
if (!isLandscape) {
isLandscape = true;
t.css('height', h);
t.css('width', Math.round(0.75 * w));
b.css('height', h);
b.css('width', Math.round(0.24 * w));
d.css('height', h);
d.css('width', w - t.width() - b.width());
d.css('cursor', 'w-resize');
} else {
isLandscape = false;
t.css('height', Math.round(0.75 * h));
t.css('width', w);
t.css('float', 'left');
b.css('height', Math.round(0.24 * h));
b.css('width', w);
b.css('float', 'left');
d.css('height', h - t.height() - b.height());
d.css('width', w);
d.css('cursor', 'n-resize');
d.css('float', 'left');
}
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#br {
width: 100%;
height: 24%;
float: left;
background: gold;
}
#tl {
width: 100%;
height: 75%;
float: left;
background: navy;
}
#divider {
height: 1%;
background: #fff;
float: left;
width: 100%;
cursor: ns-resize;
}
#control {
position: absolute;
z-index: 5;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
<button id="rotateScreen">🔁</button>
</div>
<div id="tl">This is the top/left div</div>
<div id="divider"></div>
<div id="br">This is the bottom/right div</div>
Im trying to build a game where enemies jump out of the water and you fire water at them...
When the user clicks to fire I want the img src to point in the direction of the click, to achieve what I have so far I have css and js script (code below) however it looks to static, I feel having the water point in the direction of the users input would help a lot however Im not sure how to achieve this?
//bind to gun events
this.playfield.on('gun:out_of_ammo',_.bind(function(){this.outOfAmmo();},this));
this.playfield.on('gun:fire',_.bind(function(){
this.flashScreen();
},this));
...
flashScreen : function(){
$(".theFlash").css("display","block");
setTimeout(function(){
$('.theFlash').css("display","none");
},400);
}
CSS
.theFlash{
background-color : transparent;
width:900px;
height:500px;
position:relative;
margin:0 auto;
z-index:10;
display:none;
}
I put together an example below that will hopefully help you out.
You just have to specify the source from where the shoot is fired (sourceX,sourceY), calculate the angle to where the mouse is clicked (done below, so should just be to copy/paste) and adjust the transform: rotate(Xdeg); to the new angle.
Make sure to set the orgin in css with transform-origin, so that the flame rotates around the source and not the flame itself.
Try it out at the bottom.
var game,
flame,
sourceX = 310,
sourceY = 110;
window.onload = function() {
game = document.getElementById('game');
flame = document.getElementById('flame');
game.addEventListener('click', function(e) {
var targetX = e.pageX,
targetY = e.pageY,
deltaX = targetX - sourceX,
deltaY = targetY - sourceY,
rad = Math.atan2(deltaY, deltaX),
deg = rad * (180 / Math.PI),
length = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
fire(deg,length);
}, false);
};
function fire(deg,length) {
flame.style.opacity = 1;
flame.style.transform = 'rotate(' + deg + 'deg)'
flame.style.width = length + 'px';
setTimeout(function() {
flame.style.opacity = 0;
},300);
};
#game {
position: relative;
width: 400px;
height: 200px;
background-color: #666;
overflow: hidden;
}
#source {
border-radius: 50%;
z-index: 101;
width: 20px;
height: 20px;
background-color: #ff0000;
position: absolute;
left: 300px;
top: 100px;
}
#flame {
width: 300px;
height: 3px;
background-color: #00ff00;
position: absolute;
left: 310px;
top: 110px;
opacity: 0;
transform-origin: 0px 0px;
transform: rotate(180deg);
transition: opacity .2s;
}
<div id="game">
<div id="source">
</div>
<div id="flame">
</div>
</div>
I would not recommend building games in this manner, Canvas and SVG are the preferred methods of building browser games, with that said it can be done.
Try this
https://jsfiddle.net/b77x4rq4/
$(document).ready(function(){
var middleOfElementTop = 250; // margin from top + half of height
var middleOfElementLeft = 125; // margin from left + half of width
$("#main").mousemove(function(e){
var mouseX = e.offsetX;
var mouseY = e.offsetY;
var angle = Math.atan2(mouseY - middleOfElementTop, mouseX - middleOfElementLeft) * 180 / Math.PI;
$(".box").css({"transform": "rotate(" + angle + "deg)"})
})
});