How to move an image to the mouse position in html/javascript? - javascript

I'm getting slowly back to javascript and I'm a bit lost on basics.
I just want to move an image to follow the mouse position.
Here is a simple code I've been tweaking for some time without any success :
<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.x = e.x;
avatar.y = e.y;
// alert( "e( " + e.x + ", " + e.y + " )" );
// alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>
It looks a lot like some tutorials to do this very thing.
What I don't understand is that using the alerts (I don't know how to print in the browser's javascript console) I see that avatar.x and y are never changed. Is it related to the way I've declared the image?
Can someone point me what I'm doing wrong?

I think that you don't want to set x and y, but rather style.left and style.top!
avatar.style.left = e.x;
avatar.style.top = e.y;

There is no x and y property for avatar - you should use 'top' and 'left' instead. Also, move the var avatar = document.getElementById("avatar"); declaration outside of the function, as you only need to do this once.

<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.style.left = e.x + "px";
avatar.style.top = e.y + "px";
//alert( "e( " + e.x + ", " + e.y + " )" );
//alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>

avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';

Related

How to put a picture into a pop up window in javascript?

I have this script, however, I cannot figure out how to get an image to show up in the pop up window. Right now, when the window pops up, I only get script. I have tried to enter a link using the href code and the
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 300, popH = 200;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
function openWindow(){
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 800, popH = 700;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
'<img src="https://static5.cargurus.com/images/site/2009/10/24/14/42/2004_suzuki_vitara_4_dr_lx_4wd_suv-pic-8731393806365188898-640x480.jpeg">'+
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
}
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
</body>
</html>
To just show an image, then replace this part as shown:
msgWindow.document.write ('<img src="//i.imgur.com/j2JTnI2.png" >');
I strongly recommend against using document.write();, use document.body.innerHTML instead.
precisely use:
msgWindow.document.body.innerHTML = '<img src="url/to/your/image.jpg"></img>';
instead of:
msgWindow.document.write('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
Here's a working example using an image.

Options are ignored when using window.open()

I am using the below to open a new window, but it seems that the options are ignored.
var newWindow = window.open('index.php?ident=' + gender + '&nick=' + nickname + '', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
I have tested using Chrome, I still get an address bar etc.
Historically, browsers have been incredibly picky about the options string, and spaces are/were not allowed. You have spaces before some of the options:
var newWindow = window.open('index.php?ident=' + gender + '&nick=' + nickname + '', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Here --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^----------------^-----------------^----------------^
From MDN:
The string must not contain any whitespace
Removing them may solve the problem.
Separately, if the values in w, h, top, and left are anything but raw numbers, they'll cause trouble as well.
Working example: If I put this on a server and run it with Chrome (or Firefox or IE11), it opens Stack Overflow in a window with the options requested (except addressbar, which you can't suppress anymore):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Foo</title>
</head>
<body>
<input type="button" id="the-button" value="Click me">
<script>
var w = 400, h = 600; top = 1, left = 1;
document.getElementById("the-button").onclick = function() {
var newWindow = window.open('http://stackoverflow.com', 'PopupChat', 'directories=no,location=no,menubar=no,titlebar=no,toolbar=no,scrollbars=yes,status=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
};
</script>
</body>
</html>

Get click position on the window

I am trying to get the position of the click when the user click whatever part of the window. I found this code in many tutorials but it seems not to work.
(function( $ ) {
$( document ).ready(function() {
$( window ).click(function( e ) {
var offset = $(this).offset(),
relativeX = (e.pageX - offset.left),
relativeY = (e.pageY - offset.top);
alert("X: " + relativeX + " Y: " + relativeY);
});
});
})( jQuery );
Firefox console tells me "TypeError: offset is undefined" and I don't understand why it does not work.
Which is the right way to retrieve the click position on the window?
That code is really close to working. It will work correctly if you replace $(this) with $(e.target). This will get the left and top offsets of the click event, not the window itself.
(function($) {
$(document).ready(function() {
$(window).click(function(e) {
var relativeX = (e.pageX - $(e.target).offset().left),
relativeY = (e.pageY - $(e.target).offset().top);
alert("X: " + relativeX + " Y: " + relativeY);
});
});
})(jQuery);
http://jsfiddle.net/IronFlare/7wsamt87/
If you're clicking on the window like that, you don't really need an offset.
$(window).click(function (e) {
alert("X: " + e.pageX + " Y: " + e.pageY);
});
Your code is assuming the wrong this;
In your listener, this will be window, but $(window).offset(); makes no sense, which is why the method returns null or undefined.
Perhaps you meant to use document.documentElement, document.body or e.target which would be the <html>, <body> or the clicked node, respectively.
$(document.body).offset();
I hope to have find a solution
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
<!DOCTYPE html>
<html>
<body>
<h2 onclick="showCoords(event)">Click this heading to get the x (horizontal) and y (vertical) coordinates of the mouse pointer when it was clicked.</h2>
<p><strong>Tip:</strong> Try to click different places in the heading.</p>
<p id="demo"></p>
</body>
</html>

make a draggable function in jquery

I made a function that allow user to drag any element inside body. The problem I am having is when user move the mouse too fast, it lost track of the position. Is there a better way to track the mouse ?
here is my functions
$(this).on("mousedown",function(event){
//$(this).on("click",function(event){
$(this).css("cursor","move");
mouseX = event.pageX;
mouseY = event.pageY;
xx = mouseX - $(this).position().left;
yy = mouseY - $(this).position().top;
console.log(" mouseX : " +mouseX+ " mouseY : " +mouseY ) ;
console.log(" XX : " +xx+ " YY : " +yy ) ;
$(this).on("mousemove",function(event){
startX = event.pageX;
startY = event.pageY;
console.log("after move page X : " +startX+ " page Y : " +startY ) ;
console.log("before left : " + $(this).position().left + " top : " + $(this).position().top ) ;
dragging = true;
if(dragging){
//this.style.top = startY - yy + 'px';
//this.style.left = startX - xx + 'px';
// $(this).animate({"left":(startX - xx),"top":(startY - yy)},0);
$(this).css("top",(startY - yy));
$(this).css("left",(startX - xx));
console.log("after left : " + this.style.left + " top : " + this.style.top ) ;
}
});
});
it did move with the cursor but can't follow up with fast movement.

Use jQuery set .css RIGHT if #foo + offset left is greater than page width

Ok, so I am trying to use jQuery to get the innerWidth() of an element #preview. I want to create a conditional that says IF x offset LEFT + #preview width is greater than page width, give it style right: z where z = #preview width + xOffset.
I apologize my code below is a mess and the syntax for .css ("right", (rightFloat + xOffset) + "px") (line 125) is off, but that's part of my problem.
<script>
$(document).ready(function(){
//append "gallery" class to all items with "popup" class
imagePreview();
$(".popup").addClass("gallery");
});
//The overlay or pop-up effect
this.imagePreview = function() { /* CONFIG */
xOffset = 40;
yOffset = 40;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").click(function(e) {
return false;
});
$("a.preview").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var rightFloat = e.pageX + ("#preview").innerWidth;
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview").hide().css("top", (e.pageY - yOffset) + "px").css("left", (e.pageX + xOffset) + "px").fadeIn("2000");
while ((left + 400) > window.innerWidth) {.css("right", (rightFloat + xOffset) + "px")
}
}, function() {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e) {
var top = e.pageY - yOffset;
var left = e.pageX + xOffset;
var rightFloat = e.pageX + ("#preview").innerWidth;
//flips the image if it gets too close to the right side
while ((left + 400) > window.innerWidth) {.css("right", +(rightFlaot + xOffset) + "px")
}
$("#preview").css("top", top + "px").css("left", left + "px");
});
};
</script>
Try using http://api.jquery.com/offset/
if($('#preview').offset().right<0){
var right = parseInt($(window).width()) - e.pageX + xOffset;
$("#preview").css("top", top + "px").css("right", right + "px");
}else{
var left = e.pageX + xOffset;
$("#preview").css("top", top + "px").css("left", left + "px");
}
I made these fixes because I couldn't get your code to work in jsfiddle:
var xOffset = 40;
var yOffset = 40;
$("a.preview").bind('mouseover',function(e){
var rightFloat = parseFloat(e.pageX)+$("#preview").innerWidth();
var ptop = parseFloat(e.pageY) - yOffset;
var pleft = parseFloat(e.pageX) + xOffset;
$("#preview").css({"top":ptop + "px","left":pleft + "px"});
});
There's the fixes for the top half but I have no idea what you're trying to do with the bottom part (with the while loop). Can you explain what functionality you want?

Categories