Develop Reference

Moving scrollbars according to element position

I want my element center aligned until scrolling in div reached has reached end, here is my code
clamp = (value, min, max) => {
if (value < min) return min;
else if (value > max) return max;
return value;
};
const playground = document.getElementById('playground');
const viewarea = document.getElementById('viewarea');
const selfUser = document.getElementById('user1');
window.playgroundBounding = { minX: 0, maxX: playground.clientWidth, minY: 0, maxY: playground.clientHeight };
playground.onmouseup = function (e) {
if (e.button === 0) mouseClicked(e);
};
function mouseClicked(event) {
xposition = event.clientX + viewarea.scrollLeft - selfUser.offsetWidth / 2;
yposition = event.clientY + viewarea.scrollTop - selfUser.offsetHeight / 2;
xposition = clamp(xposition, window.playgroundBounding.minX, window.playgroundBounding.maxX - selfUser.offsetWidth);
yposition = clamp(yposition, window.playgroundBounding.minY, window.playgroundBounding.maxY - selfUser.offsetHeight);
$(selfUser).animate(
{
left: xposition + 'px',
top: yposition + 'px',
},
500,
'linear'
);
viewarea.scrollTo(xposition, yposition)
}
body {
margin:0;
padding:0;
}
#viewarea {
width: 100vw;
height: 100vh;
overflow: auto;
position: relative;
scroll-behavior: smooth;
transform-origin: left top;
top:0px;
left:0px;
/*overflow: hidden;*/
}
#playground {
width: 1920px;
height: 1080px;
background-image: url('https://www.tynker.com/projects/screenshot/60390c5cde3bf81ccf3101f6/erosion.png');
background-position: top left;
background-repeat: no-repeat;
background-size: 1920px 1080px;
position: relative;
scroll-behavior: smooth;
transform: translate(0px, 0px) scale(1, 1);
left: 0px;
top:0px;
}
.avatar {
width: 50vw;
height: 50vw;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
color: blue;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: move;
user-select: none;
transition: transform 0.1s ease-in;
position:absolute;
}
.avatar-image {
width: 30vw;
height: 30vw;
background: url("https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200") top left / cover no-repeat;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 3px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewarea">
<div id="playground">
<div class="avatar " id="user1">
<div class="avatar-image">
<div class="user-name"></div>
</div>
</div>
</div>
</div>
Now on click avatar is moving on view area, i want scrollbars to scroll vertically and horizontally nicely according to player position, or maybe player remain in center until scrollbar scrolled completely and player can touch the border.

How can I invert the color black to make it visible during mouseover?

I have a circular mouse sprite that will show the inverse of a color during mouseover. I want to be able to use this to find black text (hidden within a black background) and make the black text visible as white if the circular mouse sprite is over the text.
It looks as follows:
Over text:
I want to make it so that when its over the text "FEELING LEFT IN THE DARK?", the text will appear white, but only within the cursor. For example, in the second image above, only the bottom part of "EL" should be visible as WHITE while the circular mouse sprite is over the text.
I wonder if this is even possible? and if so, help is appreciated.
HTML:
<h1 class="contact-intro">Feeling Left <br> in the dark?</h1>
<span class="cursor"></span>
CSS:
/*The text "Feeling left in the dark?*/
.contact-intro {
text-align: left;
justify-content: center;
margin: auto;
margin-left: 28.55%;
margin-top: 3%;
display: inline-block;
text-transform: uppercase;
color: black;
font-size: 7em;
z-index: 500;
}
/*The Cursor*/
#media ( hover: none ) {
.cursor {
display: none !important;
}
}
* {
cursor: none;
}
.cursor {
--size: 80px;
height: var( --size );
width: var( --size );
border-radius: 50%;
pointer-events: none;
position: absolute;
transform: translate( -50%, -50% );
z-index: 1;
}
.cursor.cursor-dot {
background: orangered; /* This defines the color of the cursor */
mix-blend-mode: difference;
transition: width 0.6s, height 0.6s, background-color 0.6s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 50px;
background-color: #ffffff;
}
JQUERY:
//text inversion
$(() => {
$('body').prepend('<div class="cursor cursor-dot" style="left: 0px; top: 0px;">');
$(window).mousemove(function (e) {
$('.cursor').css({
left: e.pageX,
top: e.pageY
});
});
$(window).mousemove(function (e) {
$('a').on('mouseenter', function () {
$('.cursor').addClass('active');
});
});
$(window).mousemove(function (e) {
$('a').on('mouseleave', function () {
$('.cursor').removeClass('active');
});
});
});

This isn't exactly what you asked for, since the text color isn't inverted...but the black still shows up against the red cursor element as it moves around. Pretty simple to do with z-index.
const cur = document.querySelector('#cur');
const { width, height } = cur.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cur.style.top = e.y - height / 2 + 'px';
cur.style.left = e.x - width / 2 + 'px';
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
background-color: black;
}
#txt {
position: relative;
color: black;
background-color: transparent;
z-index: 300;
font-size: 3rem;
padding: 1rem;
}
#cur {
position: absolute;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
background-color: red;
z-index: 200;
}
<div id='txt'>FEELING LEFT IN THE DARK?</div>
<div id='cur'></div>

How to smoothly scrolling in adding element?

I making infinite scroll box by clicking two arrow ! I do each scroll by adding/subtracting 15px . I detected the scroll left min and max value for making infinite scroll by adding existed element , but its scroll range is not going to 15.It is scrolling to the whole div width . How can I make it scrolling to 15 (px) after I added element (not its element width) ?
$("#left").click(function(){
var left = $("#round").scrollLeft() - 15;
if(left == -15) {
$("#round div:last-of-type").remove().prependTo("#round");
}
$("#round").scrollLeft(left);
});
$("#right").click(function(){
var left = $("#round").scrollLeft() + 15;
if(left == 315) {
$("#round div:first-of-type").remove().appendTo("#round");
}
$("#round").scrollLeft(left);
});
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: transparent;
}
#round {
max-width:500px;
max-height:100px;
width:500px;
height:100px;
border:1px solid #bbb;
overflow:auto;
display: -webkit-inline-box;
position:relative;
}
#round div{
width:200px;
height:inherit;
}
#one {
background:red;
}
#two {
background:pink;
}
#three {
background:green;
}
#four {
background:#393939;
}
span {
position:fixed;
border:1px solid #bbb;
padding:10px;
background:rgba(255,255,255,.5);
color:#eee;
top:30px;
cursor:pointer;
}
#left {
left:10px;
}
#right {
left:475px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="round">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='three'>3</div>
<div id='four'>4</div>
<span id='left'><</span>
<span id='right'>></span>
</div>

You may modify your code like this. When you reach the left==-15 you consider adding the width of the new element you add in the left and then you scroll. You do the same in the right but you remove instead of adding :
$("#left").click(function() {
var left = $("#round").scrollLeft() - 15;
if (left == -15) {
$("#round div:last-of-type").remove().prependTo("#round");
left = $("#round").scrollLeft() + $("#round div").width() - 15;
}
$("#round").scrollLeft(left);
});
$("#right").click(function() {
var left = $("#round").scrollLeft() + 15;
if (left == 315) {
$("#round div:first-of-type").remove().appendTo("#round");
left = $("#round").scrollLeft() - $("#round div").width() + 15;
}
$("#round").scrollLeft(left);
});
::-webkit-scrollbar {
width: 0px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: transparent;
}
#round {
max-width: 500px;
max-height: 100px;
width: 500px;
height: 100px;
border: 1px solid #bbb;
overflow: auto;
display: -webkit-inline-box;
position: relative;
}
#round div {
width: 200px;
height: inherit;
}
#one {
background: red;
}
#two {
background: pink;
}
#three {
background: green;
}
#four {
background: #393939;
}
span {
position: fixed;
border: 1px solid #bbb;
padding: 10px;
background: rgba(255, 255, 255, .5);
color: #eee;
top: 30px;
cursor: pointer;
}
#left {
left: 10px;
}
#right {
left: 475px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="round">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='three'>3</div>
<div id='four'>4</div>
<span id='left'><</span>
<span id='right'>></span>
</div>

How to disable correctly CSS3 transition property when needed

I'm working on a CSS transition property, and I have a problem when my JavaScript updates the same CSS value.
I made a simple example to understand.
document.addEventListener('DOMContentLoaded', function() {
let container = document.getElementById("container")
let hovercontainer = document.getElementById("hover-container")
let square = document.getElementById("square")
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)
square.style = "transform: translateX(" + parseInt(delta_x * 400) + "px);"
}
let mouseLeave = function(e) {
square.style = ""
}
hovercontainer.addEventListener("mousemove", mouseMove)
hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
display: flex;
}
#container {
width: 600px;
height: 200px;
margin: auto;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
background: #FFF;
display: flex;
}
#hover-container {
width: 500px;
height: 100px;
margin: auto;
background: #EEE;
border-top: 1px solid #DDD;
border-bottom: 1px solid #CCC;
display: flex;
}
#square {
pointer-events: none;
width: 90px;
height: 90px;
background: #a4d24b;
margin: auto 5px;
box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
transform: translateX(0);
transition: all 3s;
}
#container:hover #square {
transform: translateX(400px);
box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}
<div id="wrapper"> <!-- background -->
<div id="container"> <!-- white -->
<div id="hover-container"> <!-- gray -->
<div id="square"></div> <!-- square -->
</div>
</div>
</div>
On this code, the transform:translateX() position of #square is updated from 0 to 400px based on the mouse position:
done with CSS: When the mouse enter on the white box, the CSS transform property is updated from 0 (left) to 400 (right) and the transition is done on 3s.
done with JS: When the mouse enter on the gray line, the transform property is updated directly on the tag to "follow the mouse".
Problem: When the mouse enter on the gray line, the cube come nicely (with transition) under the mouse. But when the mouse move (fast), the attribute change everytime and the square didn't move at all (caused by transition property)
Other try I also try by adding transition: all 0s with Javascript to "disable" temporary, but now the square teleport himself when the mouse enter on the gray line.
(same code with update)
document.addEventListener('DOMContentLoaded', function() {
let container = document.getElementById("container")
let hovercontainer = document.getElementById("hover-container")
let square = document.getElementById("square")
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)
square.style = "transform: translateX(" + parseInt(delta_x * 400) + "px); transition: all 0s;"
}
let mouseLeave = function(e) {
square.style = ""
}
hovercontainer.addEventListener("mousemove", mouseMove)
hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
display: flex;
}
#container {
width: 600px;
height: 200px;
margin: auto;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
background: #FFF;
display: flex;
}
#hover-container {
width: 500px;
height: 100px;
margin: auto;
background: #EEE;
border-top: 1px solid #DDD;
border-bottom: 1px solid #CCC;
display: flex;
}
#square {
pointer-events: none;
width: 90px;
height: 90px;
background: #a4d24b;
margin: auto 5px;
box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
transform: translateX(0);
transition: all 3s;
}
#container:hover #square {
transform: translateX(400px);
box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}
<div id="wrapper"> <!-- background -->
<div id="container"> <!-- white -->
<div id="hover-container"> <!-- gray -->
<div id="square"></div> <!-- square -->
</div>
</div>
</div>
How can I merge both solution to get a nice and smooth moving square ?

That's really complicated. What I got out of that is that you want to be able to move the mouse around without noticeable change in speed and for it to reach the pointer at about the same time as if the mouse never moved. For that you basically have to listen for the first time the mouse enters the target area and update the destination and the transition delay so that it doesn't reset at 3 seconds. Here's a demo that kind of does what you're asking. It uses javascript to determine what the delay time should be and updates it while updating the target X value. I did have to disable easing on the transition however, for to not look so jerky. Hopefully this helps you understand the problem a bit more and maybe it can be worked into a solution for your needs.
document.addEventListener('DOMContentLoaded', function() {
let container = document.getElementById("container")
let hovercontainer = document.getElementById("hover-container")
let square = document.getElementById("square")
let ts = null
let mouseMove = function (e) {
let el = e.currentTarget;
let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)
if(!ts) ts = new Date().getTime() + 3000;
let d = Math.max(0, ts - new Date().getTime()) / 1000 + 's';
square.style.transitionDuration = d;
square.style.transform = "translateX(" + parseInt(delta_x * 400) + "px)";
if(d === '0s') ts = null;
}
let mouseLeave = function(e) {
square.style.transition = null;
square.style.transform = null;
ts = null;
}
hovercontainer.addEventListener("mousemove", mouseMove)
hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);
html, body, #wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background: #a4d24b;
display: flex;
}
#container {
width: 600px;
height: 200px;
margin: auto;
box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
background: #FFF;
display: flex;
}
#hover-container {
width: 500px;
height: 100px;
margin: auto;
background: #EEE;
border-top: 1px solid #DDD;
border-bottom: 1px solid #CCC;
display: flex;
}
#square {
pointer-events: none;
width: 90px;
height: 90px;
background: #a4d24b;
margin: auto 5px;
box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
transform: translateX(0);
transition: all 3s linear;
}
#container:hover #square {
transform: translateX(400px);
box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}
<div id="wrapper"> <!-- background -->
<div id="container"> <!-- white -->
<div id="hover-container"> <!-- gray -->
<div id="square"></div> <!-- square -->
</div>
</div>
</div>

Keep feedback button to the right when horizontal scroll occurs

I am developing feedback form in ASP.NET. I am placing the feedback image on right by getting document.client width etc. (pleaes find complete code below)
Question:
I can maintain the position of feedback button when onresize event occurs
I want to maintain the feedack button and form to the right when user scrolls the page to right. How can I achieve this? Please refer to window.onScroll event below.
//JQUERY
$(document).ready(function() {
var feed_width = $('#feedback').width();
//var scr_w = window.innerwidth; // Screen Width
var scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
// 26 is width of the veritcal feedback button
var btn_width = 26;
var move_right = scr_w - btn_width - 15;
var slide_from_right = scr_w - (feed_width - btn_width) - 26;
var center = (scr_w / 2) - (feed_width / 2);
var intX = document.getElementById('feedback').style.left;
//maintain the spot when windows is resized
window.onresize = function() {
scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
// 26 is width of the veritcal feedback button
move_right = scr_w - btn_width;
slide_from_right = scr_w - (feed_width - btn_width);
positioningForm();
}
window.onscroll = function() {
move_right = +move_right;
positioningForm();
}
function positioningForm() {
$('#feedback').css({ "left": move_right + "px" }).show();
//ntX = document.getElementById('feedback').style.left;
//document.getElementById('name').value = $('#hName').val();
}
function slideFromRight() {
$('#feedback').animate(
{ left: slide_from_right + "px" },
{ duration: 'slow', easing: 'jswing' });
}
function moveRight() {
$('#feedback').animate({ left: move_right + "px" }, { duration: 'slow', easing: 'jswing' });
setTimeout("$('.right_btn').show();", 600);
}
// Positioning the feedback form at the time of page loading
positioningForm();
// Handling the right_btn and lift_btn event animations
$('.right_btn').click(function() {
slideFromRight();
});
// Moving left or right by clicking close button
$('.feed_close').click(function() {
moveRight();
});
//Submit button clicked
$('#submit_btn').click(function() {
var msg = $('#msg').val();
if (msg.length > 0) {
$('.right_btn').hide();
$('.box').hide();
$('#feedback').animate({ left: center + "px" }, { duration: 'slow', easing: 'jswing' });
$('.thankyou').show();
}
else {
$('#error').html('Enter some thing');
$("#msg").focus();
}
});
});
CSS:
<style type="text/css">
body{
width: 100%;
overflow: auto;
padding: 0;
margin: 0;
font-family:arial;
white-space:nowrap;
}
h3
{
color:black
}
#feedback{
width: 352px;
position: absolute;
top: 100px;
display: none;
}
#feedback .formdiv{
width: 300px;
float: left;
background-color: #ffffff;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
min-height:100px;
border:solid 1px black;
}
#feedback label{
font:bold 11px arial;
color: #80bae8;
}
#feedback textarea{
width: 290px;
height: 100px;
color: black;
font: normal 11px verdana;
border: solid 1px #80bae8;
padding: 5px;
background-color: #ffffff;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
resize: none; /* disable extending textarea in chrome */
}
#feedback input[type="text"]{
color: black;
font: normal 11px verdana;
padding: 3px;
width: 200px;
height: 25px;
border: solid 1px #80bae8;
color: black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
}
#feedback input[type="submit"]{
background-color: white;
border: solid 1px #80bae8;
color: #80bae8;
font:bold 13px arial;
padding: 2px 6px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
cursor: pointer;
}
#feedback .left_btn,
#feedback .right_btn{
width: 26px;
height: 100px;
float: left;
cursor: pointer;
}
#feedback .feed_close{
cursor: pointer;
margin:-10px -5px 0px 0px;
}
#error
{
color:red;
padding:4px;
font-size:11px;
}
.thankyou
{
text-align:center;
display:none;
}
.textmsg
{
font-size:28px;
font-family:'Georgia',Times New Roman,Times,serif;
text-align:center;
}
</style>

Sounds like you should be using CSS to position the button and form in a fixed position on screen.
For example, see how the position:fixed, right and bottom styles are used here:
<div style="width:2000px; background-color:yellow;">This is the thing that causing scrolling to the right.</div>
<div style="position:fixed; right:100px; bottom:100px; background-color:yellow;">
This is the thing that will stay fixed on screen.
</div>