Develop Reference

How to use javascript to execute a function when the mouse is down [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I want to practice the effect of executing functions when doing mouse scrolling.
I have a difficulty and I want to ask for your help! Currently I have a screen when I want to scroll down when the mouse is scrolled. You can open the load screen, the default is display: none;
only when the mouse is scrolled down, javascript will be triggered to open the load screen, I hope that the function will be executed as long as the mouse is down, but not when the mouse is up Function.
function load(){
let el = document.querySelector('.load');
el.style.display = 'block';
}
load()
.demo{
width: 200px;
height: 300px;
overflow-y:scroll;
background-color: #fff;
}
.item{
list-style:none;
padding:20px;
border:1px solid #ccc;
}
.load{
width:100%;
margin: 0 auto;
display: none;
}
<ul class="demo">
<li class="item">article1</li>
<li class="item">article2</li>
<li class="item">article3</li>
<li class="item">article4</li>
<li class="item">article5</li>
<li class="item">article6</li>
<li class="item">article7</li>
<li class="item">article8</li>
<li class="item">article9</li>
<li class="item">article10</li>
<!-- load -->
<svg class="load" version="1.1" id="loader-1" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</ul>

you need to add a scroll event listener to the ul.demo element. Then when scrolling, compare the scrollTop of it to the last known position. If it is greater than the last known position, then you are scrolling down. If it is less than the last known position, you are scrolling up.
See more info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
let lastKnownScrollPosition = 0;
const ul = document.querySelector('.demo')
ul.addEventListener('scroll', function(e) {
const el = document.querySelector('.load')
const currentScrollPosition = e.target.scrollTop;
if (currentScrollPosition > lastKnownScrollPosition) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
lastKnownScrollPosition = currentScrollPosition;
});
function load() {
let el = document.querySelector('.load');
el.style.display = 'block';
}
.demo {
width: 200px;
height: 300px;
overflow-y: scroll;
background-color: #fff;
}
.item {
list-style: none;
padding: 20px;
border: 1px solid #ccc;
}
.load {
position: absolute;
top: 50px;
left: 125px;
display: none;
}
<ul class="demo">
<li class="item">article1</li>
<li class="item">article2</li>
<li class="item">article3</li>
<li class="item">article4</li>
<li class="item">article5</li>
<li class="item">article6</li>
<li class="item">article7</li>
<li class="item">article8</li>
<li class="item">article9</li>
<li class="item">article10</li>
<!-- load -->
<svg class="load" version="1.1" id="loader-1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</ul>

Is it possible to style "Choose File" input buttons? [duplicate]

This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 1 year ago.
I am using Material-UI so the conventional methods do not work.
I have two buttons next to each other in my form. One is a "Choose File" input to allow users to upload a file, and the second is a submit button. I want to style both buttons the same, but is it possible to do so since the "Choose File" is an input? Can I use CSS to edit the Choose File Button?
<Grid item xs={12}>
<FormControl>
<Input
name='uploadFile'
type='file'
required={true}
onChange={(e) => setUploadFile(e.target.files)}
/>
</FormControl>
</Grid>
<Grid item xs={12}>
<Button
variant="contained"
color="primary"
type="submit"
disabled={submitting}
>
Submit
</Button>
</Grid>
I have tried this, but it only edits the color of the text:
input[type="file"] {
top: 10px;
left: 8px;
font-size: 17px;
color: #b3e5fc;
}

You can have a look here
How to enable file upload on React's Material UI simple input?
There is also a package that's very handy and customizable for upload in react named dropzone
You can find good examples here https://react-dropzone.js.org/

yes you can.this is an example for customize input type file.
<div class="file-input">
<input
type="file"
name="file-input"
id="file-input"
class="file-input__input"
/>
<label class="file-input__label" for="file-input">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="upload"
class="svg-inline--fa fa-upload fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
></path>
</svg>
<span>Upload file</span></label
>
</div>
body {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.file-input__input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.file-input__label {
cursor: pointer;
display: inline-flex;
align-items: center;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
color: #fff;
font-size: 14px;
padding: 10px 12px;
background-color: #4245a8;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}
.file-input__label svg {
height: 16px;
margin-right: 4px;
}

Inline SVG css animation not working on Safari

I'm using the latest version of these:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
This is the CSS I am using to achieve the desired CSS animation effects across literally all browsers except Safari.
.tt-divider {
border-style: outset;
border-color: LawnGreen;
border-radius: 3px;
margin-bottom: 2.5vh;
margin-top: 2.5vh;
background: gold;
border-width: 2px;
animation: grow-divider 2s forwards linear;
margin: auto;
}
#-webkit-keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#landing-logo {
display: inline-block;
max-width: 350px;
min-width: 150px;
width: 50vw;
margin-top: 5vh;
margin-bottom: 1vh;
}
#navigation{
padding-left: 7.5vh;
padding-right: 7.5vh;
text-align:center;
}
#btm-right-nav{
max-width: 55px;
position: fixed;
right: 25px;
bottom: 10px;
}
.btm-right-ico {
display: block;
color: lawngreen;
margin:auto;
margin-bottom: 5vh;
font-size: 16px;
text-rendering: optimizeLegibility;
}
.fontawesome-i2svg-active .btm-right-ico {
animation-name: grow-buttons;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
#-webkit-keyframes grow-buttons{
from {font-size:16px; }
to {font-size: 45px; }
}
#keyframes grow-buttons{
from {font-size:16px}
to {font-size:45px;}
}
The grow-divider animation works perfectly, and another irrelevant one works perfectly as well on a different page. The only one I cannot get to work only on Safari is the grow-buttons animation. Yes Safari in general I've back-tested every version made in the past 5 years it does exactly the same thing..
Initially I thought it was a CSS naming problem... no I've tried multiple implementations of CSS for compatibility to no avail. I then thought it was just Safari, it could be, but why are my other CSS animations working then? I even put my CSS on the newly generated element via JS and it doesn't work. I even used async programming in JQuery to make sure the CSS wasn't applied before the <i> was changed to <svg>
It's worth mentioning that the CSS classes on the original <i> element are injected into the new <svg> from font-awesome... so the CSS animation is inherited.. this logic works on all browsers except Safari...
I have absolutely no idea what is causing it, anyway here's the html for the entire page:
<!--Display none is changed to block when the page is done loading-->
<div id="landing" style="display:none">
<div id="navigation">
<img id="landing-logo" src="example.gif" alt="example">
<div class="tt-divider"></div>
<div id="page">
</div>
<div id="btm-right-nav">
<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
<i class="fas fa-phone btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
</div>
</div>
</div>
I think I could get it to work if I just yanked my own svg and put it neatly in an <img> and didn't do some masking magic on my buttons.. I don't want to do that because that'll cut off a ton of features of fontawesome and take more time... so in the meantime I have the animation turned off for Safari users and it's sad because I want this animation it's incredibly satisfying and I really don't want to have to bake my own masked SVGs and put them in a <img> just so I can run CSS animations over SVGs... I mean.. is that what I have to do?
Can I inject inline SVG into a src?
Here's the baked SVG data from fontawesome after the page loads (I took out the data:)
<div id="btm-right-nav">
<svg class="svg-inline--fa fa-bars fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-
hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg=""><defs><clipPath id="clip-hzzHNtGIZRrn"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-jyjnVEKbKq5c"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0"
y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-224 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-hzzHNtGIZRrn)"
mask="url(#mask-
jyjnVEKbKq5c)" x="0" y="0" width="100%" height="100%"></rect></svg>
<!--<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-
circle"
data-
fa-transform="shrink-7"></i> Font Awesome fontawesome.com -->
<svg class="svg-inline--fa fa-phone fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="phone" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-
i2svg=""><defs><clipPath id="clip-YDDPIJZX3DpE"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-eJs29EAdXlZv"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0" y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-256 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-YDDPIJZX3DpE)"
mask="url(#mask-
eJs29EAdXlZv)" x="0" y="0" width="100%" height="100%">
</rect></svg>
<!--<i class="fas fa-phone btm-right-ico" data-fa-
mask="fas
fa-circle" data-fa-transform="shrink-7"></i> Font Awesome
fontawesome.com-->
</div>

Wow..... really hope this helps someone...
To fix the problem you use regular old css to transform scale it in the animation.
Font-size can be used to scale up inline SVGs on all browsers except Safari
#-webkit-keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
#keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
Bottom line:
Use transform: scale() instead of font-size: ()px on SVG CSS animations to maximize compatibility.

Making the div follow autoresize textarea? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
PROBLEM
I have a comment textarea which i made text responsive thanks to Jack Moores npm package https://www.jacklmoore.com/autosize/. Now this all works fine but i have a div which is usually bottom:75px; and when textarea autoresizes it updates the hight of textarea. This is where the problem occurs i would like to update also bottom of that div for example to keep it from going over textarea.
HTML
<form action="#">
<textarea
type="text"
id="text"
spellcheck="false"
placeholder="Type message..."
maxlength="50"
></textarea>
</form>
<div class="three_dots_messages" onclick="toggleMessagesSettings()"></div>
<div class="three_dots_messages_menu">
<div class="three_dots_messages_menu_buttons">
<div class="send_tip_button all_message_buttons" >
<span>Send tip</span>
<svg xmlns="http://www.w3.org/2000/svg" width="7.886" height="15" viewBox="0 0 7.886 15" style="margin: 2px 0 0 2px ;">
<path id="Icon_awesome-dollar-sign" data-name="Icon awesome-dollar-sign" class="cls-1" d="M5.731,6.838,2.773,5.912a.861.861,0,0,1-.581-.829A.837.837,0,0,1,3,4.219H4.817a1.6,1.6,0,0,1,.937.308.406.406,0,0,0,.534-.059l.953-1a.5.5,0,0,0-.049-.718,3.716,3.716,0,0,0-2.369-.879V.469A.456.456,0,0,0,4.384,0H3.507a.456.456,0,0,0-.438.469V1.875H3a3.133,3.133,0,0,0-2.985,3.5,3.293,3.293,0,0,0,2.3,2.83l2.807.879a.864.864,0,0,1,.581.829.837.837,0,0,1-.808.864H3.075a1.6,1.6,0,0,1-.937-.308.406.406,0,0,0-.534.059l-.953,1a.5.5,0,0,0,.049.718,3.716,3.716,0,0,0,2.369.879v1.406A.456.456,0,0,0,3.507,15h.876a.456.456,0,0,0,.438-.469V13.119a3.108,3.108,0,0,0,2.9-2.13A3.264,3.264,0,0,0,5.731,6.838Z" transform="translate(-0.003)"/>
</svg>
</div>
<div class="chat_rules_button all_message_buttons" >
<span>Chat rules</span>
<svg xmlns="http://www.w3.org/2000/svg" width="13.125" height="15" viewBox="0 0 13.125 15">
<path id="Icon_awesome-book-dead" data-name="Icon awesome-book-dead" class="cls-1" d="M7.969,3.984A.469.469,0,1,0,7.5,3.516.47.47,0,0,0,7.969,3.984ZM13.125,10.5V.75a.69.69,0,0,0-.75-.75H2.813A2.762,2.762,0,0,0,0,2.813v9.375A2.762,2.762,0,0,0,2.813,15h9.563a.739.739,0,0,0,.75-.75v-.469a.81.81,0,0,0-.281-.562,8.292,8.292,0,0,1,0-2.156.567.567,0,0,0,.281-.562ZM7.031,1.641A2.15,2.15,0,0,1,9.375,3.516a1.778,1.778,0,0,1-.937,1.491v.384a.47.47,0,0,1-.469.469H6.094a.47.47,0,0,1-.469-.469V5.007a1.778,1.778,0,0,1-.937-1.491A2.15,2.15,0,0,1,7.031,1.641Zm-3.375,4.9.185-.431a.233.233,0,0,1,.308-.123l2.88,1.233L9.911,5.988a.233.233,0,0,1,.308.123l.185.431a.233.233,0,0,1-.123.308l-2.06.885,2.06.882a.233.233,0,0,1,.123.308l-.185.431a.233.233,0,0,1-.308.123L7.031,8.244,4.151,9.48a.233.233,0,0,1-.308-.123l-.185-.431a.233.233,0,0,1,.123-.308l2.063-.882L3.779,6.85a.233.233,0,0,1-.123-.308Zm7.5,6.583H2.813a.886.886,0,0,1-.937-.937.939.939,0,0,1,.938-.937h8.344ZM6.094,3.984a.469.469,0,1,0-.469-.469A.47.47,0,0,0,6.094,3.984Z"/>
</svg>
</div>
<div class="muted_users all_message_buttons" >
<span>Muted users</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16.071" height="15" viewBox="0 0 16.071 15">
<path id="Icon_metro-volume-mute2" data-name="Icon metro-volume-mute2" class="cls-1" d="M18.642,13.15V14.57H17.222l-1.794-1.794L13.634,14.57H12.214V13.15l1.794-1.794L12.214,9.562V8.142h1.421l1.794,1.794,1.794-1.794h1.421V9.562l-1.794,1.794ZM9.535,18.856a.535.535,0,0,1-.379-.157L5.027,14.57H3.106a.536.536,0,0,1-.536-.536V8.677a.536.536,0,0,1,.536-.536H5.027L9.156,4.013a.536.536,0,0,1,.915.379V18.32a.536.536,0,0,1-.536.536Z" transform="translate(-2.571 -3.856)"/>
</svg>
</div>
<div class="close_chat_button all_message_buttons" onclick="toggleMessagesSettings(), toggleMessages() ">
<span>Close chat</span>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
<path id="Icon_material-close" data-name="Icon material-close" class="cls-1" d="M22.5,9.011,20.989,7.5,15,13.489,9.011,7.5,7.5,9.011,13.489,15,7.5,20.989,9.011,22.5,15,16.511,20.989,22.5,22.5,20.989,16.511,15Z" transform="translate(-7.5 -7.5)"/>
</svg>
</div>
</div>
</div>
CSS
.three_dots_messages_menu {
position: fixed;
width: 15%;
height: 130px;
min-width: 232px;
bottom: -250px;
background-color: #363636;
border-radius: 5px;
opacity: 0;
transition: 0.3s;
}
#text {
border: 1px solid #d4af37;
background-color: #343333;
position: fixed;
bottom: 15px;
margin: 0 auto;
font-size: 17px;
width: 13%;
padding: 12px 30px 5px 10px;
color: white;
border-radius: 5px;
min-width: 190px;
min-height: 33px;
height: 33px;
max-height: 100px;
outline: none;
resize: none;
}
SOME INFORMATION AND QUESTIONS
I need to keep it position absolute not just fix this with margins.
I know i can do this modifying the js of autosize but i am honestly
not skilled enough to completely understand everything that is going
on.
Is there a way to maybe manipulate the DOM so i can make div children of that textarea ?
Do you know maybe easy js fix ?
JS for autoresize is too big you can view it from the website

It's best if you simply move the menu to a point before the textarea and remove its fixed positioning, so that it automatically remains in place.
If you want to adapt it dynamically, Autosize triggers an event where you can hook some code to update its position.
var $text = jQuery('#text'),
$menu = jQuery('.three_dots_messages_menu'),
baseDistance = 75;
$text.on( 'autosize:resized', function() {
$menu.css( 'bottom', $text.height() + baseDistance + 'px' );
})

Svg horizontal line between background

.left-wave-container {
line-height: 0 !important;
width: 100%;
height: 100%;
}
.container {
width: 100vw;
height: 50vh;
background: #2196f3;
}
<div className="left-wave-container">
<div className="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="430" viewBox="0 0 1280 430"><path d="M0,465V35A96.575,96.575,0,0,0,.64,46.15,94.294,94.294,0,0,0,2.56,56.94C15.71,112.271,78.9,153.52,171,186.521v.159c116.77,41.85,280,70.44,446.67,97.681,6,1,12,2,18,2.93C682.9,295,730.32,302.6,776.9,310.43c3.73.61,7.45,1.25,11.16,1.87,2.72.46,5.431.93,8.131,1.37l7.59,1.291,2.05.35c5.07.869,10.139,1.74,15.179,2.62C890.64,330,957.62,342.71,1018.56,357c5.45,1.29,10.86,2.569,16.21,3.88q13.49,3.28,26.54,6.7,7.53,2,14.9,4l1.2.329c5.65,1.53,11.2,3.1,16.691,4.691,1.2.329,2.36.68,3.54,1,81,23.559,145.33,51.53,182.08,86.95l.28.26V465Z" transform="translate(0 -35)" fill="#2196f3"/>
</svg>
</div>
<div className="container">
</div>
</div>
I'm trying to put together one svg header with a wave with the same background color that it has but in the bottom in specifics viewport sizes one line is displayed between them.
One curious things is, when I don't alter the width of height in the CSS or directly in the svg the horizontal line disappear but it just has the size ah the beggining, no the full viewport (I realize this when I upload the snippet).
Thanks for read!

Drew your wave in Inkscape
Removed SVG from the markup width =" 1280" height ="430"
Now the application will be adaptive at any screen resolution.
Styles did not work because there was <div className =" container ">
write <div class =" container "> correctly
.left-wave-container {
width: 100%;
height: 100%;
line-height: 0 !important;
}
.container {
width: 100%;
height: 100%;
background: #2196f3;
}
<div class="left-wave-container">
<div class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 430">
<path d="m2.7 20.4c-1.2-35.4-1.3 4.9 17.7 35.5 19.1 30.6 57.4 52.9 91.9 68.1 130.2 56.1 261.7 80.2 377.8 101.5 187.9 32.6 388.1 61.4 560.4 103 39.4 9.7 74.8 18.1 117.1 33.6 37.9 13.9 135.6 67.5 100.7 67.1C995.4 425.3 1.6 425.3 1.6 425.3c0 0 2.1-377.7 1.2-404.9z" transform="translate(0 5)" fill="#2196f3" stroke="#2196f3" stroke-width="10"/>
</svg>
</div>
<div class="container">
</div>
</div>