I need get hover effect in a div from the cursor position.
I have this html and css
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<div class="f">
<div class="s"></div>
</div>
And I need something like this:
I'm open to js or jquery solutions.
EDIT
I have a jquery solution:
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
But i need the circle make the over animation like first snippet.
Original question here
To change position of inner circle you can use pageX and pageY on mousemove. To change size of inner circle you can create one class that will scale div and toggle that class on hover over .f.
var s = $('.s')
var f = $('.f')
var oTop = f.offset().top + (s.height() / 2);
var oLeft = f.offset().left + (s.width() / 2);
f.hover(function() {
s.toggleClass('change')
})
f.mousemove(function(e) {
var x = e.pageY - oTop
var y = e.pageX - oLeft
s.css({
top: x + 'px',
left: y + 'px'
})
})
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
overflow: hidden;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
position: absolute;
pointer-events: none;
opacity: 0;
transition: transform 0.5s linear, opacity 0.3s linear;
}
.change {
transform: scale(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
Here is a jQuery solution.
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
$('.f').on('mousemove', function(e){
var par = $(this);
if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){
$('.s').css({
position: 'relative',
left: e.pageX - (par.width() / 2),
top: e.pageY - (par.height() / 2)
});
} else {
$('.s').css({
position: 'initial'
});
}
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
function moveInner(e)
{
var inner = document.getElementById('inner');
inner.style.top = (e.clientY-100)+"px";
inner.style.left= (e.clientX-100)+"px";
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 100px;
height: 100px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
position: absolute;
}
Please put the inner div outside the parent div
And set the onmouseover for parent div to change inner div's position
<div class="f" id="parent" onmousemove="moveInner(event)">
</div><div class="s" id="inner"></div>
var ol_x= null;
var ol_y= null;
function moveInner(me, e)
{
if(ol_x!=null)
{
var ctx = me.getContext("2d");
ctx.arc(ol_x, ol_y, 42, 0, 2 * Math.PI, false);
ctx.fillStyle='grey';
ctx.fill();
ctx.restore();
}
ol_x = e.clientX+20;
ol_y = e.clientY+20;
var ctx = me.getContext("2d");
ctx.beginPath();
ctx.arc(ol_x, ol_y, 40, 0, 2*Math.PI, false);
ctx.fillStyle ='black';
ctx.fill();
ctx.stroke();
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
Hi this is my solution for EDIT<BR>
I use 2D context to draw inner DIV inside parent DIV
<canvas class="f" id="parent" onmousemove="moveInner(this, event)">
</canvas>
Related
I am trying to create a minimap feature, I have two HTML elements and these can be image or div, so when a user clicks on an element it should give/translate the coordinates of another target element.
The clicked element size (w/h) will always be small and the position will be absolute. so far I am succeeded to get clicked element position but I am not able to translate these coordinates into the target element.
https://jsfiddle.net/shoaib_ijaz/n1hzuc9r/
$(".child").click(function(e) {
var offset = $(this).offset();
var left = e.pageX - offset.left;
var top = e.pageY - offset.top;
var circle = $("<div />", {
class: 'circle'
});
$(circle).css({
left: left,
top: top
});
$(".parent").append(circle);
});
.parent {
border: 3px solid #000;
background: #898383;
width: 100%;
height: 300px;
}
.child {
background: #fff;
position: absolute;
right: 15px;
bottom: 40px;
width: 200px;
height: 100px;
border: 2px solid #eff431;
}
.circle {
width: 10px;
height: 10px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
child
</div>
</div>
<!-- some times the child element can be outside the parent element -->
For example:
Map the coordinates using ratio of parent/child widths and heights
$(".child").click(function(e) {
var offset = $(this).offset();
var ratioX = $(".parent").width() / $(this).width();
var ratioY = $(".parent").height() / $(this).height();
var left = (e.pageX - offset.left) * ratioX;
var top = (e.pageY - offset.top) * ratioY;
var circle = $("<div />", {
class: 'circle'
});
$(circle).css({
left: left,
top: top
});
$(".parent").append(circle);
});
.parent {
border: 3px solid #000;
background: #898383;
width: 100%;
height: 300px;
}
.child {
background: #fff;
position: absolute;
right: 15px;
bottom: 40px;
width: 200px;
height: 100px;
border: 2px solid #eff431;
}
.circle {
width: 10px;
height: 10px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
child
</div>
</div>
<!-- some times the child element can be outside the parent element -->
I want my element center aligned until scrolling in div reached has reached end, here is my code
clamp = (value, min, max) => {
if (value < min) return min;
else if (value > max) return max;
return value;
};
const playground = document.getElementById('playground');
const viewarea = document.getElementById('viewarea');
const selfUser = document.getElementById('user1');
window.playgroundBounding = { minX: 0, maxX: playground.clientWidth, minY: 0, maxY: playground.clientHeight };
playground.onmouseup = function (e) {
if (e.button === 0) mouseClicked(e);
};
function mouseClicked(event) {
xposition = event.clientX + viewarea.scrollLeft - selfUser.offsetWidth / 2;
yposition = event.clientY + viewarea.scrollTop - selfUser.offsetHeight / 2;
xposition = clamp(xposition, window.playgroundBounding.minX, window.playgroundBounding.maxX - selfUser.offsetWidth);
yposition = clamp(yposition, window.playgroundBounding.minY, window.playgroundBounding.maxY - selfUser.offsetHeight);
$(selfUser).animate(
{
left: xposition + 'px',
top: yposition + 'px',
},
500,
'linear'
);
viewarea.scrollTo(xposition, yposition)
}
body {
margin:0;
padding:0;
}
#viewarea {
width: 100vw;
height: 100vh;
overflow: auto;
position: relative;
scroll-behavior: smooth;
transform-origin: left top;
top:0px;
left:0px;
/*overflow: hidden;*/
}
#playground {
width: 1920px;
height: 1080px;
background-image: url('https://www.tynker.com/projects/screenshot/60390c5cde3bf81ccf3101f6/erosion.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 1920px 1080px;
position: relative;
scroll-behavior: smooth;
transform: translate(0px, 0px) scale(1, 1);
left: 0px;
top:0px;
}
.avatar {
width: 50vw;
height: 50vw;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
color: blue;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: move;
user-select: none;
transition: transform 0.1s ease-in;
position:absolute;
}
.avatar-image {
width: 30vw;
height: 30vw;
background: url("https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200") top left / cover no-repeat;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 3px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewarea">
<div id="playground">
<div class="avatar " id="user1">
<div class="avatar-image">
<div class="user-name"></div>
</div>
</div>
</div>
</div>
Now on click avatar is moving on view area, i want scrollbars to scroll vertically and horizontally nicely according to player position, or maybe player remain in center until scrollbar scrolled completely and player can touch the border.
<style>
* {padding: 0; margin: 0;}
#game {width: 300px; height: 400px; border: 2px solid #222; background-color: #ccc; margin: 50px; position: relative; overflow: hidden;}
#character {width: 20px; height: 20px; background-color: #ffc554; border: 2px solid #222; position: absolute; bottom: 0; left: 0;}
.block {width: 10px; height: 10px; background-color: #ff5252; border-radius: 50%; border: 2px solid #222; position: absolute; top: -50px; left: -20px;}
.falling {animation: fall 2s infinite linear;}
#keyframes fall {
0% {top: -50px}
100% {top: 450px;}
}
</style>
<body>
<div id="game">
<div id="character"></div>
</div>
</body>
SCRIPT
var block = [];
function createEnemy(nth) {
var divAddText = '<div class="block ' + nth + '"></div>'
document.getElementById('game').innerHTML += divAddText;
block[nth] = document.getElementsByClassName(nth)[0];
block[nth].classList.add("falling");
setInterval(function() {
block[nth].style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
As you can see in the SCRIPT part, I tried to write a block creating and falling code.
It worked well when I executed createEnemy(1) in chrome console.
The first block created went smoothly falling from random left points as I expected.
But as soon as I added createEnemy(2), the first block started to fall from the same left point while the second block was just fine falling from random left points.
Could any of you guys give me some insight into this issue?
Don't use innerHTML when displaying your enemies, instead use createElement and appendChild.
const enemies = [];
const game = document.getElementById("game");
function createEnemy(name) {
const enemy = document.createElement("div");
enemy.classList.add("block", "falling", name);
enemies.push(enemy);
game.appendChild(enemy);
setInterval(function() {
enemy.style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
createEnemy(1);
createEnemy(2);
* {
padding: 0;
margin: 0;
}
#game {
width: 300px;
height: 400px;
border: 2px solid #222;
background-color: #ccc;
margin: 50px;
position: relative;
overflow: hidden;
}
#character {
width: 20px;
height: 20px;
background-color: #ffc554;
border: 2px solid #222;
position: absolute;
bottom: 0;
left: 0;
}
.block {
width: 10px;
height: 10px;
background-color: #ff5252;
border-radius: 50%;
border: 2px solid #222;
position: absolute;
top: -50px;
left: -20px;
}
.falling {
animation: fall 2s infinite linear;
}
#keyframes fall {
0% {
top: -50px;
}
100% {
top: 450px;
}
}
<div id="game">
<div id="character"></div>
</div>
PS: I'm not sure why your code is not working as expected, I believe it has something to do with innerHTML. Hopefully someone could explain.
i have a circle and i am showing some text in the middle as demonstrated in the fiddle(JSFIDDLE http://jsfiddle.net/874jgh4v/2/) My requirement is this
I need to animate the outer white border for percentage for example if the percentage is 50% then i need to show that border only around half the circle
I need to show that percentage value on hower for example the text 50% should be shown only on hower preferably with some animation.
.wrapper{padding:30px;}
.circle{
border-radius: 50%;
background:#32a500;
box-shadow: 0px 0px 0px 16px #f1f1f1;
border: 16px solid #f9f9f9;
width:220px;
height:220px;
box-sizing:border-box;
}
.circle:hover {
background:red;
}
<div class="wrapper">
<div class="circle">
<p>Total ROE's</p>
<p>300</p>
<p>70%</p>
</div>
</div>
Any help would be appreciated! Also i would prefer to do this without external libraries , the percentages should support decimal points upto two points.
Try this:
Html
<span class='Progress'>
<div class="Bar">
<div class="Outer">
<div class="Fill"></div>
</div>
<div class="Draw"></div>
<div class="Status"><span></span></div>
</div>
</span>
CSS
.Progress {
position: absolute;
left: 25%;
bottom: 30%;
}
.Progress .Bar {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.Progress .Bar .Outer {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 70px, 70px, 35px);
}
.Bar .Outer .Fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 35px, 70px, 0);
background: #00A0E3;
transform: rotate(60deg);
}
.Progress .Bar .Draw {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 53.84615px/2);
top: calc(50% - 53.84615px/2);
width: 53.84615px;
height: 53.84615px;
background: #fff;
text-align: center;
display: table;
}
.Progress .Bar .Status {
display: table-cell;
vertical-align: middle;
position: absolute;
margin-left: -100px;
margin-top: -10px;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
text-align: center;
}
.Progress .Bar .Status > span {
font-size: 14px;
font-weight: bold;
color: #00A0E3;
}
.Progress .Bar.halfway {
background-color: #00A0E3;
}
.Progress .Bar.halfway .Outer {
clip: rect(0, 35px, 70px, 0);
}
.Progress .Bar.halfway .Outer .Fill {
clip: rect(0, 70px, 70px, 35px);
background: #E5E5E5;
}
.Progress .Bar.complete.halfway,
.Progress .Bar.complete .Fill
{
background-color: #8cd64c !important;
}
Javascript/JQuery:
$('document').ready(function() {
var progress = function(perc) {
perc = Math.round(perc * 100) / 100; // 2 decimal places
var $bar = $('.Progress .Bar'),
$fill = $('.Progress .Bar .Outer .Fill'),
$status = $('.Progress .Bar .Status span');
$bar.removeClass("halfway").removeClass("complete");
// outer bar
if (perc >= 50) $bar.addClass("halfway");
if (perc >= 100) $bar.addClass("complete");
// progress bar
var degrees = 360 * perc / 100;
$fill.css({
"WebkitTransform": 'rotate(' + degrees + 'deg)',
"-moz-transform": 'rotate(' + degrees + 'deg)'
});
// status
$status.html(perc);
}
// Test it!
progress(10);
setTimeout(function() {
progress(50);
setTimeout(function() {
progress(100);
}, 2000);
}, 2000);
});
Show me the CodePen
I have existing HTML/CSS/JavaScript that works fine for a "click to open" sliding panel from the top of the page, like this:
<div id="machineSelectorContainer">
<div id="machineSelectorTray">
<table id="machineSelector">
<tr id="machineSelectorThumbnailTextRow">
<td class="machineSelectorThumbnailText">VM1</td>
<td class="machineSelectorThumbnailText">VM2</td>
</tr>
<tr>
<td class="machineSelectorThumbnailPicture">
<img src="images/placeholderThumbnail.png" />
</td>
<td class="machineSelectorThumbnailPicture">
<img src="images/placeholderThumbnail.png" />
</td>
</tr>
</table>
</div>
<div id="machineSelectorThumb">
<div id="machineSelectorThumbText">
•••
</div>
</div>
</div>
with
*, body {
margin: 0;
height: 100%;
}
#machineSelectorContainer {
width: 100%;
height: 150px;
text-align: center;
z-index: 100;
position: absolute;
top: -120px;
}
#machineSelectorThumb {
width: 60px;
height: 30px;
line-height: 30px;
font-family: sans-serif;
font-size: 12pt;
text-align: center;
position: relative;
top: 120px;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.4;
opacity: 0.4;
margin: auto;
z-index: 100;
}
#machineSelectorTray {
position: absolute;
height: 120px;
z-index: 100;
margin: auto;
left: 50%;
}
#machineSelector {
background-color: lightblue;
font-family: sans-serif;
font-size: 8pt;
text-align: center;
position: relative;
left: -50%;
margin: 0;
padding: 0;
height: 120px;
border: 1px solid black;
}
#machineSelector > table {
height: auto;
}
#machineSelectorThumbnailTextRow {
height: auto;
}
.machineSelectorThumbnailPicture > img {
width: 100px;
border: 1px solid black;
height: auto;
}
.machineSelectorThumbnailText {
position: relative;
bottom: 0;
width: 100px;
height: 20px;
line-height: 20px;
}
and
$("#machineSelectorThumb").click(function () {
var element = $("#machineSelectorContainer");
var currentTop = element.offset().top;
var newTop = -(currentTop + 120);
element.animate({
top: newTop
}, 200, function () {
});
});
(I put a jsfiddle at http://jsfiddle.net/mikebaz/rtTe5/1/ but note that the styling does not work correctly there for some reason - it's not worth messing with it as it's close enough, but be aware the thumb button doesn't overlap the tab in a normal browser setup.)
This works exactly how I want. I would like to have the same kind of behavior and design for a panel that slides out from the right, with the open button vertically centered and rotated, sliding open from off the right side of the window into view (right to left slide).
I have found a lot of different answers around pieces of this, such as CSS- hide element off the right of the screen to get the off-screen positioning, and I looked at Can't get Slide Out Tab on the right hand side of my page but that uses an image for the rotated text, which I don't want to do (among other differences). It seems that the script would be similar, but I'm stuck on how to build the CSS properly. I can't seem to get the combination of rotation, off-screen portion, and dynamic height working. In particular, I can't seem to get the contents to show or the thumb text to properly center in the thumb button. Here is what I have right now that is getting there:
<div id="machineControlsOuterContainer">
<div id="machineControlsContainer">
<div id="machineControlsTray">
<table id="machineControls">
<tr>
<td class="machineButton">Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
</table>
</div>
<div id="machineControlsThumb">
<div id="machineControlsRotatedContainer">
<div id="machineControlsThumbText">•••</div>
</div>
</div>
</div>
</div>
and
#machineControlsOuterContainer {
position: relative;
overflow: hidden;
}
#machineControlsContainer {
position: absolute;
height: 100%;
z-index: 100;
width: 150px;
right: -120px;
}
#machineControlsThumb {
width: 30px;
height: 60px;
font-family: sans-serif;
font-size: 12pt;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.25;
opacity: 0.25;
margin: auto;
position: absolute;
left: 0px;
top: 50%;
}
#machineControlsRotatedContainer {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: auto;
padding: 0;
line-height: 30px;
}
#machineControlsTray {
position: absolute;
right: -120px;
height: 100%;
}
#machineControlsThumbText {
}
#machineControls {
background-color: lightblue;
-ms-opacity: 0.5;
opacity: 0.5;
width: 120px;
font-family: sans-serif;
font-size: 12pt;
text-align: left;
border: 1px solid;
}
.machineButton {
border: 1px solid;
padding: 0px;
margin: 0px;
}
with the script:
$("#machineControlsThumb").click(function () {
var element = $("#machineControlsContainer");
var windowWidth = $(window).width();
var currentLeft = element.offset().left;
var currentRight = -150 + (windowWidth - currentLeft);
var newRight = -(currentRight + 120);
element.animate({
right: newRight
}, 200, function () {
});
});
I can tell I'm close, but I just can't finish closing the loop.
Thanks!
OK, so I finally figured this out. I had to do a little bit more manipulation of different pieces, and add some vertical centering script (I can't get the CSS to cooperate).
CSS:
#machineControlsOuterContainer {
position: relative;
overflow: hidden;
}
#machineControlsContainer {
position: absolute;
height: 100%;
z-index: 100;
width: 150px;
right: -120px;
}
#machineControlsThumb {
width: 30px;
height: 60px;
font-family: sans-serif;
font-size: 12pt;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.4;
opacity: 0.4;
margin: auto;
position: absolute;
left: 0px;
}
#machineControlsRotatedContainer {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: auto;
padding: 0;
line-height: 30px;
}
#machineControlsTray {
position: absolute;
right: 0;
height: auto;
}
#machineControlsThumbText {
line-height: 60px;
text-align: center;
}
#machineControls {
background-color: lightblue;
-ms-opacity: 0.5;
opacity: 0.5;
width: 120px;
font-family: sans-serif;
font-size: 12pt;
text-align: left;
border: 2px solid black;
border-spacing: 0;
}
#machineControls td {
height: 30px;
border: 1px solid black;
padding-left: 4px;
}
Adjustment script:
$(window).resize(function () {
verticallyCenterElement("machineControlsThumb");
verticallyCenterElement("machineControlsTray");
});
verticallyCenterElement("machineControlsThumb");
verticallyCenterElement("machineControlsTray");
function verticallyCenterElement(elementName) {
var element = $("#" + elementName);
var height = element.height();
var windowHeight = $(window).height();
var newTop = (windowHeight - height) / 2;
element.css("top", newTop);
}