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.
Related
I've started to build an drag and drop editor with html and Javascript. All in All it works fine.
You can drag images from a toolbar and drop them into the dropzone.
If you drop an image you actually create a copy of the original. thus you can drop them multiple times. The images get a left and top value to set their position. The value is relative (in %). Thats because it's possible to zoom in and out.
Now if I drop an image on another one it gets removed. Unfortunately I've got no idea how to prevent this.
I think The main issue is, that the dropped image becomes a child of the already dropped one and not of the dropzone. But preventing event capturing didn't helped.
It would be great if someone could help me out.
Here you see the main js drag and drop functions. I think thats the location where the problem can be solved. If you need any other code just let me know.
function allowDrop(ev) {
ev.preventDefault();
}
function DragStart(ev) {
ev.dataTransfer.setData("application/json", JSON.stringify([ev.target.id,(ev.offsetX || ev.clientX - $(ev.target).offset().left),(ev.offsetY || ev.clientY - $(ev.target).offset().top)]));
}
function DropIt(ev) {
ev.preventDefault();
var data = JSON.parse(ev.dataTransfer.getData("application/json"));
var width = document.getElementById("dropzone").clientWidth;
var height = document.getElementById("dropzone").clientHeight;
var copyimg = document.createElement("img");
var original = document.getElementById(data[0]);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
copyimg.style.left =(ev.clientX - (screen.width - width) * 0.5 - data[1]) / width *100 + '%';
copyimg.style.top = (ev.clientY - screen.height * 0.2 - data[2]) / height *100 + '%';
return false;
}
}
You have to check the target element, if the element is an IMG type get the dropzone parent element:
supposing the dropzone is a <div> element
if(ev.target.tagName!="DIV")
ev.target=$(ev.target).closest('div')[0];
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;
});
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.
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
I wanted to do something similar to this.
In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the image is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.
What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.
Where I can see a tutorial, or a demo?? or how can I do the this??
Thanks
Basically, there are three parts to what you want to do.
Clicking on the image will show the image with respect to browser height
You can go to the next image while you are in this mode
Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at
I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.
With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create
$(window).resize(function() {
var windowheight = $(window).height();
$("#imgdiv").css("height", windowheight);
});
Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.
With #2, the arrows just create a new img tag. And the idea is something like
function loadnew() {
// create the new image
var newimg = "<img id='newimg'></img>"
$("#imgcontainer").append(newimg);
// make sure it has the same classes as the current img
// so that it's in the same position with an higher z-index
// then load the image
$("#newimg").addClass( "class1 class2" );
$("#newimg").css( "z-index", "+=1" );
$("#newimg").css( "opacity", 0 );
$("#newimg").attr("src", "url/to/img");
// animate the thing and then replace the src of the old one with this new one
$("#newimg").animate( {
opacity: 1;
}, 1000, function() {
$(oldimg).attr("src", $("#newimg").attr("src"));
});
}
Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a
$(window).resize(function() {
var windowwidth= $(window).width();
$("#imgdiv").css("width", windowwidth);
});
to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler
$("#superimgdiv").mousemove( function(e) {
// need to tell where the mouse is with respect to the window
var height = $(window).height();
var mouseY = e.pageY;
var relativepct = mouseY/height;
// change the position relative to the mouse and the full image height
var imgheight = $("superimg").height();
$("superimgdiv").css("top", -1*relativepct*imgheight);
});
And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.