We Keep Coding

div follow mouse when scroll in javascript

I build a website with some sliders (Wordpress - Divi). I added some javascript to let the slider description follow the mousepointer when the mouse hovers over the slider. Works perfectly, BUT: when I scroll the mouse the pointer shifts downwards as expected, but the slider description does not shift accordingly; it remains where it was. So from that point on the link between the mouse and the description is gone.
Question: how can I enforce the description to follow the mouse when scrolling......
If you want to see the result until now, please check https://roel.famnabuurs.nl
Any help appreciated
The code as requested:
const sliderzelf = document.getElementById(slidernaam);
const titleblockslist = document.getElementById(slidernaam).getElementsByClassName('et_pb_slide_description');
for (let indslide of titleblockslist) {
indslide.style.setProperty('opacity',1, 'important');
var sliderOffset = sliderzelf.getBoundingClientRect();
let xpos = e.clientX - sliderOffset.left ;
// do not shift too far to the right
if (xpos > sliderzelf.clientWidth - indslide.clientWidth) {
xpos = sliderzelf.clientWidth - indslide.clientWidth;
}
if (xpos < 15) {
// do not shift too far to the left
xpos = 15;
}
indslide.style.left = (xpos) + 'px';
indslide.style.top = e.clientY + 'px';
}

CSS Magnifying Glass (Increase zoom level)

First: I am familiarize very little with Javascript but mostly I do CSS and HTML.
I am creating a website and I have a very big image so I downloaded a code to implement the magnifying glass effect on a picture. However the image has a lot of details that requires to zoom more to appreciate. Is there any way I can modify this code to create a deeper level of zoom of the image?
This is the code I used:
https://codepen.io/akhbar/pen/Biupr
I believe this is the most relevant part of the code that creates the magnifying glass effect:
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
$(".large").css("background","url('" + $(".small").attr("src") + "') no-repeat");
//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})

Dynamically change transform-origin for a scale in jquery after drag

I'm working on an page that contains a rectangular inner-block inside a container. The inner-block can be dragged and also be scaled when you scroll the mouse.
[ See my JSFiddle. ]
The center of the screen is the origin point of the zoom transformation, so when the inner-block is centered in the page it appears to simply scale, but when you drag the inner-block about the center origin point, it will scale appropriately around or away from the center point of the screen. I marked the center screen point with a small red dot in the JSFiddle so its easier to see.
As the inner-block is dragged around I recalculate the top/left coords of it, and also the difference between that position and the center of the page in order to get the transformation-origin adjustment coords.
PROBLEM: It works fine when the inner-block is scale-factor 1, but if you zoom and then drag the object, it unexpectedly jumps position and doesn't zoom back correctly. Are you able to see what I am doing wrong, or what I would need to add to prevent the unexpected behavior? Thanks in advance!
//Get center of the page "origin"
var originX = $('.block').width()/2;
var originY = $('.block').height()/2;
//Get center point of the inner-block
var blockRX = $('.inner-block').width()/2;
var blockRY = $('.inner-block').height()/2;
//Set position of the inner-block to match center origin initially
$(".inner-block").css({top: originY-blockRY, left: originX-blockRX});
$(".inner-block").draggable();
//Initial Scale 1:1
var scale_system = 1;
//Get Top/Left coords of inner-block
var blockTop = $('.inner-block').offset().top;
var blockLeft = $('.inner-block').offset().left;
//Calculate diff between center of page and Top/Left of inner-block
var xCalc = (originX-blockLeft);
var yCalc = (originY-blockTop);
//Set origin of transformations as center of page (in relation to Top/Left)
//Using the just calculated values
$(".inner-block").css({"-webkit-transform-origin": xCalc+"px "+yCalc+"px"});
//Zoom settings
var maxScale = 4;
var minScale = 1;
var zoomScale = .07;
//Drag Actions
$(function() {
var isDragging = false;
//Perform calculations as drag occurs
$(".inner-block").mousedown(function() {
$('.inner-block').mousemove(function(e) {
isDragging = true;
$(window).unbind("mousemove");
//Get New Top/Left of inner-block as it drags
blockTop = $('.inner-block').offset().top;
blockLeft = $('.inner-block').offset().left;
console.log("BlockTopLeft "+blockLeft+" "+blockTop);
//Calculate new diff between Top/Left and Origin
xCalc = (originX-blockLeft);
yCalc = (originY-blockTop);
console.log("Origin Distance "+xCalc+" "+yCalc);
})
})
.mouseup(function() {
var wasDragging = isDragging;
isDragging = false;
$(window).unbind("mousemove");
if (wasDragging) {
//Update origin position in relation to Top/Left of inner-block
$(".inner-block").css({"-webkit-transform-origin": xCalc+"px "+yCalc+"px"});
}
});
});
//Perform scroll function below on mousewheel
$('.block').bind('mousewheel', function (event) {
scroll(event);
});
function scroll(event) {
event.preventDefault();
var newScale = ((event.originalEvent.wheelDelta / 120 > 0) ?
(scale_system * (1.0 + zoomScale)) :
(scale_system * (1.0 - zoomScale)));
scale_system = ((newScale > maxScale) ?
(maxScale) :
(((newScale < minScale)?
(minScale):
(newScale)))
);
//Update Top/Left position of the inner-block
blockTop = $('.inner-block').offset().top;
blockLeft = $('.inner-block').offset().left;
console.log("BlockTopLeft "+blockLeft+" "+blockTop);
//Update X/Y radius to block center
blockRX = ($('.inner-block').width()/2)*scale_system;
blockRY = ($('.inner-block').height()/2)*scale_system;
console.log("BlockRXY "+blockRX+" "+blockRY);
//Recalculate the diff between T/L and origin
console.log("Origin "+originX+" "+originY);
xCalc = (originX-blockLeft);
yCalc = (originY-blockTop);
console.log("Origin - TL "+xCalc+" "+yCalc);
$(".inner-block").css({"-webkit-transform": "scale(" + scale_system + ")"});
}

I think I have found the answer to my own question. After much Googling it appears there are problems with jQuery when trying to perform CSS transformations paired with dragging. There is an extensive issue page on jQuery's development ticket page highlighting the problem and many examples, and they have decided not to address the problem. I'm going to explore other options.

JavaScript/jQuery: How to get actual original position of an element (DIV) after it's been rotated

I have a div element that gets rotated with -webkit-transform: rotate(45deg). If I try to access it's current position after rotation like this
var x = $('#tap-area').offset().left;
var y = $('#tap-area').offset().top;
it returns me not the actual values of where the original top left corner is, but where is the top left corner of the bounding box of the whole div (which is physically furthest top left, outside of the DIV).
How can I calculate/get the original top left corner of the div after it gets rotated
Eg:
If I rotate it by 90deg, the value I would like to get now would be top right.
If I rotate it by 180deg, the value I would like to get now would be bottom right.
I need this, so I could set another DIV element to always stay attached to the original top left corner of the element, so that it would change it's position depending on how it was rotated.
Thanks.

You can always get the absolute position of an element using:
<element>.getBoundingClientRect()
This gives you the AABB (Axis Aligned Bounding Box, or Min-Max-Box) with the top left corner of the screen as origin. (MDN)
If you need to access the position of the top left corner of your element you can rotate its original position vector too, what is a simple matrix multiplication. You should than keep in mind that the center of rotation is by default the element's center, but it also possible to set this to a different location with css.
Good Luck!

This is a solution I come to after being faced with the same problem:
// Initial data with TOP AND LEFT OF THE BOUNDING BOX (not x,y of top left point of the box but left margin of the bounding box and top margin of the bounding box)
var top = Math.ceil($('#' + id).position().top);
var left = Math.ceil($('#' + id).position().left);
var wi = $('#' + id).css("width").replace("px","");
var he = $('#' + id).css("height").replace("px","");
var rot = $(this).data(id + ".ROTACION"); //There I have the applied rotation stored ...
// CALULATIONS
var swapheightwidth= false;
//Let's keept it first cuad.
if (rot > 270)
{
rot = rot - 270;
swapheightwidth= = true;
}
else if (rot > 180)
{
rot = rot - 180;
}
else if (rot > 90)
{
swapheightwidth= = true;
rot = rot - 90;
}
if (swapheightwidth)
{
var calculatedX= left + (wi * sin(rot));
var calculatedY= top + (wi * cos(rot));
}
else
{
var calculatedX= left + (he * sin(rot));
var calculatedY= top + (he * cos(rot));
}
var xbott = left;
var ybott = Math.ceil(calculatedY);
var xtop= Math.ceil(calculatedX);
var ytop= top;
// FINAL CALCULATED POINTS
// xtop ytop -> top left
// xbott ybott -> bottomleft
function sin(x) {
return Math.sin(x / 180 * Math.PI);
}
function cos(x) {
return Math.cos(x / 180 * Math.PI);
}
Cheers

Converting vertical scroll to horizontal div position jQuery

Been battling with this for a while. Seems simple enough but I seem to lack the logic required to get it to work.
I want to convert the vertical .scrollTop position to a horizontal bar that represents the users vertical position in the document.
I think my math is terrible; am ready to be shot down in flames.
var pos = $("#content").scrollTop();
var convert = (pos / 1024);
$(document).scroll(function() {
$(".place").animate({
left: '+=' + pos
}, slow);
});​
Here's a fiddle of where I am so far. The 'place' div doesn't want to move.

Start by converting the scroll position into a percentage
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var percent = scrollPercent = (s / (d-c))
then get your current position by using that percentage for the width of the .placebar
var newPos = percent*1024;
if(newPos > 984) { //check to stop limit
newPos = 984;
}
$("#place").stop().animate({
left: newPos +"px"
});
Fiddle