KineticJS Select shape and display div directly below it - javascript

I am using KineticJS to draw shapes on a canvas. When a shape is clicked, I would like to overlay a div directly below the selected shape. This will allow the user to change some properties (text, colour etc).
I am handling the click event like this and this is working fine
myShape.on('click', function () {
alert('clicked');
});
So rather than just alerting, I would like to show a div just below the selected shape.
I am not sure how to go about this with positioning a div at a point within the stage.
Many thanks

image.on('click', function() {
var input = document.createElement('input');
input.style.position = 'absolute';
input.style.top = image.y() + 'px';
input.style.left = image.x() + 'px';
document.body.appendChild(input);
});
http://jsbin.com/reqile/2/edit?js,output

Related

How to add multiple custom control button leaflet js?

I found the code to add a single button on the leaftlet map to the topleft corner. But now I want to add multiple buttons one after another.
Is it possible to insert multiple buttons inside the following code?
I also have tried to use checkbox/radio buttons. But I dont know how to add labels to the checkbox and button.
And add checked/unchecked properties for them.
Thanks.
My Code here:
var customControl = L.Control.extend({ options: {position: 'topleft'},onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
onAdd: function (map) {
var container = L.DomUtil.create('input','my-button btn');
container.type="button";
container.title="x";
container.value = "x";
container.label = "x";
container.style.backgroundColor = 'white';
container.style.backgroundSize = "30px 30px";
container.style.width = '40px';
container.style.height = '40px';
container.style.borderRadius = "25px";
container.style.padding = "0";
container.style.margin = "10px";
container.onclick = function(){
console.log('buttonClicked');
}
return container;}});
You can create as many Leaflet "controls" as you wish. You can insert them at any corner, and they will simply "stack up" (with a 10px margin if I remember correctly) in a vertical column in the given corner.
As for the content of each control, it is purely HTML and CSS. In your code you are using Leaflet's utility L.DomUtil.create(), but you could have also simply used the native document.createElement() (but would have to add the class in a separate line) or even jQuery DOM utility (with which you can directly write an HTML string).
Then you can build complex content (with inputs, associated labels, etc.). Just look for HTML tutorials / JavaScript that build DOM nodes.

Images are not trailing mouse

I am trying to make an image get attached to the mouse and it isn't showing up correctly when I hover over the image. I need to make it so that the image preview that is trailing the mouse and is larger on the mouse preview.Could you please help me?
Here is the fiddle:
https://jsfiddle.net/pgyt1qpg/1/
here is the code:
document.querySelector('.container').addEventListener('mouseover', function(e) {
e.preventDefault();
if (e.target.tagName === 'IMG') {
//create the div tag for preview
var myElement = document.createElement('div');
myElement.className = 'preview';
e.target.parentNode.appendChild(myElement);
//Create the image element for preview
var myImg = document.createElement('img');
var imgLoc = e.target.src;
myImg.src = imgLoc;
myElement.style.left = e.offsetX + 15 + 'px';
myElement.style.top = e.offsetY + 15 + 'px';
myImg.style.width = "500px";
myImg.style.height = "500px";
myElement.style.zIndex = "-1";
myElement.appendChild(myImg);
//When mouse goes out of the image delete the preview
e.target.addEventListener('mouseout', function handler(d) {
var myNode = d.target.parentNode.querySelector('div.preview');
myNode.parentNode.removeChild(myNode);
e.target.removeEventListener('mouseout', handler, false);
}, false);
//place the image 15 inches to the bottom, right of the mouse
e.target.addEventListener('mousemove', function(f) {
myElement.style.left = f.offsetX + 15 + 'px';
myElement.style.top = f.offsetY + 15 + 'px';
});
}
}, false);
UPDATE:
I have updated the fiddle (many thanks to peter) and the image is on the right side now. I just need to make it closer to the mouse. How do I go about doing that?
Problem 1: Getting the hover preview to follow the mouse.
Solution: Add relative or absolute positioning.
myElement.style.position = 'absolute';
Problem 2: Getting the hover preview to appear above the thumbnails.
Solution (creates new problem though): Raise z-index to 2.
This will create the problem of the hover preview interrupting the hover event over the thumbnail when it appears. You can solve this by checking the mouse coordinates in the mouseout event and seeing if they are actually outside the bounds of the selected triggered thumbnail. If they are not, you cancel the preview close because it's just the interruption. There are other ways to do it but you seem comfortable with the coordinates so that's what came to mind.
Also, you need to adjust the mouse tracking coordinates to make it line up with the actual cursor better. That should get you moving, feel free to update the Fiddle and ask if there's more problems.
I can't comment.. But to answer your last question in the answer's comments I believe you are going to have to do something like this.
You will have to reload the image to get the original size.

Javascript abstract figures following mouse

I just found a very cool effect that I would love to implement on website. The effect can be seen here: http://whois.domaintools.com/
As you can see, some kind of gif is following the mouse around. I think this look extremely cool, and I would love to know how its made.
So here's the question: How can this in fact be made (javascript is MUCH preffered) Keep in mind that this effect only occurs inside the header of the site.
It is made by javascript. You create a canvas element and javascript draws some randomly positioned dots and lines between them.
Because javascript is client language, you can view the source. The file you are looking for is there.
If you want to get an image to move with your mouse, you'll need to bind to the mousemove event. That's what's happening on that site, too, though I think it's more complex than just moving a gif along with your mouse.
But if you want to make a gif appear under your cursor as it moves, you can use this:
// when mouse enters whatever element you want
// (in this case the header), create the image
window.addEventListener('mouseenter', function(e) {
img = document.createElement('img');
img.src = 'http://path.to.image';
document.body.appendChild(img);
});
// move image according to mouse position
window.addEventListener('mousemove', function(e) {
img.style.position = 'absolute';
img.style.top = e.clientY + 'px';
img.style.left = e.clientX + 'px';
});
// remove image when mouse leaves element
window.addEventListener('mouseleave', function(e) {
document.body.removeChild(img);
img = null;
});

Html2Canvase -> on scroll image is empty

on click -> i m adding a div with absolute position in a DIV which has specific Height and Width (vertical scroll) in which user input its data and on save i use html2canvas to convert html to image.
var element = angular.element("#beforeComment_" + index);
html2canvas(element).then(function (canvas) {
var _Image = canvas.toDataURL("image/png");
var _img = _Image.replace(/^data:image\/(png|jpg);base64,/, "");
});
if div is in visible area it works perfect but as i use window scroll to move position DIV down i get blank image.
but as compared to if i use
html2canvas(window.document.body).then(function (canvas) {
var _Image = canvas.toDataURL("image/png");
var _img = _Image.replace(/^data:image\/(png|jpg);base64,/, "");
});
it works perfect even i scroll or drag drop Div.
it would be better if there is pluker to make things more clear but i got complex html structure and it will add more complexity
can some one help :(
Have you tried
var element = angular.element(document.querySelector('#beforeComment_' + index));
Also, check if '#beforeComment_' + index actually exists.

Javascript dragging selects text and elements around the drag area

I'm using the following code to allow users to resize a DIV element vertically, but when the click and drag the handle, text and other elements on the page get selected as if the user was just clicking and highlighting everything on the page. Is there a way to prevent this from happening as this looks very bad? This is being used with Prototype.js.
function DragCorner(container, handle) {
var container = $(container);
var handle = $(handle);
// Add property to container to store position variables
container.moveposition = {y:0};
function moveListener(event) {
// Calculate how far the mouse moved
var moved = { y:(container.moveposition.y - event.pointerY()) };
// Reset container's x/y utility property
container.moveposition = {y:event.pointerY()};
// Update container's size
var size = container.getDimensions();
container.setStyle({height: size.height + moved.y + 'px'});
}
// Listen for 'mouse down' on handle to start the move listener
handle.observe('mousedown', function(event) {
// Set starting x/y
container.moveposition = {y:event.pointerY()};
// Start listening for mouse move on body
Event.observe(document.body,'mousemove',moveListener);
});
// Listen for 'mouse up' to cancel 'move' listener
Event.observe(document.body,'mouseup', function(event) {
Event.stopObserving(document.body,'mousemove',moveListener);
console.log('stop listening');
});
}
Following up your earlier question and answer, add a small handle element and make it as the only element that can be selected and draggable. Also I guess you made that div's position as relative and handle position as absolute. Right??
Adding the following to the DIV fixed this:
onselectstart="return false;"

Categories

Resources