On any given application, is there a way, maybe in dev tools where I can check the pixel location of my mouse hover?
Use javascript to get cursor location.
document.addEventListener("mouseover", function( event ) {
console.log(event.screenX, event.screenY);
}, false);
Getting the Mouse Click Position :
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
width: 550px;
height: 350px;
border: 5px black solid;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
position: relative;
left: 50px;
top: 50px;
transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>
<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
</script>
</body>
</html>
Refer : MouseEvent clientX Property & Getting the Mouse Click Position
Related
I'm trying to have divs that, when moused over, change their background color, and being able to reset those colors. I've managed the former, but the latter is giving me issues.
As written, the divs do, in fact, change color, but attempting to press a key does not result in anything. I've also tried to put the resetColor function in the same block of Script, but doing so makes it so I can't even hover over and change the colors of those divs. As such, I'm wondering what I should do to be able to reset the divs' color?
function randomColor(element) {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
console.log(bgColor);
element.backgroundColor = bgColor;
}
function resetColor(element) {
element.backgroundColor = '#ffff99';
}
body {
background-color: lightblue;
}
.colorCell {
border: 1px solid black;
width: 10px;
padding: 5px;
background-color: #ffff99;
border-radius: 0px;
}
<div class="colorCell" onmouseover="randomColor(this.style)" onkeydown="resetColor(this.style)">
<!--Successfullly changed color-->
<!--<a onmouseover="colorCell.body.style.backgroundColor = '#f39352'">-->
</div>
<div class="colorCell" onmouseover="randomColor(this.style)" onkeydown="resetColor(this.style)">
</div>
<div class="colorCell" onmouseover="randomColor(this.style)" onkeydown="resetColor(this.style)">
</div>
Check the fiddle: https://jsfiddle.net/ycn4zx9b/3/
HTML:
<div class="colorCell" onmouseover="randomColor(this)"></div>
<div class="colorCell" onmouseover="randomColor(this)"></div>
<div class="colorCell" onmouseover="randomColor(this)"></div>
CSS is still the same as you provided.
JS:
function randomColor(element) {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
element.style.backgroundColor = bgColor;
element.classList.add(`reset-me`);
}
function resetColor(element) {
element.style.backgroundColor = '#ffff99';
}
window.onload = () => {
document.getElementsByTagName(`body`)[0].addEventListener(`keydown`, () => {
var itemss = document.querySelectorAll(`.reset-me`);
for (var i = 0; i < itemss.length; i++) {
resetColor(itemss[i]);
}
});
}
Keypress won't work on such elements on which you cannot enter something.
Make the event global instead and it should work.
an idea can be to :
add an event listener at document level
stored hovered cell
if one cell is over and keydown reset the celle style
let elementHovered = null;
function getRandomColor() {
return Math.floor(Math.random() * 256);
}
function randomColor(element) {
const bgColor = `rgb(${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
console.log(bgColor);
element.backgroundColor = bgColor;
}
function resetColor(element) {
element.backgroundColor = '#ffff99';
}
[...document.querySelectorAll('.colorCell')].forEach(cell => {
cell.addEventListener('mouseover', () => {
elementHovered = event.target.style;
randomColor(elementHovered);
});
});
document.addEventListener('keydown', () => {
if (elementHovered) {
resetColor(elementHovered)
}
});
body {
background-color: lightblue;
}
.colorCell {
border: 1px solid black;
width: 10px;
padding: 5px;
background-color: #ffff99;
border-radius: 0px;
}
<div class="colorCell"></div>
<div class="colorCell"></div>
<div class="colorCell"></div>
The dotted line follows well in the corresponding area.
If you select another element and move it, the dotted line is not moving along the last element.
I want the dot to stop at the last element
Any reference point you select will be stretched, and you will need to have a dotted line on it.
// global
let maxWidth = 200;
let maxHeight = 200;
let minWidth = Number.MAX_SAFE_INTEGER;
let recentTarget = 0;
let minRecentTarget = Number.MAX_SAFE_INTEGER;
var targetWrapper = document.querySelector(".check-box");
import interact from 'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: false,
// keep the element within the area of it's parent
modifiers: [
interact.modifiers.restrictRect({
// restriction: '.check-group-wrap',
// endOnly: true
})
],
// enable autoScroll
autoScroll: true,
listeners: {
// call this function on every dragmove event
move: dragMoveListener,
// call this function on every dragend event
end: {},
}
})
function dragMoveListener(event) {
var target = event.target;
// keep the dragged position in the data-x/data-y attributes
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
// 최대값 가진 target 찾기
if (parseFloat(target.getAttribute('data-x')) + 200 > minRecentTarget && parseFloat(target.getAttribute('data-x')) + 200 < recentTarget) {
minusRecent(x, y);
} else if (parseFloat(target.getAttribute('data-x')) + 200 == maxWidth) {
minusWidth(x, y);
} else if (parseFloat(target.getAttribute('data-x')) + 200 < minWidth && parseFloat(target.getAttribute('data-x')) + 200 > recentTarget) {
recentTarget = x + 200;
minRecentTarget = recentTarget - 5;
}
// translate the element
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
// update the posiion attributes
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
// update the width, height wrapper
resetPos(x, y);
}
function resetPos(x, y) {
if ((x + 200) > maxWidth) {
maxWidth = x + 200;
}
console.log(maxWidth + ',' + minWidth + ',' + recentTarget + ',' + minRecentTarget);
}
// target 이 최대값 타겟일 때
function minusWidth(x, y) {
maxWidth = x + 200;
minWidth = maxWidth - 1;
targetWrapper.style.width = (x + 200) + 'px';
console.log("최댓값 target");
}
function minusRecent(x, y) {
recentTarget = x + 200;
minRecentTarget = recentTarget - 100;
console.log("최솟값을 가진 target");
}
.check-group-wrap {
position: absolute;
top: 200px;
left: 10%;
}
.check-group {
position: relative;
}
.check-box {
position: absolute;
top: -9px;
left: -9px;
width: 200px;
height: 200px;
clear: both;
display: inline-block;
border: 5px dashed #000;
padding: 5px;
}
.check {
position: absolute;
width: 200px;
height: 200px;
background: red;
border: 1px solid blue;
}
<div class="check-group-wrap">
<div class="check-group">
<div class="check-box"></div>
<div class="check draggable"></div>
<div class="check draggable"></div>
<div class="check draggable"></div>
<div class="check draggable"></div>
</div>
</div>
What I would like to do something like http://mountaintheme.com/themeforest/mountain/home.html and I'm not sure at all how to go about this. I've tried some methods utilizing CSS, but failed miserably. This seems to be a simple fix I'd imagine...
This is my current code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sound Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
body {
background-color: rgb(255, 255, 255);
color: #000;
}
a {
color: #fff;
}
a:hover {
color: #fff;
}
hr {
border-top-color: #fff;
}
.main {
opacity: 0.6;
max-width: 640px;
margin: 150px auto;
padding: 0px 15px;
height:2048px;
}
.page-header {
border-bottom: 3px #fff solid;
}
footer .accr {
text-align: right;
}
#media (max-width: 767px) {
.clearfix div {
width: 100%;
}
.rgb, .accr {
text-align: center !important;
}
}
</style>
</head>
<body>
<div class="main">
<h1 class="page-header"></h1>
<p style="font-family:'Helvetica'"></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script id="colorScroll" data-colors="255, 255, 255:255, 255, 204:204, 255, 255">
var colors = $("#colorScroll").data("colors");
var colors_array = colors.split(":");
var numcolors = colors_array.length;
var RGBs = [];
for(var i = 0; i < numcolors; i++) {
RGBs[i] = [];
var c = colors_array[i].split(",");
RGBs[i][0] = c[0];
RGBs[i][1] = c[1];
RGBs[i][2] = c[2];
}
var dRGBs = [];
for(var i = 0; i < (numcolors - 1); i++) {
dRGBs[i] = [];
dRGBs[i][0] = RGBs[i][0] - RGBs[i+1][0];
dRGBs[i][1] = RGBs[i][1] - RGBs[i+1][1];
dRGBs[i][2] = RGBs[i][2] - RGBs[i+1][2];
}
$(window).scroll(function() {
var position = $(this).scrollTop();
var view = $(this).height();
var height = $(document).height();
var travel = height - view;
var percent = position / travel;
var level = Math.floor(percent * (numcolors - 1));
var plevel = percent * (numcolors - 1);
var dlevel = Math.floor(level);
if(Math.floor(level) == (numcolors - 1)) {
dlevel = Math.floor(level) - 1;
}
if(plevel > 1) {
plevel = plevel - dlevel;
}
var nRed = (RGBs[dlevel][0] - Math.round(dRGBs[dlevel][0] * plevel));
var nGreen = (RGBs[dlevel][1] - Math.round(dRGBs[dlevel][1] * plevel));
var nBlue = (RGBs[dlevel][2] - Math.round(dRGBs[dlevel][2] * plevel));
$(".rgb span").text(nRed + ", " + nGreen + ", " + nBlue);
$("body").css("background-color", "rgb(" + nRed + "," + nGreen + "," + nBlue + ")");
});
</script>
</body>
</html>
This is gif image you can download it through google crome.
You can download it from here. Click Here
It is jpeg picture as you can see from there page resources - http://mountaintheme.com/themeforest/mountain/demo/bg.jpg The Dotted effect was probably made with-in photoshop or something and then just saved.
I've seen some cool image masking and other effects with CSS3. Using only CSS3 can we achieve this effect seen in the code below or see working fiddle.
http://jsfiddle.net/s6u9a/
HTML
<canvas id="canvas1" width="400" height="400"></canvas>
Javascript
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);
function redraw(mouse) {
console.log('a');
can.width = can.width;
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.rect(0,0,500,500);
ctx.arc(mouse.x, mouse.y, 70, 0, Math.PI*2, true)
ctx.clip();
ctx.drawImage(img2, 0, 0);
}
var img = new Image();
img.onload = function() {
redraw({x: -450, y: -500})
}
img.src = 'http://placekitten.com/400/400';
var img2 = new Image();
img2.onload = function() {
redraw({x: -450, y: -500})
}
img2.src = 'http://placekitten.com/400/395';
function getMouse(e, canvas) {
var element = canvas,
offsetX = 0,
offsetY = 0,
mx, my;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
return {
x: mx,
y: my
};
}
Here's an alternate approach using background-image. It's more flexible, and you get a circular (or arbitrarily shaped) viewport:
http://jsfiddle.net/maackle/66uCs/
HTML
<div class="masker">
<img class="base" src="http://lorempixel.com/400/400/cats/1" />
<div class="overlay"></div>
</div>
CSS
.masker {
position: relative;
}
.overlay {
position: absolute;
display: none;
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://lorempixel.com/400/400/cats/2) no-repeat;
}
jQuery 1.10.1
$('.masker').on('mousemove', function (e) {
var r, x, y, top, left, bottom, right, attr, $base, $overlay;
r = 100;
$base = $(this).find('.base');
$overlay = $(this).find('.overlay');
x = e.pageX - $base.offset().left;
y = e.pageY - $base.offset().top;
top = y - r / 2;
left = x - r / 2;
if (x < 0 || y < 0 || x > $base.width() || y > $base.height()) {
$overlay.hide();
} else {
$overlay.show().css({
'background-position': '' + (-left) + 'px ' + (-top) + 'px',
'left': left,
'top': top
});
}
});
//just for good measure
$('.masker').on('mouseout', function (e) {
$(this).find('.overlay').hide();
});
Here's a solution that uses mostly CSS -- you do need some Javascript to detect the mouse position. Note that this gives you a square viewport instead of a circle, but if CSS ever adds circle() alongside rect() for the clip property, you will have that option:
http://jsfiddle.net/maackle/Yc2b4/
HTML
<div class="masker">
<img class="base" src="http://lorempixel.com/400/400/cats/1" />
<img class="overlay" src="http://lorempixel.com/400/400/cats/2" />
</div>
CSS
.masker {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
}
jQuery 1.10.1
$('.masker img').on('mousemove', function(e) {
var r, x, y, top, left, bottom, right, attr, $overlay;
r = 100;
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
top = y - r/2;
left = x - r/2;
bottom = y + r/2;
right = x + r/2;
attr = 'rect('+(top)+'px, '+(right)+'px, '+(bottom)+'px, '+(left)+'px)';
$overlay = $('.masker .overlay');
$overlay.show().css({clip: attr});
});
$('.masker img').on('mouseout', function(e) {
$('.masker .overlay').hide();
});
How can I use jQuery to follow the cursor with a DIV?
You can't follow the cursor with a DIV, but you can draw a DIV when moving the cursor!
$(document).on('mousemove', function(e){
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
});
That div must be off the float, so position: absolute should be set.
You don't need jQuery for this. Here's a simple working example:
<!DOCTYPE html>
<html>
<head>
<title>box-shadow-experiment</title>
<style type="text/css">
#box-shadow-div{
position: fixed;
width: 1px;
height: 1px;
border-radius: 100%;
background-color:black;
box-shadow: 0 0 10px 10px black;
top: 49%;
left: 48.85%;
}
</style>
<script type="text/javascript">
window.onload = function(){
var bsDiv = document.getElementById("box-shadow-div");
var x, y;
// On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
window.addEventListener('mousemove', function(event){
x = event.clientX;
y = event.clientY;
if ( typeof x !== 'undefined' ){
bsDiv.style.left = x + "px";
bsDiv.style.top = y + "px";
}
}, false);
}
</script>
</head>
<body>
<div id="box-shadow-div"></div>
</body>
</html>
I chose position: fixed; so scrolling wouldn't be an issue.
This works for me. Has a nice delayed action going on.
var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;
$(document).mousemove(function(e){
$mouseX = e.pageX;
$mouseY = e.pageY;
});
var $loop = setInterval(function(){
// change 12 to alter damping higher is slower
$xp += (($mouseX - $xp)/12);
$yp += (($mouseY - $yp)/12);
$("#moving_div").css({left:$xp +'px', top:$yp +'px'});
}, 30);
Nice and simples