I am attempting to use JQuery to animate an image to the point where I click my mouse on a div.
The div of the html has an id of "stage" and the image has an id of "player". I have successfully gotten the header to update when the user clicks on the stage, but once I add in the other JQuery to have the image move to my mouseclick on the stage, neither works.
Perhaps its something obvious since I'm new at JQuery but hopefully someone can spot my error.
Here's my code for the JQuery:
$(document).ready(function(){
//alert('It works');
$('#stage').click(function() {
$('#header').html('Image is moving!');
});
$('#stage').click(function(e){
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
});
In summary, when someone clicks in the stage div the header above it should change, and the image should move to where the person clicked on the stage.
Two things:
$('#player').animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
Has syntax errors. It should be:
$('#player').animate({
top: e.pageY,
left: e.pageX
}, 800);
Notice I left off 'px' since it isn't necessary.
You can see it working here: http://jsfiddle.net/VBzUw/
Related
A user will be able to click on 3 points on an image, and i want to display a BLACK dot at those points. Then i will save these values in my database, and regenerate the image with those 3 points later on.
This is a 2 part question:
1.) In my code, i am not able to detect the onClick event when the image is clicked. Can someone look into this. Here's my code. JSFIDDLE
$(document).ready(function () {
$('body').click(function (ev) {
alert("d");
mouseX = ev.pageX;
mouseY = ev.pageY
alert(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
HTML
<body background="http://www.craigjoneswildlifephotography.co.uk/blog/wp-content/uploads/2010/07/CMJ57311.jpg">
</body>
2.) Say that i have the X and Y coordinates of the points, and how can i regenerate the image with those points ?
Just use document instead of body (your body element has a calculated height of 0, but document is always the full size of the window):
http://jsfiddle.net/TrueBlueAussie/95vczfve/5/
$(document).ready(function () {
$(document).click(function (ev) {
mouseX = ev.pageX;
mouseY = ev.pageY
console.log(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
As a side note: Your original JSFiddle is also a great example of why you should not connect delegated events to body instead of document. The body element can be styled out of existence (also document exists before the DOM is even loaded) :)
Or, as Brian provided, a reduced version http://jsfiddle.net/BrianDillingham/95vczfve/7/:
$(document).ready(function(){
$(document).click(function (ev) {
$("body").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '10px',
height: '10px',
background: '#000000'
})
);
});
});
And Brian's final update with limit of 3 dots: http://jsfiddle.net/BrianDillingham/95vczfve/8/
Your body has 0 height because it has 0 content.
Try adding this to your CSS:
html, body { height: 100%; margin: 0; }
Or try adding some content.
jsFiddle
On a side tip, a lot of things about your jQuery can be made cleaner/easier:
$(document).ready(function(){
// here I asign the event dynamically, not needed for 'body' as such tag should always be present,
// but something you should look into
// see also: http://api.jquery.com/on/
$(document).on('click', 'body', function(e) {
mouseX = e.pageX;
mouseY = e.pageY
// simply press F12 to look at your browsers console and see the results
console.log('Mouse Position:\t' + mouseX + '|' + mouseY);
// no need in JS to write var for every variable declartion,
// just seperate with a comma
var color = '#000000',
size = '5px'; // changed size to 5px from 1 just to make it easier to see what's going on for you
// No need to use $("body") since this event takes place on the body tag
// $(this), in an event, always equals the selector the event is tied to
$(this).append(
// making an element with jquery is simple
// no need to insert whole tag, all you need is tag name and a closer
// like so
$('<div />')
// easily tie all css together
.css({
// also, in jquery CSS, any css variable with a '-'
// can be renamed when assigning
// simply remove the '-' and capitilize the first letter of the second word
// like so, here in 'background-color'
backgroundColor: color,
height: size,
left: mouseX + 'px',
position: 'absolute',
top: mouseY + 'px',
width: size
})
);
})
});
Regarding part 2 of your question, my first thought is to include query params in the image URL, so that instead of http://www.example.com/thingies/someimage.jpg you get something like http://www.example.com/thingies/someimage.jpg?x0=10&y0=25&x1=30&y1=5. From there you would simply check if that string has query params with names matching what you're looking for (x0, y0, x1, etc...) and place points according to those.
Alternatively, you could also store the parameters in the URL for that web page, but that might lead to noisy URLs depending on what you're doing.
This depends on the server storing the coordinates, though.
My second thought is Local Storage, would store the points with the client, but that means that the points are not necessarily sent to the server, and are being read only from the client's browser. It also depends on the browser supporting that, and allowing that. Of course, since 3 coordinates is a rather small set of data, it could be stored in a browser cookie.
I'm working on creating a basic heatmap for a site using the following:
$(document).ready(function() {
$(document).on('mousedown', function(evt) {
console.log('X: '+ evt.pageX);
console.log('Y: '+ evt.pageY);
$.post('clickmap.php', {
x:evt.pageX,
y:evt.pageY
});
});
});'
fiddle: http://jsfiddle.net/8jjo7q5y/
Works great, besides when also including click coordinates of a click over an iframe. It appears that this is possible when using CrazyEgg and I've personally tested CrazyEgg by clicking a Google Ad (housed inside an iframe) and the heatmap data returned properly to CrazyEgg.
Any ideas on how to accomplish click tracking an entire page body with iframes included.
HTML:
<div></div>
<iframe src="http://www.jsfiddle.net"></iframe>
CSS:
div {
position: absolute;
width: 300px;
height: 150px;
z-index: 2;
}
iframe {
position: absolute;
width: 300px;
height: 150px;
z-index: 1;
}
JavaScript:
$(window).click(function(e) {
console.log("x:" + e.pageX + ", y:" + e.pageY);
});
FIDDLE http://jsfiddle.net/a9owgqrv/
If the iframe content doesn't need any user interaction at all (clicking, scrolling, etc.), you could place a transparent div on top of it, which would capture the mouse clicks. Otherwise, I think you're out of luck.
(Thanks to #Andranik for showing that the div doesn't actually need transparent (opacity) styling.)
short answer for iframes pointing to different domain without making use of proxys or putting a div over the iframe that causes not to be able to click in the iframe: no
nevertheless here is some bloody attempt
it uses the blur event that gets fired when clicked "outside" of window e.g inside iframe, i added mousemove event to have the coordinates where user clicks into iframe, but this only works once, to work again the user must click outside the iframe and inside again, but its better than nothing ;-)
$(document).ready(function() {
var mouse = {x: 0, y: 0};
document.addEventListener('mousemove', function(e){
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY
}, false);
$(window).blur( function(e){
console.log("clicked on iframe")
console.log('X: '+ mouse.x);
console.log('Y: '+ mouse.y);
});
$(document).on('mousedown', function(evt) {
console.log('X: '+ evt.pageX);
console.log('Y: '+ evt.pageY);
//$.post('clickmap.php', {
//x:evt.pageX,
//y:evt.pageY
//});
});
});
http://jsfiddle.net/8jjo7q5y/1/
I'm trying to create a crude crop tool with JavaScript/jQuery. I have a HTML element with fixed dimensions and overflow:hidden that I’m using as my canvas. The user should be able to drag an image inside this element, to position the image to their liking within the crop boundaries.
I’m having a little trouble with calculating the correct offset.
I’ve set up a jsFiddle here: http://jsfiddle.net/YtyFH/
The part I’m having trouble with is:
if (drag) {
$img.css({
top: e.offsetY - this.offsetTop,
left: e.pageX - this.offsetLeft
});
}
Currently, when the user begins to drag inside the canvas, the edge of the image snaps to the cursor position. I’d like the image to begin moving from where it already is.
This is a possible fix. See the Updated Fiddle
var $img = $this.find('img');
var offset = {
left : $img.css('left') == 'auto' ? e.pageX : e.pageX - parseInt($img.css('left')),
top : $img.css('top') == 'auto' ? e.pageY : e.pageY - parseInt($img.css('top'))
}
$this.on('mousemove', function (e) {
if (drag) {
$img.css({
top: e.pageY - offset.top,
left: e.pageX - offset.left
});
}
})
I currently have an image displaying when the mouse hovers over a div...
but i only what the image to display next to the mouse if a "div" has a HTML property of "align="center" and if it doesn't then i don't want the image to display?
I think i'm quiet close but i can't figure out how to call the var "divalign" attribute, spent all last night on it :S
$(document).ready(function() {
var $img = $("#MainImage");
$img.hide();
var divalign = $("div").attr("align="center");
$('div').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}).mouseleave(function() {
$img.fadeOut(250);
});
});
Thanks in advance.
$('div').mousemove(function(e) {
if ($(this).attr('align') === 'center') {
// only show if the align attribute has value center
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});
You have error in this line
var divalign = $("div").attr("align="center");
Change that to
var divalign = $("div").attr("align","center");
It would be cleaner, if you could give these DIVs a class name (ex: class="alignCenter"), then register the event handler on those divs.
$('div.alignCenter').on('mousemove', function(e) {
..........................
});
Try this:
$('div[align="center"]').mousemove(function(e) {
$img.fadeIn(0);
$img.offset({
top: e.pageY - $img.outerHeight()-2,
left: e.pageX - ($img.outerWidth()-18)
});
}
}).mouseleave(function() {
$img.fadeOut(250);
});
i have the following code to use a "cursor trail" in wordpress.
once inserted, the "cursor trail" is visible, however the image location cannot be found
$(document).ready(function() {
$(document).mousemove(function(e) {
//create img elements having pointer.png in their src
pointer = $('<img>').attr({'src':'pointer.png'});
//and append them to document
$(document.body).append(pointer);
//show them at mouse position & fade out slowly
pointer.css({
'position':'absolute',
top: e.pageY +2 , //offsets
left: e.pageX +2 //offsets
}).fadeOut(1500);
});
});
I have edited the path to the image cursor as follows:
$(document).ready(function() {
$(document).mousemove(function(e) {
//create img elements having pointer.png in their src
pointer = $('<img>').attr({'wp-content/uploads/2012/07/':'meerkat2.gif'});
//and append them to document
$(document.body).append(pointer);
//show them at mouse position & fade out slowly
pointer.css({
'position':'absolute',
top: e.pageY +2 , //offsets
left: e.pageX +2 //offsets
}).fadeOut(1500);
});
});
Please can someone perhaps point out why the path to the image source is incorrect?