So, I have been trying to create a platformer, but I only know so much about HTML. I have this snippet of code, and I am trying to figure out how to change the coordinates of it so I can finish my platformer.
var logo=document.createElement("img");
logo.src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
document.body.appendChild(logo);
//I am using the Google Logo so you can see the image.
If you mean a position of any element in page you can do it by using below code;
var logo=document.createElement("img");
logo.src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
document.body.appendChild(logo);
logo.style.position = "absolute";
logo.style.left = x_pos+'px';
logo.style.top = y_pos+'px';
Or do it as a function so you can attach it to an event like onmousedown
function placeDiv(x_pos, y_pos) {
var logo=document.createElement("img");
logo.src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
document.body.appendChild(logo);
logo.style.position = "absolute";
logo.style.left = x_pos+'px';
logo.style.top = y_pos+'px';
}
Related
I'm trying to figure out logic to continuously rotate an image in Javascript. So far I have came up to this code. img1 is the id of the image and so far it works but it rotates only once. How do I make it rotate every time I click on it? Im using onclick event.
function rotateProfilePic() {
var image = document.getElementById('img1');
image.style.transform = "rotate(180deg)";
}
Sorry if the question is too simple for someone, I'm beginner in Web Programming.
Set your function as clicks listener on image:
const imgTag = document.getElementById("img1");
const rotateStep = 180; // rotation size
let curImgAngle = 0;
function rotateProfilePic() {
curImgAngle += rotateStep;
imgTag.style.transform = `rotate(${curImgAngle}deg)`;
}
imgTag.addEventListener("click", rotateProfilePic);
There is a map embedded in a webpage. I want to click on a pin in the map. I can inject JS onto a page, or use any API that is available to Selenium.
The problem is that I can't find the pin in the embedded map on the page.
Possible solutions:
I've thought about getting ahead of it and diverting registration for the click listener, but I would appreciate it if someone has done this before and can offer me a tip.
It was for a test case with Nightwatch.js where I needed to click on a pin in the map(location). Since I can control test cases and only have one location, I could just assume the view was centered on the pin. So:
browser.execute(function() {
function clickPin(){
var elem = document.getElementsByClassName('map-canvas')[0];
var rect = elem.getBoundingClientRect();
var centerY = (rect.bottom - rect.top);
var centerX = (rect.right - rect.left);
var divX = document.createElement("div");
divX.style.visibility = 'hidden';
divX.id = 'offsetX';
divX.innerHTML = centerX.toString();
var divY = document.createElement("div");
divY.style.visibility = 'hidden';
divY.innerHTML = centerY.toString();
divY.id = 'offsetY';
document.head.appendChild(divX);
document.head.appendChild(divY);
}
clickPin();
}, [], function(result){});
browser.pause(3000);
browser.waitForElementPresent(`//*[#id="offsetX"]`, 3000);
var relX = browser.getValue(`//*[#id="offsetX"]`);
var relY = browser.getValue(`//*[#id="offsetY"]`);
//set cursor position to center and click (fragile)
browser.moveToElement(`//*[#class="map-canvas"]`, relX, relY).mouseButtonClick();
I'm making a small jigsaw like puzzle in html5. Each jigsaw piece is it's own canvas. I need to move the canvas element using the mouse position. I've managed to get the canvas that is clicked, I just need to move it. I tried manipulating the top and left style attributes but the canvas didn't move. Can this be done or am I trying something impossible.
Thanks!
function MouseDown(can, e)
{
MovingCanvas = can;
clicked = true;
}
function MouseMove(e)
{
if(clicked)
{
var mx = e.clientX;
var my = e.clientY;
MovingCanvas.style.top = my;
MovingCanvas.style.left = mx;
}
}
e.clientX and e.clientY are integers.
Styles expect a string of the form {NUMBER}{UNIT}.
You are missing a unit, therefore it won't work.
MovingCanvas.style.top = my+"px";
MovingCanvas.style.left = mx+"px";
After being a long time lurker, this is my first post here! I've been RTFMing and searching everywhere for an answer to this question to no avail. I will try to be as informative as I can, hope you could help me.
This code is for my personal webpage.
I am trying to implement some sort of a modern click-map using HTML5 and jQuery.
In the website you would see the main image and a hidden canvas with the same size at the same coordinates with this picture drawn into it.
When the mouse hovers the main picture, it read the mouse pixel data (array of r,g,b,alpha) from the image drawn onto the canvas. When it sees the pixel color is black (in my case I only check the RED value, which in a black pixel would be 0) it knows the activate the relevant button.
(Originally, I got the idea from this article)
The reason I chose this method, is for the page to be responsive and dynamically change to fit different monitors and mobile devices. To achieve this, I call the DrawCanvas function every time the screen is re-sized, to redraw the canvas with the new dimensions.
Generally, this works OK. The thing is ,there seems to be an inconsistent behavior in Chrome and IE(9). When I initially open the page, I sometimes get no pixel data (0,0,0,0), until i re-size the browser. At first I figured there's some loading issues that are making this happen so I tried to hack it with setTimeout, it still doesn't work. I also tried to trigger the re-size event and call the drawCanvas function at document.ready, still didn't work.
What's bothering me is most, are the inconsistencies. Sometimes it works, sometimes is doesn't. Generally, it is more stable in chrome than in IE(9).
Here is the deprecated code:
<script type="text/javascript">
$(document).ready(function(){setTimeout(function() {
// Get main image object
var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
// Create a hidden canvas the same size as the main image and append it to main div
var canvas = document.createElement('canvas');
canvas.height = mapWrapper.clientHeight;
canvas.width = mapWrapper.clientWidth;
canvas.fillStyle = 'rgb(255,255,255)';
canvas.style.display = 'none';
canvas.id = 'hiddencvs';
$('#map_wrapper').append(canvas);
// Draw the buttons image into the canvas
drawCanvas(null);
$("#map_wrapper").mousemove(function(e){
var canvas = document.getElementById('hiddencvs');
var context = canvas.getContext('2d');
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
// Get pixel information array (red, green, blue, alpha)
var pixel = context.getImageData(x,y,1,1).data;
var red = pixel[0];
var main_img = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
if (red == 0)
{
...
}
else {
...
}
});
},3000);}); // End DOM Ready
function drawCanvas(e)
{
// Get context of hidden convas and set size according to main image
var cvs = document.getElementById('hiddencvs');
var ctx = cvs.getContext('2d');
var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
cvs.width = mapWrapper.clientWidth;
cvs.height = mapWrapper.clientHeight;
// Create img element for buttons image
var img = document.createElement("img");
img.src = "img/main-page-buttons.png";
// Draw buttons image inside hidden canvas, strech it to canvas size
ctx.drawImage(img, 0, 0,cvs.width,cvs.height);
}
$(window).resize(function(e){
drawCanvas(e);
}
);
function findPos(obj)
{
...
}
</script>
I'd appreciate any help!
Thanks!
Ron.
You don't wait for the image to be loaded so, depending on the cache, you may draw an image or not in the canvas.
You should do this :
$(function(){
var img = document.createElement("img");
img.onload = function() {
var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
...
// your whole code here !
...
}
img.src = "img/main-page-buttons.png";
});
I am using the HTML5 Canvas. I have added images (BitmapImages) to the canvas and I now want to add simple tooltips to these bitmap images.
Is this possible ??? If so can someone tell / show me how I could achieve this ?
I am not sure if it makes a difference , but I am also using the Easel JS Framework ...
Here is an example of what I currently have:
var container = new Container(); // EaselJS Container
container.x = 100;
container.y = 100;
stage.addChild(container);
var image = new Image();
image.src = "image.png";
var bitmap = new Bitmap(image);
bitmap.x = 5;
bitmap.y = 5;
bitmap.mouseEnabled = true;
container.addChild(bitmap);
...
I have not tested this code, but basically a bitmap image is created and added to my stage. I now want to add a simple tool tip to my bitmap image, but cant seem to work out how :(
Any help would be greatly appreciated.
Cheers,
Jon.
Here's how I would do it:
stage.enableMouseOver();
bitmap.onMouseOver = function(e) {
stage.canvas.title = 'put your tooltip text here';
}
bitmap.onMouseOut = function(e) {
stage.canvas.title = '';
}
This works by using tooltips already provided by the browser.