Develop Reference

How to get Elements to Follow Cursor After Scrolling Vertically in Web Page

I'm trying to get a HTML element to follow my mouse cursor as I scroll down a web page, but when I scroll down, the HTML element gets 'misaligned'. I get the impression this is due to my cursor's new x,y positions but I don't know how to proceed from here.
The Code - HTML:
<div id="mouseOverElement">
<h3 id="mouseOverText">
test text
</h3>
</div>
The Code - JavaScript:
let root = document.documentElement;
root.addEventListener("mousemove", e =>
{
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', e.clientY + "px");
});
The Code - CSS:
#mouseOverElement
{
width: 200px;
height: 100px;
background: rgb(0, 0, 0);
position: absolute;
color: white;
left: var(--mouse-x);
top: var(--mouse-y);
}

You have to account for the scroll y position. window.scrollY + e.clientY does the trick.
let root = document.documentElement;
root.addEventListener("mousemove", e => {
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', window.scrollY + e.clientY + "px");
});
#mouseOverElement {
width: 200px;
height: 100px;
background: rgb(0, 0, 0);
position: absolute;
color: white;
left: var(--mouse-x);
top: var(--mouse-y);
}
html, body{
height:200%;
}
<div id="mouseOverElement">
<h3 id="mouseOverText">
test text
</h3>
</div>
To update the position while scrolling we can also add an event listener for scroll:
let root = document.documentElement;
root.addEventListener("mousemove", e => {
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', window.scrollY + e.clientY + "px");
});
document.body.addEventListener("scroll", e => {
root.style.setProperty('--mouse-x', e.clientX + "px");
root.style.setProperty('--mouse-y', window.scrollY + e.clientY + "px");
});
#mouseOverElement {
width: 200px;
height: 100px;
background: rgb(0, 0, 0);
position: absolute;
color: white;
left: var(--mouse-x);
top: var(--mouse-y);
}
html, body{
height:200%;
}
<div id="mouseOverElement">
<h3 id="mouseOverText">
test text
</h3>
</div>

Mouse following issue when using jquery fadeIn

I am trying to have this circle follow the cursor. However I need the cursor to fade in after the user clicks a button, when this happens though the circle won't be centered on the cursor.
The first code snippet shows the desired result in terms of the circle following the cursor correctly and being centered.The second snippet shows the desired fade in on button click but as you can see the circle won't be centered on the cursor
First code snippet:
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: red;
z-index: 200;
}
<div class="test"></div>
Second code snippet:
$("#myBtn").click(function(){
$('.test').fadeIn();
});
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
z-index: 200;
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>

In the second example, on page init the .test div has display: none, so its height and width are 0. You must calculate them after the fadeIn to get the correct result.
You can also add the mousemove listener after fadeIn:
$("#myBtn").click(function() {
$('.test').fadeIn('slow', function() {
const cursor = document.querySelector('.test')
, { width, height } = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
});
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
z-index: 200;
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>

Another, perhaps simpler, alternative is just to call fadeOut() (with a duration of 0) on the .test div on page load, instead of using display:none
$("#myBtn").click(function(){
$('.test').fadeIn();
});
const cursor = document.querySelector('.test');
const {
width,
height
} = cursor.getBoundingClientRect();
$('.test').fadeOut(0);
document.addEventListener('mousemove', e => {
cursor.style.top = e.y - height / 2 + 'px';
cursor.style.left = e.x - width / 2 + 'px';
});
.test {
position: absolute;
width: 25rem;
height: 25rem;
border-radius: 50%;
background-color: blue;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myBtn">show</button>
<div class="test"></div>

How to switch between transform-origin and scrollbars

I have this code above who switch between CSS transform-origin and scale to CSS width and scrollbars.
I need to make this switch because I am having a pinch to zoom for a DIV wrap I'm using in my website.
I'm using CSS translateX and translateY and Scale for a smoother pinch zoom, but after the zoom take place, I need to return back to width and scrollbar so the user can move across the layout.
I have here an example of how I'm doing the switch and there is a bit margin on top that I can't really set mind my on.
what is the correct way to do so?
var isOrigin = false;
var originX = 500;
var originY = 200;
var scale = 1.5;
var deltaX = 0;
var deltaY = 0;
var from_origin_to_scroll = function () {
if (isOrigin) { from_scroll_to_origin(); return; }
var wrap = $('.containter .wrap');
//reset scroll
const el = document.scrollingElement || document.documentElement;
$('.containter')[0].scrollLeft = 0;
el.scrollTop = 0;
wrap.css({
transformOrigin: originX + "px " + originY + "px",
transform: "translate3d(" + deltaX + "px," + deltaY + "px, 0) " +
"scale3d(" + scale + "," + scale + ", 1) ",
width: 100 + '%'
});
isOrigin = true;
$('.info').html('layout set by origin and scale');
}
var from_scroll_to_origin = function () {
var wrap = $('.containter .wrap');
wrap.css({
transformOrigin: originX + "px " + originY + "px",
transform: "translate3d(" + 0 + "px," + 0 + "px, 0) " +
"scale3d(" + 1 + "," + 1 + ", 1) ",
width: (100 * scale) + '%'
});
$('.containter')[0].scrollLeft = originX * (scale - 1);
const el = document.scrollingElement || document.documentElement;
el.scrollTop = originY * (scale - 1);
isOrigin = false;
$('.info').html('layout set by width and scroll');
}
body {
margin: 0;
padding: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width:100vw;
}
.top{
position: fixed;
width: 100%;
background-color: #333;
line-height: 40pt;
text-align: center;
color: #f1f1f1;
font-size: 20pt;
left: 0;
top: 0;
z-index: 10;
}
.top .info{
}
.header_content
{
background-color: #e1e1e1;
line-height:130pt;
}
.containter {
width:100%;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.containter .wrap {
display: flex;
flex-direction: column;
width: 100%;
}
.containter .wrap img {
width: 100%;
margin-top: 30pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="info" onclick="from_origin_to_scroll()">click to switch</div>
</div>
<div class="header_content">
this is a header content - needs to be added to overall calculation
</div>
<div class="containter">
<div class="wrap">
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/91858/594887747/stock-photo-dreams-of-travel-child-flying-on-a-suitcase-against-the-backdrop-of-sunset-594887747.jpg" />
<img src="https://thumb9.shutterstock.com/display_pic_with_logo/1020994/556702975/stock-photo-portrait-of-a-happy-and-proud-pregnant-woman-looking-at-her-belly-in-a-park-at-sunrise-with-a-warm-556702975.jpg" />
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/234100/599187701/stock-photo-funny-little-girl-plays-super-hero-over-blue-sky-background-superhero-concept-599187701.jpg" />
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/1316512/661476343/stock-photo-funny-pineapple-in-sunglasses-near-swimming-pool-661476343.jpg" />
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/2114402/689953639/stock-photo-adult-son-hugging-his-old-father-against-cloudy-sky-with-sunshine-689953639.jpg" />
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/172762/705978841/stock-photo-businessman-looking-to-the-future-for-new-business-opportunity-705978841.jpg" />
</div>
</div>

In your case the possible solution is to detect when the user is trying to zoom, and when just to scroll.
const $container = $(".container");
$container.on('touchstart', function (e) {
if (e.touches.length > 1){
//more than one finger is detected on the screen,
//change mode to transform-origin
from_scroll_to_origin()
}
});
$container.on('touchend', function (e) {
//change mode to scrollbars
from_origin_to_scroll()
});

Slider handle needs to restricted inside the container, should not go beyond the container

In the custom slider i have created, the handle is moving beyond the container. But i want it to stay within the container limits. We could just do it simple by setting margin-left as offset in CSS. But My requirement is when the handle right end detect the container's end the handle should not be allowed to move anymore. Any help is appreciated. Thanks.
Demo Link: https://jsfiddle.net/mohanravi/1pbzdyyd/30/
document.getElementsByClassName('contain')[0].addEventListener("mousedown", downHandle);
function downHandle() {
document.addEventListener("mousemove", moveHandle);
document.addEventListener("mouseup", upHandle);
}
function moveHandle(e) {
var left = e.clientX - document.getElementsByClassName('contain')[0].getBoundingClientRect().left;
var num = document.getElementsByClassName('contain')[0].offsetWidth / 100;
var val = (left / num);
if (val < 0) {
val = 0;
} else if (val > 100) {
val = 100;
}
var pos = document.getElementsByClassName('contain')[0].getBoundingClientRect().width * (val / 100);
document.getElementsByClassName('bar')[0].style.left = pos + 'px';
}
function upHandle() {
document.removeEventListener("mousemove", moveHandle);
document.removeEventListener("mouseup", upHandle);
}
.contain {
height: 4px;
width: 450px;
background: grey;
position: relative;
top: 50px;
left: 40px;
}
.bar {
width: 90px;
height: 12px;
background: transparent;
border: 1px solid red;
position: absolute;
top: calc(50% - 7px);
left: 0px;
cursor: ew-resize;
}
<div class='contain'>
<div class='bar'></div>
</div>

You need to change
this
document.getElementsByClassName('bar')[0].style.left = pos + 'px';
to this
if(pos > 90){
document.getElementsByClassName('bar')[0].style.left = pos - 90 + 'px';
}
else{
document.getElementsByClassName('bar')[0].style.left = 0 + 'px';
}
since width of your bar is 90px I am subtracting 90.
See this updated fiddle

Add span to page at the cursor position

I have the following JavaScript, I am trying to insert the span at where ever the cursor position is in the div.
var appendPlaceHolder = function (field) {
var e = document.getElementById("t");
e.innerHTML += (' <span class="nonEditable tags">{' + field + '} <span onclick=removePlaceholder(this) class="testing"></span>x</span> ');
}
<div id="t" contenteditable="true">
Hello
</div>
How do I go about doing it?

Here is an old script I've written.Hope it helps.
continent is the mouse entered div, tooltipOutput
function continentTooltip(continent, tooltipOutput) {
var tooltip = $('.map__tooltip');
$(continent).mouseenter(function() {
$(document).off('mousemove').bind('mousemove', function(e){
var positionX = (e.pageX + 20) + 'px';
var positionY = e.pageY + 'px';
$('.map__tooltip').css(
"transform" , 'translate(' + positionX + ', ' + positionY + ')'
);
});
tooltip.addClass('map__tooltip--show');
tooltip.text(tooltipOutput)
})
$(continent).mouseleave(function() {
tooltip.removeClass('map__tooltip--show');
});
}
//call script
continentTooltip(africa, 'Vacations in Africa');
HTML:
<div class="map__tooltip"></div>
CSS:
.map__tooltip {
display: none;
background-color: #FFF;
border-radius: $radius;
padding: 4px;
position: absolute;
top: 0;
left: 0;
}
.map__tooltip--show {
display: block;
}
#media screen and (max-width: 1300px) {
.map__tooltip--show {
display: none;
}
}