Develop Reference

Rotation and Translation of Image Javascript

I have 4 images connected to each other which form a big image. My task is to rotate the big image to a certain angle that is entered by the user.
Now, to rotate the full image, I need to rotate the smaller connected images and then translate them accordingly so that the full images seems to be rotated.
But can't get the translation coordinates properly. Please help me out with that.
Also, if there is any other way to do this, you can tell me that as well.
The code can be found here -
https://jsfiddle.net/e4qp6btx/1/
document.getElementById("img1").style.transform = "translate(" + x + "px," + y + "px) rotate(" + angle + "deg)" ;
Edit -
I actually want to rotate and translate individual images rather than rotating the whole container.

I would just target and rotate the container instead. When trying on Mac Firefox, however, the smaller images seemed to get small spaces between them.
rotateImage() {
var angle = document.getElementById('angle').value || 0; //angle to be rotated by
angle = angle % 360 + 'deg';
document.querySelector('.container').style.transform = `rotate(${angle})`;
}
I would also use a CSS variable to set the angle, and then update the variable, instead of using inline style to change the transform: rotate value.
Finally, I would give the container a unique id.

Second solution.
Rotation originates from the center of the image by default. You can change this by setting transform-orgin. The following CSS will make the images rotate like they should, so you don't need to translate them. You should probably frankenstein together my two answers, because you barely need any code for your rotateImage() to work.
#img1 {
transform-origin: bottom right;
}
#img2 {
transform-origin: bottom left;
}
#img4 {
transform-origin: top right;
}
#img3 {
transform-origin: top left;
}
Do note: you mixed up the positions of #img4 and #img3, where #img4 comes before #img3, hence these images having the transform-origins switched around.
An added bonus:
I feel it's kinda wasteful to set the same value on four different elements, so I would suggest to use a CSS variable on .container to store the rotation value on all images. It would be easier to test different values in the Inspector if you do it like that.
CSS
.container {
--image-rotation: 0deg;
width:500px;
height:500px;
padding: 50px;
}
img {
width:100%;
height:100%;
transform: rotate(var(--image-rotation));
}
Javascript
rotateImage() {
const imgContainer = document.querySelector('.container');
let angle = document.getElementById('angle').value || 0; //angle to be rotated by
angle = angle % 360 + 'deg';
imgContainer.style.setProperty('--image-rotation', angle);
}
https://jsfiddle.net/mg46dz7h/

Get element within clicked pixel?

I'm not sure where to start on this, I've already Googled for a few days trying to find out how to get the element that is within a selected/clicked pixel on the page. I came across this function from a co-worker but I have no idea what it does:
function onclick(e){
var x = e.clientX,
y = e.clientY;
$("*").filter(function(){
position.left > x && position.left + width < x;
/*same for height*/;
});
}
Put simply, I need to be able to click a pixel and get the div/element that is within that pixel. It's not as simple for my app as just saying div .class for example because elements overlap one another with opacity and z-index.

The code as shown in the question won't work because variables position, width are not defined, however its basic idea is correct — loop through all the elements and compare the coordinates of a click to each element's box.
Wanted to try it myself. Moved the working demo here instead of a snippet.

Clicking wherever in the document will log the clicked element.
$(document).click(function(e) {
console.log(e.target);
});
.box {
width: 50px;
height: 50px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>

You could use document.elementFromPoint(x, y); if you want to get an element by x and y coords.
See here for docs.
function onclick(e){
var x = e.clientX,
y = e.clientY,
el = document.elementFromPoint(x, y);
}
Fiddle here

Two instances of same popup div at cursor location

On a webpage, I have an image. When I mouseover it, a hidden div pops up at cursor location with information on that image. Clicking on that image, creates another one in another div. The new image also share the same div pop up when mouseover.
For the original image I use jquery.
$("#" + abys).on("mouseover", function(e){
$("#" + abys + "_tooltip").css({
left: e.pageX,
top: e.pageY
}).show();
});
$("#" + abys).on("mouseout", function(e){
$("#" + abys + "_tooltip").hide();
});
For the new image when clicked, I use pure javascript.
var itemDiv = document.getElementById("items_div");
var newImg = document.createElement("img");
newImg.src = "/items_img/" + abys + ".png";
newImg.id = abys + "_slot";
itemDiv.appendChild(newImg);
appendNum++;
console.log(appendNum);
newImg.onclick = function(){
newImg.parentNode.removeChild(newImg);
appendNum--;
console.log(appendNum);
}
newImg.onmouseover = function(e){
abysTooltip.style.display = "block";
abysTooltip.style.top = e.pageX;
abysTooltip.style.left = e.pageY;
}
CSS for the popup div.
.item_tooltip_div {
border:1px solid;
padding:20px;
width:400px;
display:none;
position:absolute;
z-index:10;
background-color:rgb(0,0,0);
pointer-events:none;
}
The issue I am running into is that when I mouseover the new image, the tooltip shows up at the original image location, and not my mouse cursor position.

Solved it by using jquery for both instances.
For some reason, jquery .css() was blocking javascript's .style. When hovering over the original image, the tooltip's top and left position is already set. When hovering over the new image, the top and left position did not change.

Moving Background Image diagonally across the screen

I'm new here, so I can't comment/follow-up yet on another question that PARTIALLY provided an answer
for what I'm trying to achieve.
On this question here [Moving Background image in a loop from left to right the fantastic and very detailed answer by Jack Pattishall Jr lets me set the page background to scroll either vertically OR horizontally.
Is there any way to combine the directional code, so that the page background scrolls diagonally
(i.e. bottom left to top right)?
I've been "mutilating" Jack's code for days now, but can't figure out how to make the background scroll in 2 directions simultaneously. :-(

http://jsfiddle.net/f5WjJ/2/
updates the fiddle from Jack Pattishall Jr to update both x AND y parameters. Also set the repeat CSS to both x AND y as well.
$(function(){
var x = 0;
var y = 0;//here
setInterval(function(){
x+=1;
y-=1;//here
$('body').css('background-position', x + 'px ' + y + 'px');//here too
}, 10);
})
background-repeat: repeat;/*and also here*/

Starting from the example mentioned above, here are my changes:
html, body { height: 100%; width: 100%;}
body {
background-image: url('http://coloradoellie.files.wordpress.com/2013/10/25280-ginger-kitten-leaping-with-arms-outstretched-white-background.jpg?w=300&h=222');
background-repeat: repeat-x repeat-y; // this line could be removed entirely
}
$(function(){
var x = 0;
var y = 0;
setInterval(function(){
x+=1;
y-=1;
$('body').css('background-position', x + 'px ' + y + 'px');
}, 10);
})
Brief description of changes:
Add repeat-y to background-repeat or remove the line (we have replicated the default behavior)
Instantiate and initialize a y-position variable
Move additively on the x-axis and negatively on the y-axis to get the background to move in the desired direction
Edit the $('body') css to include the new non-static y-position
Thanks for the advice, Joseph Neathawk

How do you create "aura" effect from the mouse pointer?

If you open google chrome and open multiple tabs, you see the effect by hovering over a background tab. The pointer will have an "aura" effect which follows it around.
To clarify, I'm NOT asking how to make the entire tab glow a lighter color, I'm asking how to give the pointer the effect within some specified radius of it.

The key part is to get the mouse coordinates, then to place a radial gradient with those coordinates.
var originalBG = $(".nav a").css("background-color");
$('.nav li:not(".active") a').mousemove(function(e) {
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
xy = x + " " + y;
bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";
$(this)
.css({background: bgWebKit})
.css({background: bgMoz});
}).mouseleave(function() {
$(this).css({
background: originalBG
});
});
Something like that will do the job.
Check this demo from the illustrious Chris Coyier: http://css-tricks.com/examples/MovingHighlight/

some ideas --
use javascript to place an absolutely positioned semitransparent png under the cursor position
create a .cur file with your own cursor and some semi-transparent glow under it and hope the browser can render it
replace the entire cursor with javascript

Why has nobody thought to mention CSS3 transitions? With CSS3 you can create this effect with pure css, no flash or javascript needed.
Here's a simple example for ya :D
#auraThingy{
height:50px;
width:200px;
background:blue;
transistion:background 3s;
-webkit-transition:background 3s; /*safari/chrome*/
-moz-transition:background 3s; /*firefox*/
-o-transition:background 3s; /*opera*/
}
#auraThingy:hover{
background:lightblue;
}
I found a nice link with info here http://www.w3schools.com/css3/css3_transitions.asp
Edit[ Just realized I should of read your entire post before answering, my bad ^-^
You could probably still use the transition with a gradient image, and on hover update the background image coordinates with the mouse position :/

$('some_element').hover(function(){
$(this).css('opacity','.5');
},function(){
$(this).css('opacity','.2');
});
Something like that.
Fiddle: http://jsfiddle.net/maniator/Sf92n/