How can I make a picture follow the mouse in a specific <div>?
I know that I can get the mouse position from e.pageX & e.pageY and with the code document.onmousemove = followmouse;. Run the followmouse function every moment the mouse move in a page and in the followmouse function, set the picture position to the mouse position. For the exact question I asked here (how can I make a picture follow the mouse in a specific <div>), I have this idea:
Get my div top, left, width, and height and do some math and if mouse go out of the div, set visibility:hidden for the picture.
But isn't there any simple way to do this?
Let's assume you have some HTML like this,
<div id="mydiv" style="width: 300px; height: 300px;"></div>
<img id="myimg" style="position: absolute;" alt="" />
then
document.getElementById("mydiv").onmousemove = function(e) {
document.getElementById("myimg").style.top = e.pageY*1 + 5 + "px";
document.getElementById("myimg").style.left = e.pageX*1 + 5 + "px";
}
would move your picture to the mouse only if the mouse is over the div.
So long as the picture is actually contained in the div and you move it relative to its normal position, then I think setting overflow:hidden on the containing div should work. When I say "setting", I don't mean every time the mouse moves outside, but just once in the main CSS.
Related
I'm trying to incorporate a simple hold-and-move-mouse gesture.
I created a div holding some images by using a grid. When I use the mousemove event and detecting a click to move the pictures I'm getting the position of the mouse to change the scrollLeft of the scroller. But then the scroller jumps to the position.
A screen grab of how this looks:
https://i.imgur.com/db7ZmNy.gif
Is there a way to get start the scroller on a relative position of the mouse? And not the exact position, causing it to jump?
Here is (a summary of) my code:
<div class="scroller">
<div class="scroller-item">
<img src="[IMAGE]">
</div>
<div class="scroller-item">
<img src="[IMAGE]">
</div>
(...)
</div>
// Mousemove
var scroller = $('.scroller');
$(scroller).mousemove(function(e) {
// Getting mouse click
if (e.buttons == 1) {
// Getting position of mouse
var pos = e.pageX;
// Setting position of scroller
$(scroller).scrollLeft(pos);
}
});
Thank you!
I want to implement the following in HTML/JavaScript but don't really know where to start or even if there is already an existing function in one toolkit for this:
I have one image (e.g. a png) which is visible and a second image of the same size which is not visible. However, if I move the mouse pointer over the first image, the corresponding part from the second image shall be shown around the mouse cursor. So for example, if I move the mouse at position 100,100 on the first image, the section from 50,50 to 150,150 of the second image should be overlaid on the first image at position 50,50 to 150,150. I hope this is understandable.
Does anyone know, if there is already a library which contains this functionality? I've already searched for this on the internet but found nothing. However, I do not really know what keywords to search for. So if someone knows a keyword to search for, I would be appreciate hints as well.
Alternatively, Can you give me a cue how could I grep the part of the second image and display it at the mouse position? I was thinking that canvas might be used but I am not sure how to.
Thank you very much and best regards
Tobias
This can be done with Vanilla JS or JQuery. Basic idea behind it is to wrap the image in a container with position:relative and listen to mouse movement on it. A second <div> with position:absolute will receive the coordinates of the mouse pointer with its background position set to match the current mouse offset.
The posted code is just to give an idea how this would look like and needs to be extended to properly handle the edges of the image.
$(".hover-container").on("mousemove", function (e) {
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
var picHeight = $('.hover-image').height();
var picWidth = $('.hover-image').height();
$('.hover-image')
.css("left", relX - 50 + "px")
.css("top", relY - 50 + "px")
.css("background-position", (picWidth-relX-50) + "px "
+ (picHeight-relY-50) + "px")
});
.hover-container {
position: relative;
}
.hover-image {
position: absolute;
width: 100px;
height: 100px;
background: url(https://i.imgur.com/Hp5pUVA.jpg);
background-position: 0 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="hover-container">
<img class="hover-over" src="https://i.imgur.com/j0yhQez.jpg"/>
<div class="hover-image"></div>
</div>
I have seen some scrolling effects for example on Google SketchUp's site, their banner is initially "built into the page" and then it seems to pop out and remain stuck at the top after a certain position down (scrolling).
Google Plus seems to have some special effects as well, like changing the banner entirely once the scrolling has reached a certain position.
Attached is what I am trying to accomplish. A square logo is on the right, and then when the page is scrolled down, the logo starts to scale to the same height as the banner/header / fade and then becomes a word rather than the image.
What am I looking at here? jQuery or javascript? How do I track the scrolling and connect the two?
Is it what you want to achieve?
http://jsfiddle.net/agdbd8x6/15/
If so, it is quite easy. If you use jQuery, attach 'scroll' event handler and check current scroll position. Show the image only with zero scroll position:
var img = $('#image');
var txt = $('#text');
$(".container").scroll(function(){
txt.text('Scroll position = ' + $(this).scrollTop());
var showImage = $(this).scrollTop() == 0;
if (showImage){
img.css('display', 'inline');
txt.hide();
}
else{
img.hide();
txt.css('display', 'inline-block');
}
});
I have a little thumbnail that represents all the window. You can move div#maquetaPant and the window should to scroll at the same time you move the little square.
It's easier If you try:
http://www.noteboardapp.com/boarddemo
Drag the little square on the mini map on top right.
The code is here. If I put the function "dragMaqueta" in the stop event, then it works well. But I want it in the drag event to scroll the window at the same time of dragging the square. But if you try you'll see that doesn't work. It seems that window.scrollTo(scrollX,scrollY) moves the square outside the container.
<div id="canvasDiv">
<canvas id="canvas" width="125" height="100"></canvas>
<div id="maquetaPant"></div>
</div>
#maquetaPant
{
position: absolute;
}
$("#maquetaPant").draggable({containment: '#canvasDiv',drag: dragMaqueta});
function dragMaqueta(evt,ui)
{
var scrollX = parseInt(ui.position.left / $('#canvasDiv').width() * $('.Postits').width());
var scrollY = parseInt(ui.position.top / $('#canvasDiv').height() * $('.Postits').height());
window.scrollTo(scrollX,scrollY);
}
Do you know how to solve it?
Thank you!
I've been having trouble coming up with a way of making a drag and drop area on a web page. I have multiple resizable <div>s, and I want to be able to drag these anywhere. Think of it like dragging desktop icons around the desktop and placing them anywhere. It would be nice if I could add buttons to these <div>s to change their z-indexes and have them overlap. Would this require use of <canvas>? I am currently using <section> for the drag area.
Thanks!
If you want to do the drag-n-drop yourself, you may want to have one div enclosing the draggable div, so you can use the top of the larger div as the draggable area.
So, you have
<div id='draggablediv' style='backgroundcolor: blue;'>
<div class='draggable' style='position: relative; top: 5em; left: 0em;'>...
</div></div>
This code is purely for example, won't work, btw.
So, on the draggablediv you would put an onclick event handler, and this would start an onmousemove handler and onmouseup handler. The last one is to drop, but you may also want to have onblur in case the mouse moves outside of the browser.
Then, as the mouse moves, just reposition the div, so these divs would need to be absolute positioned, or relative positioned (absolute would be easier).
It is important to remove the event handlers by setting them to null when the mouse button is released.
If not in a droppable area then make certain to put the div back where it started, so you will want a closure so you can remember the original top/left coordinates of the div.
You will want to get familiar with this functionality:
(function g(someval) {
var a = someval;
return h() {
}
})(origval);
For an example search for getImgInPositionedDivHtml in http://jibbering.com/faq/notes/closures/
In order to change the z-index you may want to have a +/- in the div and when that is clicked on the z-index is changed.
Here is a page that talks about changing the z-index.
http://msdn.microsoft.com/en-us/library/ms533005(v=vs.85).aspx
I don't think you can do that with HTML-Only, however this is some example of how you could do it with javascript:
<html>
<head>
<style>
.draggable {
position: absolute;
cursor: default;
background-color: purple;
top: 0px;
left: 0px;
}
</style>
</body>
<body onmouseup="stopMovement()">
<div id="draggable" class="draggable" onmousedown="startMovement(event)">
Drag me around :D
</div>
<script>
var drg = document.getElementById("draggable");
var xDisplacement = 0;
var yDisplacement = 0;
function startMovement(e) {
xDisplacement = e.pageX - getComputedStyle(drg).left.substring(0, getComputedStyle(drg).left.length - 2);
yDisplacement = e.pageY - getComputedStyle(drg).top.substring(0, getComputedStyle(drg).top.length - 2);
document.body.onmousemove = moveDraggable;
}
function stopMovement() {
document.body.onmousemove = null;
}
function moveDraggable(e) {
drg.style.top = e.pageY - yDisplacement;
drg.style.left = e.pageX - xDisplacement;
}
</script>
</body>
</html>