I have a image with and i want display some text over image when i clicked 1 point in image, my problem is text don't display in mouse point, it display below mouse.
It is my code:
Script:
<script type="text/javascript">
$(function() {
$("#imgEx").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
//alert("X: " + relativeX + ' -' + " Y: " + relativeY);
var text = document.getElementById('textEx');
text.textContent = "X: " + relativeX + ' -' + " Y: " + relativeY;
text.style.left = relativeX + "px";
text.style.top = relativeY - 30 + "px"; // minus one range you want display text in image ( my number is 30 to display in mouse point)
});
});
</script>
and my form:
<form method="POST">
<div class="image">
<img id="imgEx" type="image" alt="image" src="./src/assets/cat.jpg" style="width:700px; height:600px" >
<h2 id="textEx"></h2>
</div>
</form>
Put wrapper as relative and content as absolute
Also use span element instead of h elements as h elemnt itself is associated with browser specific style(css)
$(function() {
$("#imgEx").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
var text = document.getElementById('textEx');
text.textContent = "X: " + relativeX + ' -' + " Y: " + relativeY;
text.style.left = relativeX + "px";
text.style.top = relativeY + "px";
});
});
.image {
position: relative;
}
#textEx {
position: absolute;
font-size: 20px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form method="POST">
<div class="image">
<img id="imgEx" type="image" alt="image" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" style="width:700px; height:600px">
<span id="textEx"></span>
</div>
</form>
You just have to assign position:absolute for #textEx
#textEx{
position:absolute;
}
Related
I'm trying to simulate windows pointer trails effect:
with the same settings there's in windows. This is what I tried:
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = 0;
document.addEventListener("mousemove", function (e) {
$("#trail" + (a - 6)).remove();
document.body.innerHTML = document.body.innerHTML + '<img class="trail" id="trail' + a + '" style="left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>';
document.getElementById("cursor").style = "z-index:2;left:" + e.pageX + "px;top:" + e.pageY + "px;";
a++;
});
*{cursor:none;}
#cursor {
position:fixed;
z-index:999999;
width:12px;
height:19px;
}
.trail {
z-index:1;
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<button onclick="alert('click')">click me</button>
But I have few problems with this code:
I can't press buttons or anything else, and if I change the z-index to be negative the cursor is behind the buttons.
If page zoom is different then 100% the cursor size is bigger/smaller.
It's too fast, in the windows pointer trails there's bigger gap between the cursor trails.
I want it to be possible to change trails length(like in the windows settings) but I can't do it because of problem 1.
You can use pointer-events:none to solve problem 1, to solve problem 2 you can do "transform:scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")", to solve problem 3 you can add cursor image only in odd/even loops(I compared it to the windows pointer trails and it's the same speed), and to solve problem 4 you can use animation timing:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{cursor:none;}
.trail
{
position:fixed;
width:0;
height:0;
transform-origin:0 0;
}
#trails
{
pointer-events: none;
position:fixed;
top:0;
left:0;
z-index:99998;
width:100%;
height:100vh;
}
#cursor
{
pointer-events:none;
position:fixed;
z-index:999999;
width:12px;
height:19px;
transform-origin:0 0;
}
#keyframes pointer_trails
{
0%{width:12px;height:19px;}
100%{width:12px;height:19px;}
}
</style>
<script>
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = true;
//makes image stay the same size:
$(document).ready(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
$(window).resize(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
//pointer trails effect:
document.addEventListener("mousemove", function (e) {
document.getElementById("cursor").style = "left:" + e.pageX + "px;top:" + e.pageY + "px;";
if (document.getElementById("_checked").checked && a)
$("#trails").append('<img style="animation:pointer_trails ' + document.getElementById('trails_length').value + 's ease-in-out;left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>');
a = !a;
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
</script>
</head>
<body>
<div id="trails"></div>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<div style="text-align:center">
<input type="checkbox" id="_checked" checked/>Show pointer trails
<br />
Short<input type="range" id="trails_length" min="0.02" max="0.15" step="0.026" value="0.15"/>Long
</div>
</body>
</html>
I have the following code that scrolls 85px up and down a div by pressing buttons instead of using any scrollbars.
https://jsfiddle.net/e059ruzv/
But for some reason even after you have gone to the very bottom of the div pressing the down button takes you further downwards into undefined space. Similarly when you are at the very top of the div pressing the up button takes you a further 85px higher. Its like the div has infinite height both above and below the actual content of the div.
var marginTop = 0;
var upHeight = 85;
var downHeight = 85;
$('.up').click(function() {
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
console.log('currentOffset', currentOffset);
var result = currentOffset - upHeight - marginTop;
$elem.css("margin-top", result + "px");
});
$('.down').click(function() {
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
var result = currentOffset + downHeight + marginTop;
console.log('.currentOffset', currentOffset)
$elem.css("margin-top", result + "px");
})
div > div {
transition: margin 0.05s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>
Any help much appreciated. Thanks in advance.
Something like this should work.
1st get the inner max height(overflow) for your box container with
var maxHeight = boxContainer.prop('scrollHeight') - downHeight;
2nd check current scroll height use
var boxContainer = $('.container');
boxContainer.prop('scrollHeight')
For up, if scroll height > than the box height you can continue, otherwise you can't up anymore because it hit the bottom.
For down, if the scroll height > maxHeight you should not be able to go down anymore because you are at the top. if scroll height <= maxHeight you can go down.
var marginTop = 0;
var upHeight = 85;
var downHeight = 85;
var boxContainer = $('.container');
var maxHeight = boxContainer.prop('scrollHeight') - downHeight;
$('.up').click(function() {
if (boxContainer.prop('scrollHeight') > boxContainer.height()) {
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
console.log('currentOffset', currentOffset);
var result = currentOffset - upHeight - marginTop;
$elem.css("margin-top", result + "px");
}
});
$('.down').click(function() {
if (boxContainer.prop('scrollHeight') <= maxHeight) {
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
var result = currentOffset + downHeight + marginTop;
console.log('.currentOffset', currentOffset)
$elem.css("margin-top", result + "px");
}
})
div>div {
transition: margin 0.05s ease;
}
.container {
width: 125px;
height: 300px;
overflow: hidden;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div class="container">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>
You have to limit it by using if:
var marginTop = 0;
var upHeight = 85;
var downHeight = 85;
var $elems = $('div>div');
$('.up').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
var test = (($elems.size() -2) * upHeight-10) * -1;
if (currentOffset >= test) {
//console.log('currentOffset', currentOffset);
var result = currentOffset - upHeight - marginTop;
$elem.css("margin-top", result + "px");
}
});
$('.down').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
if (currentOffset <= 0) {
var result = currentOffset + downHeight + marginTop;
//console.log('.currentOffset', currentOffset)
$elem.css("margin-top", result + "px");
}
})
div > div {
transition: margin 0.05s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>
This also works if you add more divs.
I am trying to rotate, resize and drag an image using interactjs.
I am using pinch to zoom for resizing.
After rotating the image the drag feature does't work well and positions the image at wrong coordinates.
I also tried to move the img by (width/2,height/2) before rotating so that it retains its position, but this stopped resize and rotate feature.
Here is the code I am using.
The pinch to zoom and rotate only works on touch phone :
Here is the fiddle(Please check in Phone for pinch-to-zoom and rotate).
HTML
<div style="display:flex;flex-direction:row;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;width:100%">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-11-30/17784-d2820ac7614e8f4eeb755c38bdccadc0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;height:50px;width:150px">
<button id="save" style="width:50px" />
<button id="savetwo" style="height:40px;border-radius:20px;width:70px">Save Image</button>
</div>
<br />
</div>
</div>
SCRIPT
$(document).ready(function(){
$(".Choice").click(function () {
console.log($(this));
var url = '"' + $(this)[0].src + '"';
var index = url.indexOf("http://");
console.log(url);
var modurl = url.substring(index, url.length - 1);
console.log(url);
$(".ChoiceImage").attr("src", modurl);//url appends src to the current uri so I had to split it(suggest alternative )
});
var scale = 1,angle=0;
var gestureArea = document.getElementById('gesture-area');
var scaleElement = document.getElementById('chosenOne');
var scaleElementParent = scaleElement.parentElement;
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1 + event.ds);
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
scaleElementParent.style.webkitTransform =
scaleElementParent.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
function dragMoveListener(event) {
var target = event.target.children[0];
console.log(target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
});
The user clicks on an image from the list of images to perform the actions.
Thanks in advance
Your main issue was to scale and rotate the image AND the "gesture area.
So if the gesture detection element is rotated, interac.js only can misinterpret the movements.
I cleaned the code a little... And removed all the unused elements from this answer, like the buttons...
Here is the code in full and a CodePen to try it on a mobile device.
console.clear();
$(".Choice").click(function() {
$(".ChoiceImage").attr("src", $(this).attr("src"));
});
var scale = 1,
angle=0,
gestureArea = $('#gestureArea')[0],
scaleElement = $('.ChoiceImage'),
scaleElementParent = $('#gestureArea');
// Scale and rotate
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1+event.ds);
scaleElement.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
//scaleElementParent.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
// Drag
function dragMoveListener(event) {
var target = $(event.target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.attr('data-x')) || 0) + event.dx;
y = (parseFloat(target.attr('data-y')) || 0) + event.dy;
// translate the element
target.css({'transform':'translate(' + x + 'px, ' + y + 'px)'});
// update the posiion attributes
target.attr('data-x', x);
target.attr('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
#gestureArea{
position:relative;
z-index:999;
width:150px;
height:150px;
background-color:transparent;
border:none;
padding: 0px 0px 0px 0px;
}
.container{
display:flex;
flex-direction:row;
border:solid grey 2px;
border-radius:20px;
position:relative;
float:left;
background-color:silver;
width:100%;
position:fixed;
bottom:0;
}
img{
width:150px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
<div id="gestureArea">
<img id="chosenOne" class="ChoiceImage resize-drag">
</div>
<div class="container">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png">
</div>
when ever i hover over the image coordinates are displayed i would like to append those coordinates in a div is it possible
here is a fiddle of what i have so far
Fiddle
Jquery.js
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX);
}).$('#img').on('click', function () {
$('(' + e.clientX + ',' + e.clientY + ')').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
index.html
<div id="hoverdiv"></div>
<img id="img" class="hover" src="Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
I just updated your code a little bit and I hope it fulfills your requirements.
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX);
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('#img').click(function(e) {
$('#append').append('(' + e.clientX + ',' + e.clientY + ')');
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="append">
</div>
The problem is that the click event won't call because the mouse will be constantly over #hoverdiv instead. So you will want to add a click event to that:
$('#hoverdiv').on('click', function (e) {
$( '<span>(' + e.clientX + ',' + e.clientY + ')</span>' ).appendTo( "#append" );
}).mouseout(function(){
$('#hoverdiv').hide();
});
Also note the appendTo() functions needs a html string as the argument. So add some tags (such as <span>).
Demo
There are few mistakes in the code.
The binding of click event to the image was not done correctly.
The tooltip displayed was right below the mouse and therefore the click event of the image was not going through. Please add and offset left or top so that the tooltip doesnt interfere with the click on the image.
I guess appendTo expects html and not plain text.
Corrected Code
$('.hover').mousemove(function(e){
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX + 10);
}).on('click', function (e) {
$('<p>(' + e.clientX + ',' + e.clientY + ')</p>').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});
I have updated the code to capture the coordinates on hover and click.
To append text to a div on hover, add $('#append').append('(' + e.clientX + ',' + e.clientY + ')'); to your mousemove event.
Note: I have added an offset of 10px to the hoverDiv to move it away from cursor.
Updated Fiddle
$(function() {
$('.hover').mousemove(function(e) {
var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top', e.clientY).css('left', e.clientX + 10);
$('#appendHover').append('(' + e.clientX + ',' + e.clientY + ')');
}).mouseout(function() {
$('#hoverdiv').hide();
});
$('.hover').click(function(e) {
$('#appendClick').append('(' + e.clientX + ',' + e.clientY + ')');
});
});
#hoverdiv {
display: none;
position: absolute;
font-size: 14px;
background-color: #fff;
color: #404040;
padding: 7px;
}
#appendClick {
background-color: cornflowerblue;
}
#appendHover {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hoverdiv"></div>
<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />
<div id="appendClick">
</div>
<div id="appendHover">
</div>
Try a click event like this and see if it helps:
$('#img').click(function(e) {
var offset = $(this).offset();
alert(e.pageX - offset.left);
alert(e.pageY - offset.top);
});
If it's ok you can just append it to a div.
i am trying to get the users screen size and resize an image to fit their screen size my current code works but only in firefox. In IE and Chrome the image never resize could somebody please help me?
http://jsfiddle.net/dwcribbs/ZK4tK/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../style.css">
<script type="text/javascript" src="../javascript.js"></script>
<script>
window.onload = function(){
var w =screen.availWidth - 20 + "px";
var h =screen.availHeight - 80 + "px";
document.getElementById('full').style= "height:" + h + ";" + "width:" + w; +";";
alert(h+w);
checkCookie();
document.getElementsByClassName('box1')[0].addEventListener('click', correct, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseover', shade, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseout', unshade, false);
document.getElementsByClassName('bg')[0].addEventListener('click', wrong, false);
function shade()
{
document.getElementById('button').style= "background-color: #ADD8E6; opacity:.4;";
}
function unshade()
{
document.getElementById('button').style= " ";
}
function loc()
{
var lo = "OS2.html";
return lo;
}
}
</script>
</head>
<body>
<div style="color: red;" onclick=" alert('Open Microsoft Power Point without *searching* for it\nSave it in the documents library (using backstage-view, save as), with the default name');" id="help">
<center>
?
</center>
</div>
<div class="wrap">
<img id="full" style = "height: 500px; width: 500px;"class="bg" src = "../Pic/desktop.png" >
<div id="button" style=" " class="box box1"></div>
</div>
</body>
</html>
Thanks!
Instead of
document.getElementById('full').style = "height:" + h + ";" + "width:" + w;
+";"; // Useless NaN
you should use [Demo]
var s = document.getElementById('full').style;
s.height = h;
s.width = w;
or [Demo]
document.getElementById('full')
.setAttribute('style', "height:" + h + ";" + "width:" + w);