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
Related
How to make Zooming effect like these, when hovering the image Sample Image
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
/*Some CSS*/
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
/*Lets create the magnifying glass*/
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;
/*Multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*Lets load up the large image first*/
background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
/*hide the glass by default*/
display: none;
}
/*To solve overlap bug at the edges during magnification*/
.small { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lets make a simple image magnifier -->
<div class="magnify">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
<!-- This is the small image -->
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
</div>
<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->
<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
Try this one
(function ($) {
$(document).ready(function() {
$('.xzoom, .xzoom-gallery').xzoom({zoomWidth: 400, title: true, tint: '#333', Xoffset: 15});
$('.xzoom2, .xzoom-gallery2').xzoom({position: '#xzoom2-id', tint: '#ffa200'});
$('.xzoom3, .xzoom-gallery3').xzoom({position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden'});
$('.xzoom4, .xzoom-gallery4').xzoom({tint: '#006699', Xoffset: 15});
$('.xzoom5, .xzoom-gallery5').xzoom({tint: '#006699', Xoffset: 15});
//Integration with hammer.js
var isTouchSupported = 'ontouchstart' in window;
if (isTouchSupported) {
//If touch device
$('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function(){
var xzoom = $(this).data('xzoom');
xzoom.eventunbind();
});
$('.xzoom, .xzoom2, .xzoom3').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
xzoom.eventleave = function(element) {
element.hammer().on('tap', function(event) {
xzoom.closezoom();
});
}
xzoom.openzoom(event);
});
});
$('.xzoom4').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openfancy,300);
event.gesture.preventDefault();
});
}
function openfancy() {
if (counter == 2) {
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery);
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
$('.xzoom5').each(function() {
var xzoom = $(this).data('xzoom');
$(this).hammer().on("tap", function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
var s = 1, ls;
xzoom.eventmove = function(element) {
element.hammer().on('drag', function(event) {
event.pageX = event.gesture.center.pageX;
event.pageY = event.gesture.center.pageY;
xzoom.movezoom(event);
event.gesture.preventDefault();
});
}
var counter = 0;
xzoom.eventclick = function(element) {
element.hammer().on('tap', function() {
counter++;
if (counter == 1) setTimeout(openmagnific,300);
event.gesture.preventDefault();
});
}
function openmagnific() {
if (counter == 2) {
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
} else {
xzoom.closezoom();
}
counter = 0;
}
xzoom.openzoom(event);
});
});
} else {
//If not touch device
//Integration with fancybox plugin
$('#xzoom-fancy').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
$.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}});
event.preventDefault();
});
//Integration with magnific popup plugin
$('#xzoom-magnific').bind('click', function(event) {
var xzoom = $(this).data('xzoom');
xzoom.closezoom();
var gallery = xzoom.gallery().cgallery;
var i, images = new Array();
for (i in gallery) {
images[i] = {src: gallery[i]};
}
$.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
event.preventDefault();
});
}
});
})(jQuery);
<link href="https://unpkg.com/xzoom#1.0.7/dist/xzoom.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://unpkg.com/xzoom#1.0.7/dist/xzoom.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
<body>
<div class="container">
<!-- default start -->
<section id="default" class="padding-top0">
<div class="row">
<div class="large-12 column"><h3>Product Zooming</h3></div>
<hr>
<div class="large-5 column">
<div class="xzoom-container">
<img class="xzoom" id="xzoom-default" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" xoriginal="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/01_b_car.jpg" />
<div class="xzoom-thumbs">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/thumbs/01_b_car.jpg" xpreview="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" title="The description goes here">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/02_o_car.jpg" title="The description goes here">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/03_r_car.jpg" title="The description goes here">
<img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/04_g_car.jpg" title="The description goes here">
</div>
</div>
</div>
<div class="large-7 column"></div>
</div>
</section>
<!-- default end -->
</div>
</body>
This code section performs a simple test for left or right swipe and then produces an alert saying which has been detected. It works fine in Chrome but fails in IE11. I suspect the fault lies in the addEventListener elements of the function swipedir but I cannot figure out what IE is objecting to or ignoring. Any help will be gratefully received. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<style>
#touchsurface{
width: 1240px;
height: 1400px;
padding: 10px;
font-size: 24px;
line-height: 1.1em;
background: lightyellow;
border: 1px solid orange;
}
#touchsurface2{
width: 1280px;
height: 1400px;
border: 1px solid orange;
background: lightyellow top center no-repeat;
}
#touchsurface2 #inner{
width: 100%;
height: 100%;
}
</style>
<script>
function swipedetect(el, callback){
var touchsurface = el,
swipedir,
startX,
startY,
distX,
distY,
threshold = 150,
restraint = 100,
allowedTime = 300,
elapsedTime,
startTime,
handleswipe = callback || function(swipedir){}
touchsurface.addEventListener("touchstart", function(e){
var touchobj = e.changedTouches[0];
swipedir = "none";
dist = 0;
startX = touchobj.pageX;
startY = touchobj.pageY;
startTime = new Date().getTime() ;
e.preventDefault();
}, false);
touchsurface.addEventListener("touchmove", function(e){
e.preventDefault() ;
}, false);
touchsurface.addEventListener("touchend", function(e){
var touchobj = e.changedTouches[0];
distX = touchobj.pageX - startX ;
distY = touchobj.pageY - startY ;
elapsedTime = new Date().getTime() - startTime ;
if (elapsedTime <= allowedTime){
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){
swipedir = (distX < 0)? "left" : "right" ;
}
}
if (distX > 0) {swipedir = "right";}
if (distX < -1) {swipedir = "left";}
handleswipe(swipedir);
e.preventDefault();
}, false);
}
</script>
</head>
<body>
<script>
window.addEventListener("load", function(){
var el = document.getElementById("touchsurface2");
var inner = document.getElementById("inner");
var hidetimer = null;
swipedetect(el, function(swipedir){
if (swipedir != "none"){
alert(swipedir);
clearTimeout(hidetimer);
hidetimer = setTimeout(function(){
inner.style.background = '';
}, 1000)
}
});
}, false);
</script>
<div id="touchsurface2">
<div id="inner">
Swipe Me
</div>
</div>
</body>
</html>
Even I tried to find an answer I didn't found the exactly information (until now).
I have the following code:
<!DOCTYPE html personal exercise>
<html lang="en">
<head>
<title>An DOM example project</title>
<meta http-equiv="refresh" content="0.005">
<style>
div {position:absolute; margin-left:100px};
</style>
</head>
<body id="theBody" onload="show_pattern()">
<script>
function show_pattern() {
var top_position=25, left_position=25;
var width=500, height=500;
var color_list=["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
var the_body=document.getElementById("theBody");
while(width>50) {
var this_div=document.createElement("div");
var random_color=Math.random()*7;
random_color=Math.floor(random_color);
this_div.style.top=top_position + "px";
this_div.style.left=left_position + "px";
this_div.style.width=width + "px";
this_div.style.height=height + "px";
this_div.style.background=color_list[random_color];
the_body.appendChild(this_div);
top_position += 10; left_position += 10;
width -= 20; height -= 20;}}
</script>
</body>
</html>
I want to display on same page two colored squares using same function (show_pattern()) and div style.
Thank you for your support!
You need to append a for loop and create within it wrapping divs for colored squares
function show_pattern() {
var color_list=["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
var the_body=document.getElementById("theBody");
for(i=0; i<2; i++){
var width=500, height=500, top_position=25, left_position=25;
var wrap_div=document.createElement("div");
wrap_div.className="wrap";
wrap_div.style.left=500*i + "px";
the_body.appendChild(wrap_div);
while(width>50) {
var this_div=document.createElement("div");
var random_color=Math.random()*7;
random_color=Math.floor(random_color);
this_div.style.top=top_position + "px";
this_div.style.left=left_position + "px";
this_div.style.width=width + "px";
this_div.style.height=height + "px";
this_div.style.background=color_list[random_color];
wrap_div.appendChild(this_div);
top_position += 10; left_position += 10;
width -= 20;
height -= 20;
}
}
}
body {
height: 100vh;
}
.wrap div {
position: absolute;
}
.wrap {
display: inline-block;
position: relative;
}
<body id="theBody" onload="show_pattern()">
</body>
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
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();
});