I have an automatically expanding text-area. But when clicking send button, text-area is not going back to original height. I have included a sample code. In the project, its implemented using react. Is there any way to make text area height to "50px" when clicking send button? Thank you
var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize() {
var el = this;
setTimeout(function() {
el.style.cssText = 'height:auto; padding:0';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
}, 0);
}
.textarea {
overflow: hidden;
padding: 10px;
width: 250px;
font-size: 14px;
margin: 50px auto;
display: block;
border-radius: 10px;
border: 6px solid #556677;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid pl-5">
<div class="row w-70 text-center">
<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>
</div>
<button class="send-btn" onClick={()=> messageSendHandler()}>send</button>
</div>
</body>
</html>
I don't see the messageSendHandler() function description attached to your post. Does it clear the textarea field? If so, when it happens, the keydown event does not occur, and thus the autosize() function is not triggered. So, I can see these 2 ways to choose from:
if you'd like to run this autosize() function on form submit as well, replace keydown event with input event — it is more universal and can help with different input types (such as dictation),
another option would be to reset the textarea height inside the form submit function (messageSendHandler()), similarly to how you do it here:
el.style.cssText = 'height:' + el.scrollHeight + 'px';
Also, alternatively, maybe this CSS-tricks URL can give you more inspiration on the topic.
Related
I have a form on my website, and an 'Edit' button, which allows the form to be edited via some javascript.
Then I have a submit button labeled 'Save Changes' which submits the form.
The additional script, which I posted below... does allow the 'Save Changes' button to appear, only after the 'Edit' button is clicked, and that's OK.
But, I would rather the 'Save Changes' button replace the 'Edit' button (in the same spot), after the Edit button is clicked.
Is there a simple script solution for this?
This is the working script I am currently using to make the 'Save Changes' (submit) button appear when the edit button is clicked.
SCRIPT:
document.querySelector('.saveChanges_Button').style.display = 'none';
document.querySelector('.editBtn').addEventListener('click', showBtn);
function showBtn(e) {
document.querySelector('.saveChanges_Button').style.display = 'block';
e.preventDefault();
}
You can do the same thing you already do when clicking the Edit button.
If you click edit, then the edit button disappears and the save button takes it's place; vice-versa for the save button.
To have it be placed in the same spot as the other button, you can place them both in the same div.
Since display = 'none' means the element just doesn't exist on the page at that moment, the other item will take it's position on the page.
Edit: I added an example.
const editButton = document.querySelector('.editBtn');
const saveChangeButton = document.querySelector('.saveChanges_Button');
editButton.addEventListener('click', () => {
saveChangeButton.style.display = 'block';
editButton.style.display = 'none';
});
saveChangeButton.addEventListener('click', () => {
saveChangeButton.style.display = 'none';
editButton.style.display = 'block';
});
.editBtn {
display: block;
width: 15px;
height: 15px;
background-color: blue;
}
.saveChanges_Button {
display: none;
width: 15px;
height: 15px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button class="editBtn"></button>
<button class="saveChanges_Button"></button>
</div>
</body>
</html>
I have been working on this code where I need to take input from the user via HTML buttons and then assign that input URL of an image from the web to the .bg {background: URL('URL') } in my CSS file.
Is there some way I can do that?
.bg {
background: URL(' *user input image URL * ')
}
This is the project I have been originally working on, so I wanted the URL input from the user and then display the blurry loading post that using the input from the user
https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading
So as you see here I am updating the background after 3 seconds. This will not change the css file but will change the css in real time. All you need to do is update what is stored in the background style portion of the element. You just need the link to the image. If you want to update permanently in the css there are 2 ways to go about it, keeping the css the same and changing the reference file or writing to the css file with a different script and reloading.
setTimeout(function () {
document.getElementById("bg").style.background ="URL('https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI')";
}, 3000);
#bg {
color: blue;
background: URL('https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U');
height: 400px;
}
<div id="bg"></div>
I think you can do like this
function setImage() {
const input_from_user = document.getElementById("input_from_user");
const image_url = input_from_user.value;
const bg_container = document.getElementsByClassName("bg")[0];
bg_container.style.backgroundImage = `url(${image_url})`;
}
.bg {
width: 400px;
height: 200px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="bg"></div>
<input type="url" id="input_from_user" />
<button onclick="setImage()">Set Image</button>
</body>
</html>
Can try with this image: https://www.google.nl/images/srpr/logo3w.png
Hope this can help.
I don't want to remove the first paragraph from the root div using the Backspace key. How can I prevent deleting the first or the only paragraph inside this contenteditable div? This paragraph should also editable. Javascript will help to prevent this paragraph. I need a idea.
.root {
max-width: 700px;
margin: 1rem auto;
border: 1px solid;
}
<div class="root" contenteditable="true">
<p id="block-1">I want to prevent this paragraph from delete.</p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.root {
max-width: 700px;
margin: 1rem auto;
border: 1px solid;
}
</style>
</head>
<body>
<div class="root" contenteditable="true">
<p id="block-1">I want to prevent this paragraph from delete.</p>
</div>
<script>
const div = document.querySelector('.root');
const paragraph = document.getElementById('block-1');
div.addEventListener(
'input',
(event) => {
if (!event.target.contains(paragraph)) {
div.insertBefore(paragraph, div.firstChild);
}
},
false
);
</script>
</body>
</html>
Adding the following event listener to the root element will prevent the backspace key from doing anything if all it can do is delete the first paragraph, which is the only time that it can delete the first paragraph. It starts by checking for the backspace key, but before preventing the default action from occurring, it will also check to make sure that there is no text and there is only one paragraph left. This works because paragraphs can only be deleted without text content, and you can't remove the first paragraph unless it is the only paragraph left.
document.getElementsByClassName("root")[0].addEventListener("keydown", function (event) {
if (event.key == "Backspace" && this.textContent == "\n \n" && this.children.length <= 1) {
event.preventDefault()
}
})
.root {
max-width: 700px;
margin: 1rem auto;
border: 1px solid;
}
<div class="root" contenteditable="true">
<p id="block-1">I want to prevent this paragraph from delete.</p>
</div>
You could add attribute contenteditable="false" either in html or with JS:
<div class="root" contenteditable="true">
<p id="block-1" contenteditable="false">I want to prevent this paragraph from delete.</p>
<p id="block-2">I do not want to prevent this paragraph from delete.</p>
</div>
or with JS:
let immutableP = document.getElementById('block-1');
immutableP.setAttribute("contenteditable", false);
Here is the link.
I have a share-dialog which I want to move when a user will click over it. Here in my case I have a multiple dialog box which can populate and want it to move with id associated with this dialog.
I have tried with some solution here as well but getting some error on the process any help/suggestion what I am doing wrong.
//dialog
<div className="share-request-dialog" onClick={this.onClick(participant.id)}>
<div className="alert-dialog-container">
<---- dialog body --->
</div>
</div>
//So far tried with this onClick function with both style.top and others as well
onClick = (partId, e) => {
var divClass = '.share-request-dialog'+partId;
// eslint-disable-next-line no-restricted-globals
let Y = scrollY;
debugger
// partId[0].style.top = e.clientY + 'px';
divClass.offset().top = Y + 'px';
console.log("Div is clicked" + partId);
}
/Errors
TypeError: divClass.offset is not a function
//basic design (Screen can be open mutiple over each other so want to move each one on to top of the screen on click over it)
Updated Answer
I notice your code is written in React, you need to look into simply toggling the CSS class to one which has left and top 0 that is positioned absolutely.
OR you can simply set the div style top to zero like below - Non React code
If you want the dialog to float on top of others - simply use a z-index:<high value> to ensure they are the topmost from a stacking order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
.share-request-dialog {
background: blue;
border: 1px solid red;
height: 25px;
top: 300px;
position: absolute;
}
</style>
<title>Static Template</title>
<script>
const getOffset = (partId) => {
// eslint-disable-next-line no-restricted-globals
// partId[0].style.top = e.clientY + 'px';
event.target.style.top = 0 + "px";
console.log("Div is clicked" + partId);
};
</script>
</head>
<body>
<div class="share-request-dialog" onClick="javascript:getOffset(5)">
<div class="alert-dialog-container">
<---- dialog body ---> ss
</div>
</div>
</body>
</html>
https://codesandbox.io/s/zen-agnesi-rybp4?file=/index.html
I would like to scroll to a certain element via #:
Element
<div name="element" />
It accomplishes this quite well, but it goes to the very top of the element. However, I'd like the element scrolled to to be centered for the user.
I am hesitant to use Javascript's scrollTo or other, external libraries, since I will need to use this functionality a lot (very, very much). I am using React and don't want to overuse refs and slow down my app. So I'd like to accomplish this with HTML only, preferably. JS is fine too, of course, but most solutions I came across modify the DOM and/or use refs.
There is probably a better/cleaner way to do it, but with only html/css, the only thing that I think about is to use a hidden span under your div element, like so:
html {
scroll-behavior: smooth;
}
.space {
width: 100%;
height: 400px;
background-color: blue;
}
#element {
position: relative;
top: -50vh;
visibility: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Element
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<div>
<p>
Your element
</p>
<span id="element">anchor </span>
</div>
<div class="space"></div>
</body>
</html>
AFAIK, no way to achieve your desirable effect without a bit of js. As for "centered", then some calculation is needed.
<html>
<head>
<title>Document</title>
<style>
.placeholder {
height: 1000px;
}
</style>
<script>
function scrollToDest(event) {
var id = event.target.getAttribute("href");
if (id.charAt(0) !== "#") return; // not a valid <a> element
var dest = document.getElementById(id.substr(1));
if (!dest) return; // no destination found;
event.preventDefault();
// calculate the top and bottom margin remained when dest is centered
var margin = window.innerHeight - dest.clientHeight;
// what if the dest's height is larger than viewport?
if (margin < 0) margin = 0;
window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" });
}
</script>
</head>
<body>
<div class="placeholder">
Let's go!
</div>
<div id="dest">ARRIVAL</div>
<div class="placeholder"></div>
</body>
</html>