I am looking at creating a webpage with user feedback where the user can click within a certain element of the page, which brings up a comment box for the user to enter details, if the user left a note a post-it note would be left where they clicked. this note indication has to move when the user scrolls so that the note does not move away from the element it was left on.
Is this possible? I have been trying to search this on google but I only seem to get how to disable right click.
If it is possible where could I find the relevant information.
Cheers
To get via JS the coordinates where a user has clicked:
(function() {
window.onmousedown = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event; // IE-ism
console.log(event.clientX);
console.log(event.clientY);
}
})();
Here you have an example of how to move a DIV where user clicks:
(function() {
window.onmousedown = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event; // IE-ism
console.log(event.clientX);
moveDiv(event.clientX,event.clientY);
}
})();
function moveDiv(x_pos,y_pos){
var d = document.getElementById('myDiv');
d.style.left = x_pos + "px";
d.style.top = y_pos + "px";
}
Example
First, get mouse click coordinates: getting the X/Y coordinates of a mouse click on an image with jQuery
Than put element with 'position: absolute' at specified location.
Related
I am following this tutorial to build a store locator page with a Mapbox map.
I don't want to add custom markers because I already have custom map labels (symbols?), which means I don't need the optional last section of the tutorial and stop right after Add Event Listeners.
Once this is completed, the page should react to clicks in the side panel list, as well as on the map (2 event listeners). However, in the demo provided in the tutorial for that particular step, you can tell the code for the second event listener, the one making the map clickable, is not functioning, which makes me believe there is a mistake in the provided code:
// Add an event listener for when a user clicks on the map
map.on('click', function(e) {
// Query all the rendered points in the view
var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
if (features.length) {
var clickedPoint = features[0];
// 1. Fly to the point
flyToStore(clickedPoint);
// 2. Close all other popups and display popup for clicked store
createPopUp(clickedPoint);
// 3. Highlight listing in sidebar (and remove highlight for all other listings)
var activeItem = document.getElementsByClassName('active');
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
// Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
var selectedFeature = clickedPoint.properties.address;
for (var i = 0; i < stores.features.length; i++) {
if (stores.features[i].properties.address === selectedFeature) {
selectedFeatureIndex = i;
}
}
// Select the correct list item using the found index and add the active class
var listing = document.getElementById('listing-' + selectedFeatureIndex);
listing.classList.add('active');
}
});
Would anyone be able to tell what is wrong with this code?
Turns out the code is incomplete in that the cursor doesn't change to a pointer as you hover over a map label/marker so it doesn't clue you into realising you can click on it, hence my assumption it wasn't working at all. I assume the general users who would then face the map would be equally deceived unless the pointer shows up. So in the tutorial, if you do go ahead and click the marker, it will have the expected behaviour and display the popup, although no pointer is shown.
Here is how to create the pointer, based on this fiddle: https://jsfiddle.net/Twalsh88/5j70wm8n/25/
map.on('mouseenter', 'locations', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'locations', function() {
map.getCanvas().style.cursor = '';
});
I am binding a click event to generate a content-editable textbox.
Following is the code which I use to achieve that
$('.clickable-div').bind('click', function(ev) {
var $div = $(ev.target);
var offset = $div.offset();
var x = ev.clientX - offset.left;
var y = ev.clientY - offset.top;
$("#main-div")
.append(
'<div class="handle bar" style="top:'+y+'px;left:'+x+'px">');
});
The problem is when I click on the page, the textbox appears as expected but the mouse position moves abruptly to another location on the page.
Also this unexpected behaviour occurs only under following two conditions together:
1) When something is written in the text box and then new click is made to generate another text box.
2) When page is scrolled and the old textbox is no more visible.
Below are the snapshots of the ideal and the faulty cases
Any help will be appreciated.
I'm trying to implement a rubber-band selection box in Dojo's gfx with Canvas as the renderer. My intention is to have the selection box drawn when the mouse is clicked down and dragged, then disappear once the mouse is released. Unfortunately I've run into a problem.
jsFiddle example: http://jsfiddle.net/7F9fy/
The main problem is somewhere in onmousemove (or related to it):
whiteRect.connect("onmousemove",function(e) {
if(isMouseDown) {
if(whiteRect.groupSelector_) {
pStat.innerHTML = "dragging...";
console.debug("dragging...");
e.stopImmediatePropagation();
e.preventDefault();
var ex = (e.x ? e.x : e.clientX);
var ey = (e.y ? e.y : e.clientY);
if(groupSelector) {
// Also tried getShape, editing that shape, and setShape on groupSelector--same
// behavior, though.
var rectX = (ex - cnvDiv.offsetLeft < whiteRect.groupSelector_.x ? ex - cnvDiv.offsetLeft : whiteRect.groupSelector_.x);
var rectY = (ey - cnvDiv.offsetTop < whiteRect.groupSelector_.y ? ey - cnvDiv.offsetTop : whiteRect.groupSelector_.y);
surface.remove(groupSelector);
groupSelector = surface.createRect({
x: rectX,
y: rectY,
width: Math.abs(ex - cnvDiv.offsetLeft - whiteRect.groupSelector_.x),
height: Math.abs(ey - cnvDiv.offsetTop - whiteRect.groupSelector_.y)
}).setStroke({color: "blue", width: 3});
} else {
groupSelector = surface.createRect({
x: whiteRect.groupSelector_.x,
y: whiteRect.groupSelector_.y,
width: Math.abs(ex - cnvDiv.offsetLeft - whiteRect.groupSelector_.x),
height: Math.abs(ey - cnvDiv.offsetTop - whiteRect.groupSelector_.y)
}).setStroke({color: "blue", width: 3});
}
e.stopPropagation();
}
}
});
If I hold down the left mouse button in the shape/group (the white square in the above example) to which my mouse events are connected and start dragging, the box begins to draw, following my drag motion. When I release the mouse, sometimes the box disappears, and sometimes, it doesn't. When it doesn't, the box keeps being drawn and follows mouse movements as defined to do when I'm dragging.
In the jsFiddle, if you watch console.debug or the paragraph reporter under the canvas, you'll see that on occasion, onmouseup doesn't fire when you release the mouse (I checked for mouseup as well, but that has the same issue). In cases where onmouseup never fires, onmousemove continues to fire. If you click again, sometimes a full mouse click series fires (down, up, click, and move), which then makes the drawn rectangle disappear. Sometimes this doesn't happen, though, and onmousemove keeps firing. If you click after the drag/onmousemove becomes 'stuck' and nothing happens, there are no debug lines or changes to reporters for those events, so it's as if all mouse events except onmousemove are being squelched. I tried adding in stopPropagation, stopImmediatePropagation, and preventDefault, but that didn't help. I also tried using Dojo event's stop, but that didn't change the behavior.
For re-drawing the box in onmousemove, I've tried both 'getShape -> edit properties -> setShape' as well as deleting the shape and making a whole new one; neither of these methods stopped the problem and there wasn't any appreciable difference between them.
I'm using Dojo 1.8.3, and this happens in both Chrome (v25) and Firefox (v19), with either Canvas or SVG as the renderer.
Thoughts? Am I missing something obvious here?
Sorted it out. The problem is the onmouseup event when you decide to stop dragging out the shape can fire on the underlying/attached shape, or on the shape you're dragging. It's random, depending on the cursor position, but favors the drawn shape if you don't have an offset or delay in your drag. (Moveable.js and Mover.js in dojox/gfx pointed me in the right direction.)
I changed my box to a path in the course of trying to make it work, and this seems to perform better, but isn't necessary.
The key was to make a general 'onMouseUp' function, then call that from both the originator-shape's onmouseup as well as the dragged shape's onmouseup. My example is sloppy, but I hope it gets the point across.
jsFiddle: http://jsfiddle.net/n3KGY/1/
Key code:
// General method to clear out a selector if
// one was being drawn.
var selectorMouseUp = function(e) {
reporter.innerHTML = "onmouseup";
isMouseDown = false;
whiteRect.groupSelector_ = null;
if(groupSelector) {
if(selectorUp) {
groupSelector.disconnect(selectorUp);
}
surface.remove(groupSelector);
groupSelector = null;
}
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
};
// Mouseup event for the background/workspace
whiteRect.connect("onmouseup",function(e){
selectorMouseUp(e);
});
// Make a selector as a path on the surface
// and attach a mouseup to it
var makeSelector = function(x,y,w,h) {
groupSelector = surface.createPath()
.moveTo(x,y)
.hLineTo(x+w).vLineTo(y+h).hLineTo(x).vLineTo(y)
.setStroke({color: "blue", width: 3})
.closePath();
// Attach the same mouseup method as the workspace/background
selectorUp = groupSelector.connect("onmouseup",function(e){
reporter.innerHTML = "onmouseup (selector)";
selectorMouseUp(e);
});
};
bigRect.connect("onmousemove",function(e){
if(isMouseDown) {
if(bigRect.groupSelector_) {
var ex = e.clientX;
var ey = e.clientY;
reporter.innerHTML = "dragging at " + ex+","+ey;
var downX = bigRect.groupSelector_.x;
var downY = bigRect.groupSelector_.y;
var leadingX = (ex - grn.offsetLeft < downX ? ex - grn.offsetLeft : downX);
var leadingY = (ey - grn.offsetTop < downY ? ey - grn.offsetTop : downY);
var selWidth = Math.abs(ex - grn.offsetLeft - downX);
var selHeight = Math.abs(ey - grn.offsetTop - downY);
if(groupSelector) {
// If there's already a selector being drawn, get rid of it.
groupSelector.disconnect(selectorUp);
surface.remove(groupSelector);
}
// Draw the current selector
makeSelector(leadingX,leadingY,selWidth,selHeight);
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
}
}
});
I have simple code to "draw" in canvas element:
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
window.addEventListener("mousemove", rys, false);
}
function rys(e){
var xPos = e.clientX;
var yPos = e.clientY;
canvas.fillStyle="#000";
canvas.beginPath();
canvas.arc(xPos-7,yPos-7,10,0,Math.PI*2,true);
canvas.closePath();
canvas.fill();
}
window.addEventListener("load", doFirst, false);
As you can see, the function is working only when the mouse is over the canvas element. Now i want to make it "draw" when the mouse is clicked (just like in paint). Can someone tell me how to do it (with code)?
Thx for help
You need to keep track of the current mouse button state (pressed or not pressed) independently of the mouse movements.
You can do this by attaching event handlers to the "mousedown" and "mouseup" events, similar to how you attached to the "mousemove" event.
In these event handlers, you could keep track of the current state of the first mouse button by updating a global variable indicating whether or not the button is currently pressed. Then, in your "mousemove" handler, you can check this global variable and determine whether or not to paint when the mouse is moved.
When using the "mouseup" and "mousedown" events, you may want to limit your handling to only when the first mouse button is pressed. You can do this by checking that the event property "button" is 0. Note, that you can check for other buttons and keep track of them, also.
You can see a working example of this here: http://jsfiddle.net/mQtKz/
I'm making a web site and suddenly I ran into a problem. It's not huge, but I would like to fix it. On my site I have many images but there is a glitch. The images are "dragable". I mean when you click on a image and than move your mouse the images are being dragged. How can that be fixed?
http://nitidus-consto.kilu.org/
It is always like this.
Don't find anything weird in it.
Anyway this link can help you:
http://www.redips.net/firefox/disable-image-dragging/
you can use javascript to avoid the image dragging:
html file:
<!-- right image (dragging disabled) -->
<img src="image.png" onmousedown="if (event.preventDefault) event.preventDefault()">
javascript:
// register onLoad event with anonymous function
window.onload = function (e) {
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop
// if preventDefault exists, then define onmousedown event handlers
if (evt.preventDefault) {
// collect all images on the page
imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
}
};
// disable image dragging
function disableDragging(e) {
e.preventDefault();
}